Languify
An AI-based platform for improving English communication
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
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.
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
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
The crossword puzzle is very different from the real world puzzle.
#4 Consistency and Standards
Inconsistent warning signs and buttons.
#3 User Control and freedom
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
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.
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
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
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.
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
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
The crossword puzzle is very different from the real world puzzle.
#4 Consistency and Standards
Inconsistent warning signs and buttons.
#3 User Control and freedom
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
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.
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.
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.
CURRENT COURSE
PROPOSED COURSE
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
On the current game page, the graphics are inconsistent, irrelevant, and squished. They also lack clear CTA buttons.
PROPOSED GAME
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
The current version of Languify has a veteran mode where users can practice with mentors.
PROPOSED MENTOR CALL
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.
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.
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.
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.
Mid Fidelity Prototype
Below is mid-fidelity prototype video and in FIGMA.
Prototype FIGMA
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
-
The analysis page made more comprehensible for users
-
On mentor call page add more info about how to join the queue
-
Redesign learn page to understand more connections between data
-
Add more ways to refer a friend
-
Redesign button on the recording page
-
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
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
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
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
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
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
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
UPDATED SOLO PRACTICE
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
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
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.
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.
MORE PROJECTS
