About the Project

Fluenci is a prototype app designed for users to practice languages whenever and wherever it works for them. Goal setting and benchmarks help users stay on track. Multi-media formats, including flashcards, messaging, audio and video help support learning in a number of ways. Quizzes help users test their skills and track progress. Users need a way to practice language skills that allows for goal setting and flexibility, because they need motivation to stay on track and have busy schedules. I was responsible for UX design including:

Tools used: paper & pencil, Lucid Chart, Prott, Sketch, Invision

Competitive Research

We looked at three vocabulary and language study apps to better understand the competition.


Brainscape logo

Key Takeaways:

  1. Option to create custom content
  2. Clear benchmarks for tracking progress
  3. There’s no option to take quizzes or tests to gauge progress


StudyBlue logo

Key Takeaways:

  1. Lots of customization options
  2. Navigation is tricky, app lacks visual hierarchy
  3. Some features and content are redundant


Memrise logo

Key Takeaways:

  1. Multimedia practice - text, audio and video
  2. Explore feature translates what your camera can see
  3. Few benchmarks for tracking progress


We used our competitive analysis and user research to develop our persona, Reggie, a young, busy professional.

User Persona
User Persona

User Flows

Reggie needs a way to practice her language skills and learn new languages that allows for flexibility, goal setting and motivation.


User Flows


User Flows

Wireframes & Prototypes

We used our user flows to begin developing lo-fidelity wireframes and prototypes based on our personas needs.

Lo-fidelity Wireframes
Sign Up & Onboarding
Lo-fidelity Wireframes
Learn Mode
Lo-fidelity Wireframes
Learn/Quiz Mode
Lo-fidelity Wireframes
Add New Vocabulary
Lo-fidelity Wireframes
Quiz Mode & Progress
Lo-fidelity Wireframes
Profile & Admin

Usability Testing

We began user testing early in the process and started getting feedback on our lo-fidelity prototype.

"Sign up and starting is easy."

"The bottom navigation buttons are confusing."

"There's no confirmation when I add a word."


  1. Sign up and starting the first lesson is easy.
  2. The profile button at the bottom right and the speech bubble were confusing when completing a lesson.
  3. Navigation to quiz mode is confusing. Too many navigation buttons at the bottom of the screen.
  4. No confirmation of adding a new word or phrase. Having two ‘+’ buttons when adding a new word or phase is confusing.
Usability Revisions


  • Removed unnecessary and confusing icons from the bottom navigation bar.
  • Added clear options to select learn or quiz.
Usability Revisions
  • User profile info can now be accessed from the settings icon at the top of the screen.
  • The '+' icon on the screen was replaced with a 'save' button.
Usability Revisions

Mid-fidelity Wireframes

After usability testing, we produced another round of wireframes to develop the app in Sketch.

Mid-Fidelity: select a language & start a lesson

Tools used: Sketch, Keynote

Mid-Fidelity Wireframes

Hi-fidelity Mockups

We further developed the UI, using color to emphasize transitions and improve user engagement.

Hi-Fidelity: select a language & start a lesson

Tools used: Sketch, Invision

Hi-Fidelity Wireframes
Mobile Prototype
Mobile Prototype


Mobile Prototype

Main Takeaways

We began by exploring the competition and quickly defining our product with a proto-persona. We developed user flows that help guide a series of rapid lo-fidelity wireframes and prototypes. We used these quick prototypes to conduct initial user testing. We analyzed our results and determined ways to improve the product. We refined the UI, updated our prototype ,and completed a series of mockups.