4U Academics Web App
I designed the interface for a web app being developed by two students at Queen’s that allows students to meet with tutors for their university courses.
ROLE
Product Designer
TIMELINE
February - March 2021
TOOLS USED
Figma
Problem
Throughout the pandemic, many students struggled to adjust to online school and needed extra help from tutors to learn from the material. Being online it was harder to find other students who were willing to tutor them remotely - they had to reach out separately for each course they needed help in.
Solution
The 4U Academics app allows students to find and meet with virtual tutors for all their courses in one place. It is designed to be simple and easy to use to reduce the stress associated with finding help with school.
IDEATION
Project Timeline
01
Planning & design decisions
Define Problem
Set timeline
Identify product requirements
02
Research & ideation
Competitive analysis
Brainstorm
Identify target users
03
Design mockups
Send initial design ideas
Feedback session #1
Wireframes
Feedback session #2
04
Final Design
Build interactive prototype
Test with min. 5 users
Final changes
Review with team
IDEATION
Identifying target users
The two primary users of this application are the student and the tutor. While I considered both throughout the design process, I spent more time designing the student-facing version of the application for the developers.
Target user #1 - “Sam the student”
Sam is a first-year student at Queen’s struggling with online school and needs to find tutors for multiple classes. He is comfortable navigating the web but overwhelmed with the idea of finding tutors for his classes. He is under a lot of stress and doesn’t have time to spend looking for tutors.
Target user #2 - “Tina the tutor”
Tina is a fourth-year student at Queen’s looking to take on tutoring as a part-time job to earn some money. She doesn’t know how to go about finding students who might need help with their classes. She doesn’t have enough time to spend consistently looking for students to teach.
DESIGN DECISIONS
Key product requirements
The home page
I wanted to create a home page that summarized key information and actions in a simple way, so when users open the app they can quickly find what they’re looking for. Incorporating features like a calendar view help present this information to the user in a way that’s easy to understand.
Viewing lessons
Keeping track of different courses and their content can be overwhelming for students, so I created a page where that allows users to view their lessons with tutors in a manageable and intuitive way. I used tags to break down the courses by content, and displayed important info like the date, course, and name of tutor.
Virtual meetings
To make things as easy as possible for the user, we decided to incorporate virtual meetings into the app. For this design, I drew from familiar patterns and made key actions easily accessible. Users can toggle between a view that includes the menu and one that expands the video call to fullscreen.
Final Designs
(Excluding edge cases)
Interactive Prototype
Reflection
This was my first experience designing a web application from the ground up. There were many user flows and actions that I needed to consider while still keeping the design minimal and intuitive. I approached this challenge by putting myself in the shoes of the user and working with the team to implement their vision for the product.