The easiest way to find the best tutors.
(pronounced “tutorial”)
An app allowing parents / carers to search for and book tutors and for tutors to advertise their services.
The Project
June 2024 - August 2024
Design an app that enables parents to search for and book time with tutors.
"
"
Problem
Parents are unable to find local tutors with the skills, availability and qualifications to tutor their children. Tutors are unable to advertise their services and grow a client-base of tutees.
Goal
To facilitate:
- The searching, vetting and booking of reputable, reliable tutors.
- The advertising of tutor services and availability.
My Role
UX Researcher, UX Designer. I completed the project myself following the "Design Thinking" framework: Empathizing - Defining - Ideating - Prototyping - Testing.
Tasks
User research, ideation, wireframing, site mapping, prototyping, testing, iterating on feedback.
Understanding the user
-
User research
-
Pain points
-
Personas
-
Journey mapping
User research
The initial stage of user research featured interviews specifically aimed at parents / carers who were interested in additional education for their children.
​
The interviews allowed me to highlight the pain points and common concerns of the participants. 3 main issues were identified: price, tutor ability / character and scheduling flexibility.
​
I also conceptualized my target user base by creating personas and a user journey map which helped me better focus on the needs of the user, the issues they want addressed and reduce the risk of designer bias.
Pain points
Price
Tutors are often expensive and not affordable for users.
Tutor ability and character
It is hard to know the ability and nature of a tutor before booking them. There is concern about quality and reliability.
Flexibility
Parents / carers have a wide range of schedules, domestic situations and routines. Tutoring will need to accommodate the need for flexibility.
User personas
I first made a persona for the parent / carer user base. This was useful in highlighting the needs and frustrations that they may encounter and helped me start exploring opportunities to aid and address these issues.
I also created a persona for the tutor user base that would also use this product which helped me focus on what information tutor profiles should show and better understand what information parents / carers would expect to see.
User journey map
Creating a user journey map helped me to visualize the stages a user would go through in searching for, downloading and using the app. This map relates to Lindsay, the parent / carer's journey.
Determine her children could do with additional education.
Find a tutor booking app.
Create account.
Search and compare tutors.
Confirm date, time, location and book tutor.
(After first session) Book recurring appointment with tutor.
+
-
Starting the design
-
Paper wireframes
-
Digital wireframes
-
Lo-fi prototypes
-
Usability studies
Paper wireframes
I started to sketch different versions of the app home screen. I explored different focuses like booking, calendar and browsing tutors.
I also sketched designs that had multiple focuses at the same time but these seemed somewhat convoluted.
As flexibility was highlighted as a major pain point during research, I decided to have the home screen's focus be a calendar whereby users can view sessions, book and search based on dates and easily manage scheduling.
Large portion of the home screen dedicated to the calendar.
Parents / carers can easily highlight a day and either schedule a tutor or view their existing appointments.
Equally the home screen's navigation icon would be larger and imbedded into the bottom navigation bar to increase visual weight and emphasize the page’s importance.
Final home screen paper wireframe
Lo-fi app wireframes
I used Figma to create my initial digital wireframes based on my paper sketches. I was already confident in the layout of the “My Calendar” home screen. It looks simple, easy to use and reflects the user’s need for easy scheduling.
At this stage, I already decided on green being the emphasis colour as it associates with good grades and positivity and reinforces the apps focus on quality tutoring.
A large amount of space will be given to the calendar through which booking tutors is possible.
Information relating to the selected day will be displayed below. This can be regarding scheduled tutors or the ability to book for that day.
Calendar navigation icon will be emphasized.
My calendar (homepage) - lo-fi wireframe
The second page I designed on Figma was the “Find Tutors” page. This features a wide search criteria to help users find tutors that match their requirements accurately.
Price is the first search category to address the importance of affordability highlighted in user research.
Users can specify tutor qualifications to search for their required quality.
Find Tutors is the first navigation icon giving it hierarchical importance, second only to the center icon.
Find tutors - lo-fi wireframe
Lo-fi prototype
I created a prototype by connecting the relevant Figma screens to demonstrate the search and booking tutor user flow.
Find tutors - lo-fi prototype
The video below shows the find tutor user flow, starting from the homescreen.
Find tutors - lo-fi prototype
Usability study
I then conducted a usability study with a representative group of users to gain insights that would help me best iterate my hi-fi prototype. The results from the usability study highlighted 3 main points to improve for a better user experience.
Findings
Search Format
​There doesn’t need to be 3 separate styles of search questions. Users felt that sliders, dropdowns and checkboxes could be reduced to 2 styles to streamline the process.
Contact Tutor
​After confirming the booking, there should be an option to contact the tutor. This can facilitate sharing materials, discussing directions or explaining the child’s specific requirements.
Book for multiple children
​When booking the tutor session, there should be an option to add multiple children to the booking (this incurs a fixed increase rate on the tutor fee)
Refining the design
-
Design and branding
-
Mockups
-
Hi-fi prototypes
-
Accessibility
Design and branding
Colour pallete
I kept green as my main highlight colour, with lavender as complementary emphasis. The bulk of the app's screens are white to make the highlight colours pop and keep the design clean and uncluttered while jet was chosen for the majority of the text.
Light green
White
Jet
Lavender
Name and logo
App screen
Here, the example blank screen shows the combination of the colour pallete with green the focal point, lavender for the top and bottom navigation, jet for the text and white filling the blank space and inactive tabs.
I chose the name "TutorReal" early on in the project. It is a pun on "tutorial" made from the words "tutor" and "real", communicating the app's focus and reiterating that through the app, you can find real (or high quality).
The logo is simple and playful. The name is divided by 2 icons representing the tutor and the tutee, both of which have the app's emphasis colours.
Typography
I chose Itim for the app font as it's fun, light-hearted but highly readable. It not only reinforces the app's focus to be easy to use and approachable, but also relates to the tutoring, educational aesthetic owing to it's handwritten look.
Mockups
My first task was to finalise the homepage / calendar page. I wanted to design it to be as simple, user friendly and convenient as this page acts as the user’s hub.
Final design (hi-fi prototype)
I connected all of the hi-fi wireframes to create an interactive prototype. It follows the user flow of checking current sessions, searching for tutors, booking a tutor and having that booking be added to the calendar home screen.
Hi-fi prototype
Accessibility considerations
Accessibility was a concern addressed throughout the project. I designed the app to be as inclusive and applicable to as wide a user base as possible.
All colours used in the hi-fi prototype were tested using WebAIM and all pass the Web Content Accessibility Guidelines (WCAG) standards for readability.
Alt text on each page allows the app to be used with screen readers.
Headings and font size were varied to provide a visual hierarchy and clear user flow.
Going forward
-
Impact
-
What I learned
-
Next Steps
Impact
Users liked the new design of the app and found that navigation was quicker and more intuitive. They appreciated seeing how the calendar / homepage worked as a hub for managing bookings.
What I learned
I learned that considering both sides of an app's user base was beneficial in fleshing out a product’s features and utility. Creating personas for both parents / carers and tutors helped me address a wider range of needs and create a more user-friendly design.
Next steps
Further develop the app from a tutor-perspective. Design the flow for tutors to sign-up to the app and fill in their details to start advertising their services.
Conduct further usability studies with the hi-fi prototype to continue iterating on my design.
Identify other features that parents / carers or tutors consider a useful addition.
Thank you for taking the time to learn about the TutorReal app!
Click the link below to view my original slide deck.