Designing a teacher/student web app from scratch

Vocabie is a web app where Vietnamese people can connect with teachers to learn English. The client reached out to me with just a vision and a product spec document outlining the features needed. I led the whole design process from ideation to final mockups ready for development.

Final design

Defining Strategy

I worked with the client to define users, goals and scope of the project. Although she had already listed the features needed in the product spec document, I wanted to make sure that each feature was needed for a MVP. By doing this, we were able to cut down some unnecessary features for V1 and save time/money.

Personas

First, we created personas based on the 2 user types: teacher and student. We defined their goals, frustrations and how Vocabie could help them.

Teacher Persona

Student Persona

Storyboarding

Creating storyboards helped us imagine how a user would use the app. We made sure to include solutions to the goals of our personas.

Teacher Storyboard

Student Storyboard

Site Architecture

After finalizing the specs and features of the app, I moved on to creating a site map. This helps to ensure the navigation between screens makes sense and we don't miss any important features/screens.

Sitemap

Wireframes

Since this was a brand new product, it was important to start with wireframes to make sure the user experience was intuitive. By stripping away the fonts and colours, the client could really focus on the UX and if it made sense.

Wireframes

Branding & Design Style

In order to make Vocabie marketable, it was crucial that the company get an identity treatment that resonated with users. By looking back at the personas, we were able to brainstorm words that we wanted our users to use when describing Vocabie.

Words defined from branding workshop

I came up with 3 different variations that fit the brand. The client chose the 3rd variation.

Final Design

Simple sign up flow

When users sign up, they go through a flow that's easy to follow. By separating each question onto it's own screen, the sign up flow feels more like answering a few questions than a long form to fill out.

Sign up flow

Easily manage classes and schedule

Users can see all their upcoming classes on their dashboard. The calendar on the right shows an overview of their month. To see a more detailed view, users can head over to the classes page to see a full calendar.

Teacher Dashboard & Classes screen

Booking classes

Students can pick the teacher they want to learn from. Once they select a teacher, they will see all the details needed to book a class.

Teacher list, Teacher profile and Book class modal

Messaging

Users can message each other directly on the platform. This helps both teachers and students discuss class details, reschedule classes and easily communicate with each other.

Messages screen

What's Next

Vocabie is currently being developed and is scheduled to officially launch Summer 2020.