f.png

Languify

It is a thriving startup that uses AI to improve English speaking skills to develop better professionals. 

 

Languify helps students, mentors & management by taking care of the entire interview-prep cycle:

"Learn - Write - Practice - Mock interview - Review - Improve".

Languify chrome extension uses Languify’s AI to prepare a person for meetings with customized tips and suggestions to communicate effectively.

My role 
UI design
Team

Languify: CEO & Founder, CTO, Founding Team Member ITK

Springboard: 3 UX/UI designers

Tools
Figma, Slack, Google Meet
Duration
1 month

Problem

There is a huge demand for mock interviews and oral communication assessments but only a handful of interviewers.

Solution

Languify’s API hosts interviews and questionnaire sessions and completes them with performance analysis and improvement nudges to get a dream job. This provides users with on-demand and unlimited practice sessions alongside improvement trackers.

Process

Our design team was provided with competitive analysis research, documents about the company, and a style guide. We started our work by diving into all documentation to get familiar with the project. 

 

Afterward, we had a video call with the Languify team, where we got to know each other, gather business requirements, and had a chance to ask all questions. Also, on the call, we walked through user flows and paper sketches. The Languify team assigned us the tasks of creating Low-fidelity and High-fidelity mockups. We had to create a simple design, where users can get everywhere with 1 to 2 clicks. 

 

After the initial call, we were ready to start working on low-fidelity wireframes. We divided user flows among our design team and each of us was working on our own part while keeping constant communication with others. 

My part was to do:

Sign up/

Log in 

Learn

Write

Review

Improve

Build an interview

Profile settings 

Student Dashboard

About us

Contact

us

FAQs

User flows

1/4

Sketches

To give us an overview of the user flow diagrams, the client provided us with sketches highlighting key stages.

sketches.png

Low-fidelity wireframes

Panda flow is the name of the learning process which includes "Learn-Write-Practice-Mock-Review-Improve"

Our design team agreed on providing several design options for some screens for the Languify team to choose from. 

Sign up
Sign up

press to zoom
Log in
Log in

press to zoom
Reset password
Reset password

press to zoom
Sign up
Sign up

press to zoom
1/3
Learn
Option #1
Option #1

With menu and profile on the top of the page

press to zoom
Option #2
Option #2

press to zoom
Option #1
Option #1

With menu and profile on the top of the page

press to zoom
1/2

While I was creating my screens, I decided to suggest adding menu and profile settings on the top of the page, so users can freely navigate throughout the website.

 

Also, I added an option to forward/ rewind video for 10 seconds because from my research it seemed to be a very useful feature.

Write

I was following a design on sketches provided but also created one more screen which saved up space on the screen, so users don't have to scroll the page down to see tips for better writing.

Option #1
Option #1

press to zoom
Option #2
Option #2

press to zoom
Option #1
Option #1

press to zoom
1/2
Practice

These screens were created by another UX/UI designer on our team

Option #1

press to zoom

press to zoom

press to zoom

press to zoom
1/12

Option #2

press to zoom

press to zoom

press to zoom

press to zoom
1/9
Mock interview

These screens were created by another UX/UI designer on our team

press to zoom

press to zoom

press to zoom

press to zoom
1/5

As a result of a conversation with our design team, we realized that we have different perspectives on this part of the project. In order to develop multiple options for this part, I modified these screens, which were subsequently approved by the client.

press to zoom

press to zoom

press to zoom

press to zoom
1/3
Review

Based on the sketches provided, I created these screens and our design team agreed to add a couple more options as well.

Option #1

press to zoom

press to zoom

press to zoom
1/2

Option #2

press to zoom

press to zoom

press to zoom
1/2
Improve

We decided to add some interactive elements here, so I designed three options with different designs. On this page, users can see what they need to improve and then pick a game to learn from.

Option #1

press to zoom

press to zoom

press to zoom
1/2

Option #2

press to zoom

press to zoom

press to zoom
1/2
Student dashboard

Option #1

New user
New user

press to zoom
Menu
Menu

press to zoom
Menu
Menu

press to zoom
New user
New user

press to zoom
1/4

Option #2

New user
New user

press to zoom
Menu
Menu

press to zoom
Menu
Menu

press to zoom
New user
New user

press to zoom
1/4
Student analytics
New user
New user

press to zoom
Existing user
Existing user

press to zoom
New user
New user

press to zoom
1/2

These screens were created by another UX/UI designer on our team

Build an interview | Profile | FAQs | Contact us | About us

We didn't get much information for the "Profile" and "Build an interview" pages, so we put basic information and decided to clarify this on our next call with the Languify team.

Build an interview
Build an interview

press to zoom
Profile
Profile

press to zoom
About us
About us

press to zoom
Build an interview
Build an interview

press to zoom
1/6
Admin Dashboard | Control Panel

These screens were created by another UX/UI designer on our team

Business dashboard
Business dashboard

press to zoom
Mentor dashboard
Mentor dashboard

press to zoom
Mentor Build an interview
Mentor Build an interview

press to zoom
Business dashboard
Business dashboard

press to zoom
1/7

We finished working on low-fidelity designs, and we set up a video call with the Languify team. On the call, we got valuable comments and suggestions on the wireframes that we provided. Also, we received an updated user flow and some additional sketches of the screens that were added. 

 

After the call, because of the updates made by the Languify team, our design team decided to divide the screens again, so everyone would have an equal part of the work to do. We started working on high-fidelity designs and used a provided style guide.

My new part was to do:

Sign up/

Log in 

Learn

Write

Review

Improve

Interview 

settings

Profile settings 

FAQs

When we finished the High-fidelity designs, we had a final video call with the Languify team to get their feedback and comments. After this, we iterated on our final designs and gave ownership of the Figma file to the client.

Updated sketches

Screen Shot 2022-03-12 at 8.58.28 AM.png
Screen Shot 2022-03-12 at 8.58.34 AM.png
Screen Shot 2022-04-03 at 12.28.17 PM.png

Style guide

Colour Pallete.png
Typography_web.png
Components.png

High-fidelity wireframes

Sign up
Sign up

press to zoom
Log in
Log in

press to zoom
Forgot password
Forgot password

press to zoom
Sign up
Sign up

press to zoom
1/4

Admin and Mentor log-ins will be recognized by the email address entered in the field. 

 

The client asked us to show the difference between the Student and Admin/Mentor login pages without redirecting to another page. 

 

As a result, I simply added a title for the Admin/Mentor log-in to keep the same look for all participants.

Learn

On Learn and Mock pages, we've been asked to add a vertical "volume" button.

After trying to implement this, our design team agreed that the horizontal volume button takes a better place on the screen. 

Volume on
Volume on

press to zoom
Mute
Mute

press to zoom
Change volume
Change volume

press to zoom
Volume on
Volume on

press to zoom
1/3
Write
Write.png
Practice

These screens were created by another UX/UI designer on our team

Video off

press to zoom

press to zoom

press to zoom

press to zoom
1/4

Video on

press to zoom

press to zoom

press to zoom

press to zoom
1/4
Mock interview

press to zoom

press to zoom
Video off
Video off

press to zoom

press to zoom
1/7

These screens were created by another UX/UI designer on our team

Review
Review.png

Because the Languify project's goal is to increase repeat usage of its Mock part, we decided to add a button "Practice again" at the top of the page. If the users feel confident enough to try the Mock interview after the first shot, this button will save users from scrolling down all the questions and just click on the button at the top. 

Additionally, if users need to review all the questions and pre-filled answers, they can scroll the page down. They can also practice again or navigate to improve the page.

Improve

The client asks us to add macro and micro levels of user feedback on some features. Therefore, we have added a "Rate us" section at the bottom of the "Improve" page.

press to zoom

press to zoom

press to zoom
1/2
Interview settings | Profile | FAQs

In order to motivate and remind students why they should continue learning and practicing, both Languify and our design teams agreed to add a "Goal" field. 

In addition, we added an option for users to deactivate their account, so they don't feel any pressure and can feel like they can cancel at any time.

To keep the design consistent, we have aimed to create similar soft shadows to those already on the Languify website.

Interview settings
Interview settings

press to zoom
Edit profile
Edit profile

press to zoom
FAQs expanded
FAQs expanded

press to zoom
Interview settings
Interview settings

press to zoom
1/5
Student Dashboard & Analytics
New user
New user

press to zoom
Existing user
Existing user

press to zoom
Student analytics for existing user
Student analytics for existing user

press to zoom
New user
New user

press to zoom
1/11

These screens were created by another UX/UI designer on our team

These screens were created by another UX/UI designer on our team

Dashboard and Analytics for Mentor & Business & Admin 
Mentor dashboard
Mentor dashboard

press to zoom
Mentor analytics
Mentor analytics

press to zoom
Finance for Languify Super Admin
Finance for Languify Super Admin

press to zoom
Mentor dashboard
Mentor dashboard

press to zoom
1/10
Control Panels | Drop Downs & Control Panel Functions
Business Control Panel
Business Control Panel

press to zoom
Languify Sub-Admin Control Panel
Languify Sub-Admin Control Panel

press to zoom

press to zoom
Business Control Panel
Business Control Panel

press to zoom
1/10

Project takeaways

  • “There are as many opinions as there are people: each has his own view”. Communication and collaboration are the keys. Working with other designers in a team for a short time frame required constant communication as well as a lot of humility and compromise. I loved having video calls with my team and brainstorming on designs together!

 

  • It is very important to have a file with components, so the entire team can create a consistent design. 

 

  • Explaining design decisions to engineers and non-designers, and presenting them in a way that everyone can understand why they are important is crucial.

See my other projects

iPhone 13 Pro.png

Parkegy

Fitness.png

Fitio

SAVR recipes

SAVR.png