top of page

Languify

An AI-based platform for improving English communication

mainscreen.jpg

Constraints

I helped Languify by redesigning the current version before the next version release.

Only Desktop version because of six weeks project

Duration

6 weeks

Team

Around six months ago, Languify released the Beta version to the first hundred users. In this project, I worked on ideating the pain points of current users by conducting my own research and verified and iterated the high fidelity prototype designed for Languify's next release.

Languify: CEO, Founder, CTO

Springboard: 3 UX/ UI designers

My Role

Heuristic and Competitive Research, User Flows, Profile page, Learn section,  Mentors calls section, Usability testing, Prototyping, and Design QA

Tools

LOGOS.gif
mainscreen2.jpg

Languify

A PROJECT TO REVAMP THE CURRENT AI BASED LEARNING PLATFORM FOR BETTER USABILITY

BACKGROUND

At Languify, users can practice English reading, writing, listening, and speaking.

The system provides them with detailed feedback after each practice session.

The users who used the Beta version felt the system is inefficient in different ways and cannot give them the desired learning experience.

 

Users faced difficulty navigating to different sections, comprehending quantitative data on the performance analysis page, and finding the resources like next steps and recording options on the website. 

stress.jpg

SUCCESS GOAL

To improve the ability of users to complete a practice session and interpret the results from it

Efficiency

To have a smooth experience in practice session with mentors

Experience

To update the contents and elements on website to be more consistent and intuitive

Consistency

To provide a better layout to display learning and practice options for users

Usability

RESEARCH

Heuristic Evaluation

The current Beta version of Languify was audited in terms of ten heuristic principles of Neilson. Below is the summary

#2 Match Between System and the real world

upload button.png
recording.png

I noticed that on the current web product, there are many buttons and icons which do not match with the real world examples like for recording they have blue buttons rather than red standard buttons.

#6 Recognition rather than recall

icons.png
Screen Shot 2021-05-27 at 4.16.19 PM.png

The crossword puzzle is very different from the real world puzzle.

#4 Consistency and Standards

warningblack.png
warningwhite.png
practice learn.png
practice learn 1.png

Inconsistent warning signs and buttons.

#3 User Control and freedom

pasta.png
login.png
userfreedom3.png

The current app needs to add more user freedom and flexibility.

Users can not see the report after seeing it once right after recording the section.

There is no way to retrieve forgotten password.

Users can not quit the games

#10 Help and Documentation

analysis.png

There is no help, information, or documentation to use the different aspects of the sites.

The report is too technical and difficult to understand and there are no supporting documents to interpret it.

Competitive Research

I evaluated the existing language teaching web apps to understand their strengths and weaknesses. I chose DUOLINGO, MEMERISE, and BUSUU for my research.

COMPETITIVE RESEACH.gif

Insights from Beta Users

15% of users mentioned that it would be great if they can have access to their recorded speech after the recording ends.

10% of users found it difficult to use the product as the manual steps are not in the vicinity during their usage.

50% of the participants felt that the voice recognition is not recognizing their speech or accent properly.

12% of users expressed their confusion on the pause/stop button for the recording as the recording gets stopped automatically if it does not recognize any voice or if someone stammers. 

Findings from all above three researches

I evaluated the existing language teaching web apps to understand their strengths and weaknesses. I chose DUOLINGO, MEMERISE, and BUSUU for my research.

Ease of login

Users are not keeping up with Languify as a way to practice their English regularly.

Takeaway

Have a better Login flow and option to stay logged in.

Ease of login

Users are not keeping up with Languify as a way to practice their English regularly.

Takeaway

Have a better Login flow and option to stay logged in.

IDEATION

Information Architecture

After reviewing the current IA, I figured out that some changes are needed to incorporate better flows and seamless navigation on the website. All practice modes are on the top navigation bar on the current website, and games are connected by a toggle button under solo mode only. The 'Course' option in the top menu and learn as a toggle button creates some confusion.

CURRENT SITEMAP

Current sitemap

PROPOSED SITEMAP

Proposed Sitemap

I investigated the pain points in the current flow and made a new sitemap. I separated practice modes, Learning modes, and mentor calls into different categories. Added a profile page and a dashboard for more usability.

User Flow

After updating the Information architecture, I focused on designing user flows to verify the steps users need to complete a task.

The most critical red routes for the current focus are conducting a practice session, learning from watching a video, and making an appointment with a mentor.

As a finding from the research, practice sessions can lead the users to the learn section, and similarly, after learning, users can practice what they have learned.

PRACTICE AND LEARN

User flow

MENTOR CALL

I also designed a flow for mentor calls. I added new functionalities like join the queue for the mentor session or schedule an appointment with mentors.

User flow

RESEARCH

I started the project to understand the current users' feedback provided by Languify. I also conducted my own heuristic evaluation of the current site and competitive research to compare the current product with competitors.

Heuristic Evaluation

The current Beta version of Languify was audited in terms of ten heuristic principles of Nielson.

#2 Match Between System and the real world

upload button.png
recording.png

I noticed that on the current web product, there are many buttons and icons which do not match with the real world examples like for recording they have blue buttons rather than red standard buttons.

#6 Recognition rather than recall

icons.png
Screen Shot 2021-05-27 at 4.16.19 PM.png

The crossword puzzle is very different from the real world puzzle.

#4 Consistency and Standards

warningblack.png
warningwhite.png
practice learn.png
practice learn 1.png

Inconsistent warning signs and buttons.

#3 User Control and freedom

pasta.png
login.png
userfreedom3.png

The current app needs to add more user freedom and flexibility.

Users cannot see the report after seeing it once right after recording the section.

There is no way to retrieve forgotten password.

Users cannot quit the games.

#10 Help and Documentation

analysis.png

There is no help, information, or documentation to use the different aspects of the sites.

The report is too technical and difficult to understand and there are no supporting documents to interpret it.

Competitive Research

I evaluated the existing language teaching web apps to understand their strengths and weaknesses. I chose DUOLINGO, MEMERISE, and BUSUU for my research.

COMPETITIVE RESEACH copy.gif

Insights from Beta Users

15% of users mentioned that it would be great to have access to their recorded speech after the recording ends.

10% of users found it difficult to use the product as the next steps are not defined in the session.

50% of the participants felt that voice recognition is not recognizing their speech or accent properly.

12% of users expressed their confusion on the pause/stop button for the recording as the recording gets stopped automatically if it does not recognize any voice or if someone stammers. 

80% of participants felt that the report is too technical to understand, and some others felt that it would be helpful to mention the definition of each parameter.

Findings from all three types of Research

EASE OF LOGIN

Users are not keeping up with Languify as a way to practice their English regularly.

Takeaway

Have a better Login flow and option to stay logged in.

DIGESTIBLE DATA

Several users had difficulty in interpreting the technical report/analysis page and the specific directions for the next steps to practice on the lacking skills.

Takeaway

Redesign the analysis page to give users a better understanding of the reports.

TRUSTBUSTER

Pages have dead-ends or broken experiences that did not instill trust in the product.

Inconsistent navigation, components, elements, and screens can corrode the trust of users.

Takeaway

Incorporate consistent UI elements and work on user flow.

VISUAL INSTRUCTIONS

Next steps and expected course routes for users. Clear instruction on what are the options and next steps.

Takeaway

Reduce cognitive load by having intuitive next steps and buttons to have a seamless flow.

SIMPLE LANGUAGE

A lot of the text throughout the product has grammatical errors and some spelling errors. The language used in certain areas, such as instructions isn’t clear and doesn't use simple language

Takeaway

QA the website for grammatical errors and add simplified instructions.

USER ENGAGEMENT

User engagement can be improved by setting a goal in the beginning of learning and reminders to stay on the track of course.

Takeaway

Add setting a goal and check your current level option.

PERSONALIZED LEVEL

Users can access the right level of complexity, and they can access the next level only after completing the previous one.

Takeaway

Add the right level as onboarding pages.

GAMIFICATION

Most of the apps have a way to collect points and redeem rewards by using them. There is also a leader board to indicate where the user stands in the tally.  Some apps have puzzles, matching games, and stories to improve vocab.

Takeaway

Add a leader board and a points system.

HELP DOCUMENTS

The current version lacks a help or support page.

Takeaway

Add FAQ and details contact us pages.

Research
Research finding
Sitemap

DESIGN

Mid Fidelity Screeens

I started designing mid-fidelity screens based on the findings from research and user flows.

PROPOSED LEARN - NEW PAGES

The current version of Languify has access to courses and games from different pages. I consolidated them and added a new page with details like current and active courses, progress, and performances in the games.

learn home proto.png

CURRENT COURSE

course.png

PROPOSED COURSE

learn video course.png

In the current Languify version they have above page for courses. The problem here is they don't have adequate information on the videos and having three practice buttons on the top is very confusing for them.

New design shows which videos are completed and what is the duration of each video. I moved the menu to the right for a better user flow. The practice buttons pop out only when the video is completed to provide users an opportunity to practice the skills they have learned in the video.

CURRENT GAME

learn.png

On the current game page, the graphics are inconsistent, irrelevant, and squished. They also lack clear CTA buttons.

PROPOSED GAME

gameshome.png

I designed the page by adding game tiles to focus on the title and CTA of the game. Also made new consistent graphics to capture users' attention.

CURRENT MENTOR CALL

veteran mode.png

The current version of Languify has a veteran mode where users can practice with mentors.

PROPOSED MENTOR CALL

mentorhome.png

I figured out that when users reach the veteran mode page the flow and next steps are unclear. Is there a veteran available or is there some waiting time? Is there a way to join the queue or if the waiting time is too long can the users take an appointment? To solve the above problems I redesigned the page so users can see all the mentors' availability and options to connect with them.

PROPOSED NEW PAGE - SCHEDULE AN APPOINTMENT WITH MENTOR 

Users can schedule an appointment with a mentor on the below page.

mentorcall confirmation.png
mentor last.png

PROPOSED NEW PAGE - JOIN QUEUE TO CONNECT WITH MENTOR

Users have an option to join the queue and start a call when waiting is over.

mentorhome.png
joinqueue mentor.png

PROPOSED NEW PAGE - SESSION WITH A MENTOR 

When waiting in the queue is over, or users want to attend a scheduled appointment, they can connect with the mentor at the below screen.

mentorcall feedback.png
mentor call screens.png

PROPOSED NEW PAGES - PROFILE PAGE

The current version does not have a profile page; I designed the below profile page to provide a place where users can add and edit their personal information. They can see the current subscription plan, credit balance, and invite people to join Languify.

myprofile home.png

Mid Fidelity Prototype

Below is mid-fidelity prototype video and in FIGMA.

Prototype FIGMA

Mid fidelity
Mid fid prototype

VALIDATE

I ran the usability tests to find out if there are any critical to minor issues in the current version of the designs.  Five users were assigned to complete various tasks on a zoom call.  The users selected were potential users of Languify. It was a one-hour call with a focus on users’ interactions and feedback.

Key Takeaway

There are no critical issues with the current website. All the users performed all the tasks assigned to them seamlessly. There can be some modifications needed to make the website more user-friendly.

NEXT STEPS

  1. The analysis page made more comprehensible for users

  2. On mentor call page add more info about how to join the queue

  3. Redesign learn page to understand more connections between data

  4. Add more ways to refer a friend

  5. Redesign button on the recording page

  6. Make notifications standout more for users to flow

Summary and Iteration

#1

ISSUE

Users could not relate the data and performance graphs with game played.

SUMMARY
RECOMMENDATIONS

The graph should have a connection to completed games

The practice button should be clickable after video is ended

Seeing more information about games and course will be helpful

Change color of practice button, add some text next to it

Add games and courses on the main page

Modify progress report in more comprehensive way

Add new page to describe course information

PREVIOUS LEARN

UPDATED LEARN

learn home proto.png
learnhome.png

I find out in the usability testing that Learn homepage can be enhanced to not only solve the problem of having all learning ways on the same page but also can provide access to all the courses and games from here. Users had problems connecting the improved graphs with game progress. To solve this issue, I made individual cards for each game depicting the details of the game and individual progress in it.

NEW COURSE PAGE

course home.png

​I also designed new course pages where users can find out details about course descriptions and instructors.  They can see total course time, skill level, and skill development. The detailed syllabus, run time, and completed videos will be displayed on this page.

#2

ISSUE

Users need confirmation of action completed and some users did not notice the wait time at the queue.

SUMMARY
RECOMMENDATIONS

Red in 2 of the buttons come off as too strong

Joining the queue is confusing 

Users wants to be notified when added to a call

Change button colors.

Iterate on the queue to make the process clear and smooth.

Add an add to cal button or info

PREVIOUS MENTOR 

UPDATED MENTOR

mentorhome.png
mentor home.png

In the testing, I observed that participants did not notice the join the queue button or understood the position and waiting time for the queue. Most of the users clicked the schedule appointment button first. I moved the position and wait in the queue information closer to the ‘Join Queue’ button. Also, changed ‘Available now’ to ‘Online’ to emphasize the green dot on the mentors' pictures. Lastly, I made all images circular to be consistent with other pages.

PREVIOUS SCHEDULE APPOINTMENT

UPDATED SCHEDULE APPOINTMENT

mentor last.png
Mentor appointment.png

In the Usability testing, users were able to schedule a call very smoothly so the flow is pretty good. However, I changed some color and layout to make it consistent with the rest of the pages.

PREVIOUS JOIN QUEUE

UPDATED JOIN QUEUE

joinqueue mentor.png
mentor reservation confirm.png

When a user joins the queue for a mentor call, the confirmation popup window will remain open until the waiting is over. Once the position in the queue is 0 they will be asked to connect with the mentor by clicking the button on the window. Users can go and visit other pages while they are waiting for their turn to connect with the mentor.

#3

ISSUE

Buttons on profile page is not clear

SUMMARY
RECOMMENDATIONS

User had problem in intercepting the purpose of dfifferent buttons on profile page

Add description of each task next to the buttons

PREVIOUS PROFILE

UPDATED PROFILE

myprofile home.png
profile.png

During the testing, I noticed that having only a button to complete different tasks is confusing for users. I added a little description of each heading in the updated version.

#4

ISSUE

User had problem in stopping the recording after starting it

SUMMARY
RECOMMENDATIONS

Recording button is not intuitive and it's not clear that it should be pressed again to stop recording

Make the buttons more clear. Possibly add a label, tool tip, or include it in the instructions.

CURRENT & PROPOSED SOLO PRACTICE 

Solomode.png
solohome.png

UPDATED SOLO PRACTICE 

Solo practice.png

Icons in the current Languify page are very confusing and submit and previous buttons are too far away on the screens.

The above-designed page has better visual icons, instructions, and buttons to complete the task.

#5

ISSUE

Some users felt overwhelmed with too much quantitative data on the analysis page.

SUMMARY
RECOMMENDATIONS

Users felt they needed a more descriptive header.

There are too many parameters

1-9 ranking is confusing and needs more explanation or to be shown differently.

The percentage does not interpret to meaningful data

Fix the headers to be more clear.

Make sure the information is clear and easily accessible while still displaying all of the information

Instead of numbers using a graphic to better show the ranking.

CURRENT & PROPOSED ANALYSIS 

UPDATED ANALYSIS

analysis.png
analysiscollapsed.png
analysis collapsed.png

The current version does not show the categorized information. It is difficult for users to interpret their true performance, next steps, and comparison from previous or peer performances.

Languify provided us with the AI parameters and had a five point system to show the comprehensive analysis report after a practice session. The report is more informative, understandable, and user friendly.

#6

ISSUE

The user had problem interpreting the data and relevance of information displayed on the dashboard  page

SUMMARY
RECOMMENDATIONS

Some users wondered what 86% means and how it is related to other data?

Some could not locate refer to friend icon in first sight

Make the graphs clearer, possibly add tooltip that can tell users what the graphs are showing. 

 

Add more description about the text "123 minutes remaining" (of what?)

CURRENT LANDING

UPDATED LANDING

landing page.png
dashboard menu.png
dashboard.png

There is no information about overall progress,  new courses, or next steps and options.

In this version, users can see all relevant information like progress, completed courses, active courses, overall performance, refer a friend, and subscription details.

Testing and Iteration

HIGH FIDELITY PROTOTYPE

CONCLUSION

While working at Languify, I experienced that working in a team is a great experience. It was helpful to have feedback from other designers and explore new methods to do the tasks. We had a central design system to have consistent pages. We did a design critic workshop on the final product to get the benefit of everyone's experience.

 

I also realized that keeping Languify involved in each stage of the project helped regularly address their needs. We have five weeks time constraint, so we wanted to focus on higher priority deliverables like high-fidelity prototypes for Languify's web version.

 

After conducting the usability testing, I firmly believe that the latest updated version of Languify will provide a much better English learning experience to users and business growth for Languify.

High fid prototype

MORE PROJECTS

bingrportfoliolatest.jpg
portfoliosavr.jpg
artdeckportfoliolatest.jpg
bottom of page