Outsmart

Designing an online tutoring app from the first idea to the design language system

A selection of screens of the final design of the app

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.


My design process: The steps from beginning to end are Understand, Empathize, Ideate, Prototype, Test and Present. It's not a linear process, though, bu includes feedback loops.
My Design Process

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.


My primary persona Max is an active extrovert who has trouble sitting still in school. She needs tutoring that is fun and engaging.
My primary persona Max


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.

This map describes Max' journey to find a tutor she likes. The starting point is finding the app, she encounters problems like having to choose from a large number of tutors and being uncertain of the tutor will accept.
A user journey map for the primary persona Max
The user flow depicts all the screens and interactions Max has to go through when trying to fin a suitable tutor. It ends with the tutor sending a confirmation for Max' booking request.
User flow for the same task as the user journey map

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.


A site map showing the information architecture of the app
Site map


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.


Three prototypes are displayed next to each other, from a low fidelity sketch to a high fidelity wireframe. In the sketch, the search results were displayed in cards that could expand, but in the later versions, search results are displayed in a list, which is both more conventional and easier to scan.
Prototypes of Search Results screen
Three prototypes are displayed next to each other, from a low fidelity sketch to a high fidelity wireframe. In the sketch, the date and time picker were displayed on one screen, but divided into two screens later on to improve clarity.
Prototypes of Date and Time Picker Screen


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.


All participants were able to complete tasks 1 and 3 easily, but 4 participants had trouble with the second task. While tasks o1 and 3 had a 100% success rate, task 2 had only a 33,3% success rate.
Overview of the test results
4 out of 6 participants weren't bale to find the Whiteboard in the Tutoring Space. That's why I changed the navigation to a more conventional tabbed navigation and added labels to the icons. I also changed the icon for the Whiteboard.
The main issue in the second task
Because 3 out of 6 participants misunderstood the call mode icon to mean "start call", I changes it into an icon that represents a person in a screen, alluding to the video call.
Another big issue in the second task
4 out of 6 participants briefly got stuck in the signup form, because they either didn't know they could scroll, or the keyboard didn't disappear, impeding their view. That's why I added an interaction to the screen, that would make it scroll upwards automatically as participants filled out the form.
The biggest issue in the first task

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.

Two variations of the app home screen were compared to each other. Most participants preferred variant B, which had bigger section headers, smaller card headers and labelled buttons.
The most significant results of the preference tests

Peer Review

As I kept working on my designs, I sought feedback from my fellow designers in the form of a peer review.

4 out of 5 reviewers recommended adding onboarding before signup to let users know what the app is about before trying it out. That's why I added onboarding in the form of a slide show highlighting core features of the app.
Peer review result for onboarding
Reviewers found the rating section in the filter modal not very helpful and the wording of "teaching languages" confusing. That's why I split the filters into "Filter" and "Sort", adding "Sort by rating" to the "Sort" modal. I also changed the wording of "teaching languages" to "Langauge fluency". Also, I added another filter category to allow users to filter tutors by the school types they teach.
Peer review results for filters in search results

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

The typographic scale for the app and website and guidelines for use of typography.
The color palette for the project, consisting of teal as primary color, purple as secondary color, yellow as tertiary color and red as warning color.
All the icons used in this project are displayed here. I used the Feather icon set.
All components of the app, from navigation bars to text input fields.

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.


Responsive designs for search the result screen. While the design on tablet is similar to the mobile version, the desktop version features a navigation on the top of the screen rather than on the bottom.

Responsive designs for the video call screen. The tablet version is similar to mobile: tapping the tab bar icons brings you to a different screen. On desktop, tapping on chat or whiteboard will instead open a side drawer that slides over the video call screen from the left or right.


Polished Design


A selection of screens of the final design of the app

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.