Vocabie

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.

Defining Strategy

I worked with the client to define the users, goals and scope of the project. Although she 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.

Storyboards

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

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.

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.

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.

Smart
Trustworthy
Inviting
Clever
Delightful
Innovative
Ambitious
Professional
Stylescapes

I designed a few stylescapes before deciding on a teal and yellow color variation.

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.

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.

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.

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.

See more work

BRED

Helping a startup move from web to mobile and design their app from scratch.

View project

BioRender

Redesign of a web application that helps scientists create beautiful figures.

View project

Interested in working with me?

Tell me more about your project and I'll get back to you in 24 hours.

Contact me