Designing an online tutoring app from the first idea to the design language system
Objective and Overview
Outsmart was my course project for the Career Foundry UX Course and accompanied me on my journey of learning the basics of UX design. The idea behind Outsmart is to create an online tutoring app that enables students to find suitable tutors, have video lessons with them and practice what they learned with exercises and mini games.
Timeframe
November 2019 - August 2020
My Role
UX Designer, UI Designer, User Researcher
Teammates
None
Methods and Tools
Competitive Analysis, User Interview, Card Sorting, Prototyping and Wireframing, Usability Testing, Affinity Mapping, Style Guide, Design Language System
Adobe XD, Balsamiq, Sketch, Optimal Workshop, Usability Hub, Lookback, Screenflow
Process
Because I designed the app from scratch, I went through a thorough design process, drawing from Design Thinking and User-Centered Design. I started with the exploration of the problem space. I included the Double Diamond strategy in my process, in order to create a product that addresses real problems. Below you can see the visualization of the design process that I will go into in more detail in this case study.
1. Understanding the Problem
To understand the problems I would address with my design, I wrote up a problem statement and made a competitive analysis for 3 competitor apps. Based on that research, I created a number of user stories and job stories, that helped me think about what users would need and what they would want to accomplish with the app. With all this information I put together a business requirements document.
Problem Statement
“Children struggling at school need a way to find a suitable tutor to help them with studying and to interact with them through video chat because they want to improve their grades.”
Possible Problems
Parents do not know if teachers are qualified or if they can trust them with their child.
Children might not be able to handle the payment for their lessons themselves.
Pupils might forget what their tutor told them during the video chat session.
The process of scanning and uploading worksheets can be difficult and cumbersome.
Possible Solutions
Students and parents will be able to rate tutors, so others can know whether tutors are qualified and can be trusted.
The app will have linked parent and child accounts. The parent will be able to handle the payments.
All lessons are recorded automatically and students can review them later, also offline.
The app also allows tutors to create exercises for students and to review them.
Target Audience
Students ages 6 to 18 and their parents
From families with different economic status
With and without migration background
Project Scope
Native app for mobile and tablet
Responsive web app for desktop
Responsive website for all platforms
2. Empathizing with the User
Surveys
After defining my initial hypotheses, I wanted to learn what qualities parents and pupils were looking for in a tutor and what they expected from an online tutoring app. So I conducted an online survey.
Key Takeaways From the Survey:
Parents want to be able to get in touch with their child's tutors to stay up to date about their child's progress and address any issues.
Parents care most about a tutor's qualifications and reviews, because they want to know if they can trust them with their children.
So I decided to make it possible for parents to contact their child's tutors from their parent account. To ensure tutor's trustworthiness, parents and pupils are going to be able to write reviews for tutors. Also, a tutor's qualifications and reviews would be highlighted on their profile. I then used the survey results to inform my interview questions.
Interviews
I conducted in-person interviews with 2 students, 2 parents and one tutor. Here's what I wanted to learn from them:
How do students learn best?
What makes tutoring a success or failure?
What are their expectations toward online tutoring?
I recorded the interviews and then analyzed the data through affinity mapping.
Key Insights From Interviews
Offering playful exercises and games that tutors can customize for their students can help tutors get through to students that are afraid of school
Involve the parents in the tutoring process and keep them up to date about their child’s progress.
Record the online lessons and save them in the cloud so students can review them afterwards.
Enable students to set markers in the recording so they can find easily find the most important parts in the recording.
Include a chat feature so students can text their tutors and send them images. Parents have to be able to text their child’s tutors as well.
Theresa, 27, tutor:
“Play helps students get over fear and frustration they built up towards school.”
Barbara, 8, student:
“I love when my grandpa gives us riddles, and I can use what I learned in school to solve them.”
Elizabeth, 41, mother:
“Students should not feel like tutoring is just a continuation of school.”
Personas
I decided to focus on students as my most important user group for now. So I needed to understand their motivation for seeking tutoring, as well as the problems they had in school and with learning in general. Using the insights I gathered during research, I created two personas.
Through literature research, I discovered that children of different ages require vastly different interfaces because their cognitive and motor abilities are still developing. So I shifted my target users to students ages 9 and older.
3. Ideating a Possible Solution
User Journey Maps
Drawing from my personas, I created user journeys for the core features of my app. They helped me visualize the processes my users go through to accomplish their goals and all the big and small challenges and problems they encounter on their way.
From the journey maps, I created user flows for all core user tasks. With this method I could get an idea of the screens and interactions the app would have to contain.
App Feature List
Home screen:
Contains: Upcoming Lessons, Due Assignments and Your Tutors
Displays the most important things a student needs to know at a glance
Your Lessons:
Contains: Upcoming Lessons and Past Lessons
See your next appointments and watch lesson recordings
Tutoring Space:
Contains: Video call, Chat and Whiteboard
Talk to your tutor, send them files and write and draw on the shared whiteboard together with your tutor
Tutors:
Contains: Your Tutors, Recommended Tutors and the Tutor Search field
Find tutors you already booked lessons with, have new tutors recommended to you based on your searches or actively search the tutor database
Tutor Search:
Contains: Tutor Profiles and Filters
See search results at a glance in the list and filter your results to find the perfect tutor
Your Exercises:
Contains: Done Exercises and Due Exercises
Practice what you learned with exercises customized by your tutor and share your results with them
Messages:
Chat with tutors
Quickly get in touch with tutors to get to know them before your first lesson
Profile:
Connected Parent Account and other settings, help etc.
Your parent can manage your payments from their connected account and see your progress
In the next step, I mapped out the information architecture with a site map informed by card sorting.
4. Prototyping Possible Solutions
Wireframes and Prototypes
Having the structure and screens of my app down, I started fleshing out its interface step by step. Since I followed a mobile-first approach, my wireframes and prototypes were mostly in mobile format. This being the first application I designed, I heavily leaned on existing design patterns to inform my designs. I analyzed multiple apps and websites to find out for myself what was working and what wasn’t.
5. Testing the Design
Usability Tests
I used the interactive prototype I had created to put my design to the test and see how it would perform with actual people using it. To that end, I performed 6 in-person and remote usability tests, using Lookback and Screencast to record them.
I analyzed my recordings using affinity mapping to bring structure into my findings and to group related issues and quotes. I then organised the results of my analysis in a rainbow spreadsheet. By rating all errors by severity, I identified the main issues to address.
Preference Tests
After making changes to my prototype following the usability test results, I conducted a series of preference tests to get some quick feedback on my updated prototype. There were some screens where I was unsure which direction to go with the design, and the tests helped me sort that out. One issue I sought feedback on was creating a clear hierarchy on the home screen.
Peer Review
As I kept working on my designs, I sought feedback from my fellow designers in the form of a peer review.
6. Presenting the Results
As I went through multiple iterations of my project, I developed the visual design of the app, taking into consideration interface guidelines, accessibility and responsive design principles. To conform to the mobile-first principle of starting the design with the smallest screen size, I resized all my app screens to 320x568. Since this is the screen size of my own phone, I was able to quickly test my screens on an actual device.
In this process, I developed a style guide and design language system for the application and prepared all the assets for handoff.
Style Guide
Responsive Design
After the mobile version of the app was mostly designed, I adapted the design to other screen sizes, to prototype the tablet app and the responsive web app for desktop. First, I made a content audit to determine what would be on each screen and then created mockups for some key screens.
Polished Design
Conclusion
What went well
The research I did before starting the design really helped me define the features and interface of the app. Interviews, surveys, competitor analyses and other methods all informed my design decisions and the app took shape almost on its own.
Usability tests and other feedback helped me improve my project further with every new iteration and made me learn a lot.
Next steps
If I were to continue working on this project, I would put the application through another round of user testing to get feedback on all the changes I made and the new elements I added.
I would also want to design desktop and tablet prototypes and test them, too. I want to improve accessibility for all users and make changes to the app based on that goal.
It would be interesting to develop concepts for the parent version and the tutor version of the app, because they will need different features from the student version.
