My role
UI Design
Team
Languify:
Springboard:
CEO & Founder,
engineering team
3 UX/UI designers
Tools
Figma
Slack
Google Meet
Duration
1 month
The process
We started our work by diving into documentation that the client provided us with, which included competitive analysis research, a business model, user flows, sketches, and a style guide.
We had several meetings with the Languify team where we learned more about the company, gathered business requirements, and walked through user flows and sketches.
What we learned about Languify:
Problem
Students across India struggle with poor communication skills, which negatively impacts their careers. As there is a high demand for mock interviews and oral communication assessments, but a limited number of interviewers are available, it is challenging for students and teachers to interact one-on-one.
Solution
Languify provides interactive AI based solutions to business by automating their human-led workflow. It's estimated to help startups to save up to 10,000 INR per student.
Languify hosts interviews and questionnaire sessions and completes them with AI-led feedback and improvement assessments.
Panda flow
Languify offers 6 steps personalized process that they called Panda flow, which includes:
Learn
Write
Practice
Mock
Review
Improve
Students would watch video-based learning material
Students would have to compose their own answers to interview questions
Students would practice their answers in karaoke format and Languify would record response
Students would take a mock interview simulation with pre-set and custom questions based on job roles and company
Students, mentors, and business management would receive real-time performance analytics
Students would get personalized games and learning resources for every improvement area in their communication or content
User flow
On the call with the client, as we were provided with user flow drawings, we understood that the product has 4 sides:
Person in charge of startups/colleges who keeps track of students' mock performance and manages custom interviews
Student
Staff of startups/colleges that use the product to improve their communication and interview skills
Business Management
Mentor
Person in charge of startups/colleges who keeps track of students' mock performance and manages custom interviews
Languify Admin
Admin of Languify who keeps track of client's credentials and user data
Collaboration
After gathering all the necessary information and getting an assignment to create Low-fi and High-fi mockups of the entire Panda Flow, our design team had an internal meeting where we discussed our ideas and divided work equally.
We worked on our own parts while staying in constant communication. We had video calls every 3 days to stay updated on our progress and get feedback from each other. We worked together in Figma to create clean and consistent designs.
I was responsible for creating the following screens:
Our design principles
Usability
Clear hierarchy
Accessibility
User in control
Low-fidelity wireframes
Low-fidelity designs were the first deliverable that we presented to the client. We aimed to follow provided sketches but also added a couple of other options for some of the screens.
Learn
While I was creating my screens, I noticed that essential navigation is missing on the sketches. I suggested adding a menu and profile settings on the top of the page, so users can freely navigate throughout the website. In a discussion with our design team, we agreed to include two options: with and without a menu to present later to the client. The option with menu and profile settings was later accepted by the client.
Also, I added an option to forward/rewind video for 10 seconds as from my research it seemed to be a very useful feature.
Write
I created two options for this screen: tips on the right side and tips below the text field. The first option saved up space on the screen and users doesn't have to scroll the page down every time they need to see tips for better writing.
Mock interview
Discussing this part of the project with our design team, we realized that we have different perspectives. In order to develop multiple options, I iterated on initial designs created by another UX Designer, which were subsequently approved by the client.
Review
Based on provided sketches, I created these screens.
Improve
High-fidelity wireframes
Several meetings were held with Languify, followed by internal meetings to reach a consensus and consistency on UI elements, and high-fidelity designs were eventually submitted for Languify's interview preparation product.
Main changes after meetings
Sign up/ Log in
Admin and Mentor log-in 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 log-in pages without redirecting to another page.
As a result, I added a title for the Admin/Mentor log-in to keep the same look for all participants.
Review
One of the project's goals is to increase repeat usage of its Mock part, that's why I decided to add a button "Practice again" on the top of the screen to make it easier for users to start practice session again. If users feel confident enough to try the Mock interview after the first shot, this button will save them from scrolling down through all questions and they can just click on the button on the top.
Additionally, I included buttons "Practice again" or "Improve" at the bottom of the screen in case users want to review all questions and pre-filled answers, and from there navigate to the next page without scrolling the screen.
Profile
In order to motivate and remind students why they should continue learning and practicing, I suggested adding a "Goal" field on the Profile page, and Langify liked this idea.
In addition, we added an option for users to deactivate their accounts at any time, so they don't feel any pressure and have a feeling of safety.
Final designs
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.
