San Francisco State University iLearn App
A technological intervention, specifically an app, that would tackle the current issue and create an on-the-go platform for students at San Francisco State University to receive reminders and work on an organized layout to promote success in school.
Role
User Research, Wireframing, Prototyping, User Testing
Timeline
November-December (4 week project)
Team
Joseph Wheatley, Bella Leggero, Jazlyn Castro
Tools
Figma, Photoshop
The Problem
Currently, San Francisco State University only provides a web version of their academic website for students through iLearn. Whenever a student would like to check academic related issues such as due dates on assignments or their grades, they must log into the iLearn website. Students do not get notified of future due assignments, which hinders their academic success. Also, there is currently no platform for students to communicate with each other nor to their professors except by emailing or attaining their numbers.
There must be a platform made in order for students to keep track and organize all their courses while also being able to communicate with their fellow students and professors without having to use email for all communications.
The solution
To solve this problem, our team came up with a solution to create an iLearn app to maximize the students academic experience and success through added features such as a calendar page, messaging page, courses page, and the ability to turn on post notifications.
Research and Analysis
As students of SFSU ourselves, our first step was to use our experiences with the current iLearn web platform to identify key problems that we wanted to solve and use our own experiences to curate questions to ask our 4 users:
How has your experience been with the web version of iLearn so far?
“It has been okay, I wish there was a way to keep me logged in instead of having to login everytime”
If you could improve iLearn what would you have removed or added?
“It would be a huge help if the calendar actually reminded me of classes and assignments”
“To get notifications”
Have you ever used the calendar feature on our website?
“The calendar is not up to date to my classes, which makes it useless”
“I did not know we had a calendar feature”
Have you ever missed class or missed an assignment due to forgetfulness?
“Yes!”
“I try not to, I use a planner to write down all my upcoming due dates”
“The first week of class last semester I mixed up 2 classes and went to the wrong class at the wrong time”
Do you connect with student through the web version of iLearn?
“I don’t connect with students through the iLearn website”
“I get the professors email through the syllabus they give us, but that’s about it”
Insights
The process of logging in everytime the user needs to access grades, assignments, and the various functions on iLearn is very tedious.
Many students forget assignment due dates due to not receiving notifications on when they are due.
Students mix their days and weeks together throughout the beginning of the semester and misses classes.
The calendar feature on the iLearn website is never used by any student due to the lack of structure it currently has.
Students have no way of communication other than asking for each other’s numbers or by email.
User Persona
Based off of the research and analysis, we then created a persona that represents our demographic of SF State students for our application and began to ideate on what was crucial to include in our product. This persona allows us to empathize and understand the user for our product and their main concerns.
User Flow
After conducting our user research and creating a user persona it’s finally time to begin the ideation process. Creating a user flow became much easier once I knew what the user needed and wanted to see on the app.
Paper Prototype
From our user persona and user flow, it was time to move forward with the ideation process and create paper prototypes that we used for our first usability test
Usability Testing 4 Scenarios
It’s Alex Smith’s first day of remote classes. She wants to check the class overview page to prepare before joining her DES327 class.
She wants to check her calendar to see her plan for the day and what upcoming tasks she will have to complete.
She wants to check if she received any messages to see if any professors or fellow classmates reached out. She sees Cristian messaged her and is curious to see what he has to say.
She wants to update her profile picture and description so that everyone can see a recent version of her.
Insight
After our first evaluation with a San Francisco State student, we identified usability issues within our paper prototype:
Within the messages feature, we separated into groups, classmates and professors for convenience and organization.
We incorporated a notification to ask the user if they would like to receive alerts for all their courses.
High Fidelity Prototype
After the usability test from the paper prototype, we knew what we needed to add to our app in order to maximize the user experience. We then created the high fidelity prototype
Usability Testing (High Fidelity Evaluation)
After our first usability test and the data collected from the feedback, we then began creating a high fidelity prototype of our product. After completion, we conducted another usability test with another student for input using the same scenarios from the paper prototype evaluation.
User Feedback (High Fidelity Evaluation)
After our second usability test we were able to gain feedback on our high fidelity prototype.
Including a profile photo in the messages tab
Darkening the color of class tab
Adding a heading titled “My courses” to make it more clear
Incorporating a previous classes button
The Final Prototype
User Flow 1: Onboarding/Login
New users will be provided an onboarding experience that will guide them to understanding features of the iLearn app before launch.
User Flow 2: Home/Course Page
Through the Home page, the user is able to see their courses for the semester and also a navigation to see previous semester courses. Through selecting a course, the user is able to view the class information along with their course grade, assignment submissions, and participants.
User Flow 3: Calendar Page
The calendar feature will allow the user to view their daily tasks and assignments that are due. The user is also able to set an alarm to remind them of when class starts and when assignments are due.
The news feature is also available for the user to view current events at SFSU.
User Flow 4: Messages
The user is able to message students, professors, and even create group chats with other users. These 3 categories are separate to make it more clear for the user on who they are messaging.
Profile Page
The user is able to update their user details such as their email, phone number, and their information in the profile page. They can also change their profile picture and add a background of themselves for other users to see.
What we would do differently next time
Create multiple iterations for each page.
Creating mid-fidelity wireframes instead of paper prototypes for our usability test.
Created more mockups of the pages we created in order to showcase more throughout the case study.
Have more users go through the usability testing phase.
Key Takeaways
Good products take time and patience to create. It is very important to go back and improve on your ideas through given feedback and gained insight from others.
This case study began as a class project, but became a very big learning opportunity for me not only through design but through working with others as a team. It is very important to listen to each other and communicate in the most effective way we can in order to maximize the quality of the product.