Languify

Providing educators and students AI generated assessment and feedback of English verbal skills.

Role: UI/UX Designer on 4-member design team. Team leader.

Determined project scope in collaboration with design team and client.
Improved usability of student-facing desktop experience through heuristic evaluation and usability testing.

Languify is seeking to improve user retention through improved usability design.

Languify is an SaaS platform that helps students nail core concepts and communication with personalized feedback. The company is relatively new and is currently located in India. Their mission is to help students land jobs by preparing them for job interviews. Languify plans on expanding their services to Europe.

A heuristic evaluation identified usability issues such as:
UI, cognitive overload, user-friendly terminology, and informational hierarchy.

Role: Collaborated with 4-member design team providing heuristic evaluation of student facing user flows.

Method

Screenshots were taken of the student user flow of the Languify app and placed into a Figma file.
The design team annotated their individual evaluations of each screen.
The Figma file was shared and discussed with the client.

Annotations

• Clean interface with good color balance; the left side of the screen feels more heavy with information and the text boxes for “your average” and “batch average” could probably be stretched out horizontally to make use of the negative space. • Unable to see but assuming that the work list automatically sorts by due date from earliest due to latest due? •Does unlimited mean unlimited attempts or no due date present? • Wording of “My Work List” could be changed to My Assignments”, which sounds clearer to me. • The My Work List section could have a more apparent call to action. i.e., a button or link that says Begin Practice. • Recent Parameter Score could show an empty state with text that says begin practicing to see results.

• The “Submit” button could be put at the top right of the recording screen. • Eliminate the right section of the “Questions”. • Turn the “Q1’s” into a progress lengthen button at the bottom of the recording screen. • Does ending interview automatically save progress or will participant have to start from the beginning? • Tutorial should also point out the timer and end interview button. • The button text ”Answer” might be confusing. Be more specific such as ”Record your answer”. • Increase the left & right margins of the question box to make the visuals better. • Left justify text of question. • Right and left arrows seem unnecessary, unless users are allowed to skip questions and come back to them, or skip them altogether. • Under Languify Demo, not sure why it says Instructions. The info below looks more like a key, in which case, I would recommend moving the key below the Q1 - Q10 boxes for improved proximity.

• Align box in top right corner with box below it. • Text in Your Progress box seems unclear. Could be simplified? • Add toggles or drop down boxes for progressive disclosure of answer, Personalized Feedback, and Ideal Answer. • Suggest increasing hierarchy with the text for improved scanability. • Suggest moving Personalized Feedback and Ideal Answer to the right of the Feedback and Tips, with user being able to toggle between them. This wil also help with reading flow by shortening the length of the text lines. • Could “Detailed Feedback and Tips” be shortened to “Feedback and Tips”, or not have any heading, as it seems self-apparent? • I see “Team Awesome” at the top in small print. Could we put it or a similar icon next to the score. This would be a encouraging signal to the user. • Would “Fluency” and “Vocal Delivery” be too similar? • “Write a feedback” button is covering some parts of the screen, also appears to be repeated. • Feedback bar under content for similarity, relevance, and logic flow are misaligned. • When looking at feedback, is it possible for the participant to toggle highlights on words or phrases that match what is in the ideal answer? • It feels redundant to have the definition of the category on the right hand side of the detailed parameter feedback and tips. We can probably include the definition inside of each box below the content header? • Minor typos or spelling inconsistencies: atleast -> at least, todo -> to do • Top right of the screen feels very busy and loaded with colors and information, can we make it more consistent and easier to see? • Personally think there is not enough white space bordering each element and it feels crowded. • Can we try to condense the information within the “your progress” window? Both prompts seem to want to encourage the participant to attempt the same assessment again, maybe just reword as encouragement and automatically display the progress feature as it is unlocked. • Use less shadow, especially for the Personalized Feedback card. • Use more concise and simpler language to suit students better such as ”Detailed parameter feedback and Tips”, "Parameter-wise Analysis”

User pain points were discovered with usability testing, which provided researched based design decisions.

Role: Collaborated with team with writing screener survey and usability test script.

Method:

A screener survey was sent out to the team's contacts on Slack and also job related contacts.

The screener survey identified participants that most closely matched the characteristics of the users of Languify:

• They are ESL.

• They are seeking to improve their English speaking skills.

3 Participants were chosen to complete a usability test.

Findings:

Issue #1
Many technical terms were used in the feedback section causing confusion in users. They needed help to recognize which part they did well and which let them know how they could improve.
Recommendations:
Use simple English such as replacing "Detailed parameter feedback and Tips" with "Your Performance" or removing "Parameter wise Analysis".

Issue #2
The users couldn't find the video recordings of their interviews so that they could improve their performance.
Recommendations:
Place the video recordings of the interview in the feedback section and make them obvious to the users.

Issue #3
The users weren't aware of the bookmarks page and knew how to use it. They would go to the Dashboard and Recent Attempts to view their previous answers.
Recommendations:
Make the bookmark icon bigger to catch the user's attention when they review their answer in the feedback section.

1

2

3

Desktop Iterations were made based on the usability audit and usability testing.

Role: Provided iterations for Feedback Screen based on heuristic evaluation and usability test results.

Student Feedback Screen - Iterated Design

1

2

3

4

8

7

5

6

1. The Overall score was moved to the left side of the screen to grab the user's attention first.

Why: Users stated they wished they could see their progress better.

2. The blue bot character was also moved to the left and reduced in size.

Why: The bot size was the largest and highest contrasting item in the top section, but not the most important.

3. The list of questions (Q1-Q15) was reduced to progressive disclosure.

Why: The page is text heavy and high in cognitive load.

4. A button was added for users to view their recorded sessions.

Why: Users stated they didn't know how to find their recorded sessions.

5. A toggle section was added on the right so users can switch back and forth between their answer and a sample answer.

Why: The previous design required users to scroll to the bottom of the page to view the sample answer and this may cause users to miss that information.

6. The bookmark icon was changed to a brighter teal blue color. and an overlay was created that pops up when hovering on the icon.

Why: Users stated they didn't see how to bookmark a question.

7. The colors were changed in the question Feedback sections from yellow to light gray and the border around the Personalized feedback box was removed.

Why: To improve color harmony and unity in the design.

8. Wording was changed or eliminated for technical terminology i.e., "Question-Wise Feedback" and "Detailed Parameter Feedback and Tips".

Why: Users stated they were confused by the terminology.

Takaways

Usability was improved for the student user flow of Languify through heuristic evaluations and usability testing.
The team had a short time-frame to complete the project so the scope needed to be well-defined and adhered to.

There was difficulty finding enough participants in the time-frame given, so we settled on 3 participants. More participants would have provided better data.

Further iterations could be done to improve usability on the feedback screen, including:
- Creating collapsible list of question feedback for different types of feedback, i.e, sample answer, generated feedback/
- Improve visual design to create more unity of sections and reduce cognitive load.

The client wishes to have the team work on a responsive mobile design in the future. A mobile design will require discovering how to display feedback metrics within a smaller frame.