Tutor Oriel
is a project redesigning a tutoring platform with streamlined onboarding, a refined brand identity, and an intuitive tutor-matching experience for students.
Tutoriel is a platform designed for high school and college students to connect with fun, friendly tutors who support their learning. Aiming to attract more student sign-ups, Tutoriel sought to improve the onboarding experience.
MY ROLE
In this project, I conducted research, including a heuristic evaluation, to identify key issues in the existing product. Based on these findings, I streamlined the sign-up and onboarding process, reinforced the brand identity, and optimized information placement to enhance the platform’s trustworthiness.
Tool Used
FigmaAfter Effects
Role
UX/UI DesignUser Testing
Prototyping
Timeline
Aug-Oct, 20236 weeks
The challenge
feel more engaging and less overwhelming for students?
Project
Background
Facing Challenges: Low Engagement and Tutor Retention
Tutor Oriel is a new tutor agency for high school and college aged students that specializes in finding fun and friendly tutors that help students learn.
They launched their online flow about a year ago and have very low completion rates. They have gotten a lot of complaints and bad social media reviews about how confusing the process is. The business is struggling and many tutors want to leave because they are not seeing enough clients.
Process
Problem Discovery
Client Needs
Heuristic Evaluation
Adjacent industry audit
Synthesis
Ideation
Sketch
Low-fi, Low-res
Mid-fi, Mid-res
Rebranding
Hi-fi, Hi-res
Final Designs
Landing Page
Signup Process
Tutor Page
User Dashboard
Design System
Reflection
Key Learnings
Areas for Improvement
1. Landing Page
The previous design of Tutor Oriel’s website lacked professionalism and failed to build trust due to its clumsy layout and lack of information. While the platform promotes fun and friendly tutors, the website felt dull and uninspiring.
To address this, I redesigned the landing page to create a more positive first impression. I balanced a fun and approachable feel with a professional tone. By incorporating vibrant graphics and real photos of tutors, I highlighted the service’s friendly nature while also presenting key information clearly. I used numbers and student reviews to build credibility and enhance trust.
Previous landing page
2. Sign-up Process
The previous sign-up process included too many fields on a single screen and used a non-standard UI, causing cognitive overload for users. It was unclear which step they were on, making it easy for them to abandon the process. Additionally, questions for students and tutors were mixed, creating confusion, and there were too many unnecessary or burdensome questions.
To improve this, I simplified the process only for student by breaking it into multiple screens and adding a progress bar to show users their current step. I also allowed users to skip questions at any time. The UI was enhanced to reduce cognitive load, unnecessary questions were removed, and difficult ones were replaced with multiple-choice options using emojis to make it easier for students to respond.
Previous sign-up flow
3. Tutor Information
The previous website did not provide enough detailed information about tutors, which undermined students' trust and failed to motivate tutors.
The improved website now offers detailed profiles for each tutor, including student reviews. This allows students to choose a tutor that best suits their needs more easily, while also motivating tutors by showcasing their efforts and encouraging them to perform even better.
Client Needs
TARGET USER
Tutor Oriel is a new tutor agency for
high school and college aged students
BRAND MISSION
A place where students can find friendly and engaging tutors to help them with their studies.
Identified Issues by client
- Low sign-up completion rates
- Complaints and bad social media reviews about confusing processs
- Leaving tutors
Heuristic Analysis
To identify issues with the interface, a heuristic analysis was conducted, revealing the following problems
Heuristic Analysis︎︎︎
Adjacent
Industry Audit
An Adjacent Industry Audit was conducted to gather ideas.
- Figma: Effectively incorporates the fun & friendly aspect the client desires in its design.
- Awwwards: Exemplifies professionalism in design.
- Airbnb: Used as a reference for the booking process.
- Others: Reviewed elements such as account creation, forms, form fields, buttons, payment, selection, confirmation, and scheduling.
Synthesis
Findings from research
![]()
The sign-up screen causes cognitive overload![]()
Missing essential information or too much irrelevant information![]()
Unclear target user (student, tutor, or parent?)
![]()
Lack of brand identity![]()
Overall lack of trustworthiness
The sign-up screen causes cognitive overload
Missing essential information or too much irrelevant information
Unclear target user (student, tutor, or parent?)
Lack of brand identity
Overall lack of trustworthiness
Goals
-
![]()
Simplify the sign-up process and provide a more intuitive and consistent process
to reduce cognitive load and make it user-friendly
-
![]()
Balance the information provided
by eliminating unnecessary content and ensuring that essential information is easily accessible
-
![]()
Define and prioritize the target users
(students, tutors, or parents) for more focused communication
-
![]()
Establish a clear brand identity
that reflects the platform’s values and purpose
-
![]()
Enhance trustworthiness
through consistent design, user testimonials, and clear messaging
Simplify the sign-up process and provide a more intuitive and consistent process
Balance the information provided
Define and prioritize the target users
Establish a clear brand identity
Enhance trustworthiness
previous Flow
Sketch
I explored two directions through sketches.
Flow A divides the existing onboarding survey process into three steps and changes the order, while Flow B maintains the existing process but improves the screen layout and UI. In quick user testing with three participants, everyone preferred Flow A.
Findings
- Users wanted to browse the service and tutors before puchasing credits.
- Feedack was split evenly between users who found the multi-step onboarding survey boring and those who didn’t
Low-fi, Low-res
At the low-fi stage I further developed the layout based on Flow A selected during the sketch phase.
Option 1 gathers as much information as possible through a multi-step survey to recommend the most suitable tutor for the user.
Option 2 allows users to skip certain forms and directly explore and find their desired tutor.
I conducted a quick user test with three participants and synthesized the results.
Findings
- Preferences were evenly split between users who wanted to explore tutors and those who preferred tutor recommendations.
- Users were satisfied with being able to track their progress during the sign-up process.
- Users requested a more detailed prototype with additional information.
Mid-fi, Mid-res
In the mid-fi version, I focused on expressing the UI in more detail, using icons to reduce cognitive load, and exploring various screen layouts. The goal was to provide as much specific information as possible to increase user trust.
Ver 1 gathers as much information as possible through an onboarding survey and recommends tutors accordingly.
Ver 2 minimizes the onboarding survey, allowing users to explore tutors on their own.
In one-hour user tests with three participants, all users preferred Ver 1.
Synthesis
Findings
- The clear and intuitive UI made the onboarding survey engaging, and some users mentioned they better understood the service through the process
- Most users hesitated on Ver 2’s tutor exploration page, unsure of what to do
- Even intuitive buttons using emojis can create cognitive overload if too many are displayed
- Providing detailed information made users feel more confident in the service
- Users commented that the service name was fun and appealing
Rebranding
The Tutor Oriel brand was redefined to align with client needs, goals, and target users, focusing on becoming a Fun and Friendly Tutoring Agency for high school and college students.
A vibrant color palette was created to reflect the new brand identity.
The monospaced font Söhne Mono, used in the logo, highlights the professional and technical aspects of the tutoring service. The primary font, Poppins, features rounded and soft edges, providing a friendly and approachable feel while maintaining a professional and balanced geometric form. Inter was used as the secondary font, focusing on legibility on digital devices.
Geometric shapes were also employed in the graphic elements to create a fun yet balanced aesthetic.
Hi-fi, Hi-res
The visual and functional aspects were enhanced. One-hour user tests were conducted with three participants.
Synthesis
Findings
- Some onboarding survey questions were confusing: questions about the school’s zip code and gender
- Users mentioned that emojis helped them answer more intuitively
- Users wanted more information about the services on the landing page
- Vertical scrolling was preferred by users when browsing tutors
- Users wanted to understand the meaning of each emoji on a survey screen
- Some users found the background graphics distracting
Key Learnings
-
Quick Transitions and Intuitive UI for Onboarding Survey
Splitting the onboarding survey into smaller steps may require more user time, but the fast transitions and intuitive UI make the process smoother and less overwhelming
-
The Value of Heuristic Analysis
Many usability problems were identified through heuristic evaluation
Next Steps
-
Improve survey questions and UI design to better understand students
-
Refine the icons and illustrations to reflect the brand's identity more closely