Process

I began with competitive analysis of 3 vocabulary/language apps to give a good basis for what works as well as weaknesses we could exploit and any market gaps we could fill. I then conducted some user interviews from which to build a user persona to act as our archetypal user. I then tackled the information architecture by creating user flows for some specific tasks in the app. Armed with all this information I created pen and paper low-fidelity wireframes and iterated up into mid-fidelity wireframes before conducting usability testing and gathering that data to inform the high-fidelity wireframes

• Note: This project had a very short turn-around. With more time I would go much further with it, these restrictions however offered an immediacy which I enjoyed and was a great way to get the bones of a project established

User Interviews

I interviewed 3 people, 2 female and 1 male aged between 28 and 60 and each from a different geological location and with diverse professions and language-learning interests. 

I asked 6 questions to gauge how best they learn language and vocabulary and what keeps them engaged doing this:

• Tell me a little about yourself, what is your profession or field of study? What are your interests? What is your typical routine?

• In what way does language and vocabulary play a part in your life or affect your day to day experience?

• From your own experience, how do you find you learn new vocabulary best?

• What was the last word you remember learning and how did you pick it up? Why did you remember this word?

• What vocabulary apps do you or have you used in the past? Follow Up

• What have you enjoyed about learning language and vocabulary through an app?

• 6b. And what have you found frustrating about learning language and vocabulary through an app?

User Persona

Collating the data from the interviews I created a User persona from which I can use as a reference point throughout the design process. 

Let’s meet Beatrice

Low-Fidelity wireframes

From these two user flows I created low-fidelity wireframes, showing all the screens each flow would take the user through. Notes on what is included:

• An Opening sign up/log in follows a splash screen with name of the app and the logo

• Home screen consists of a profile picture & phrase of the day activity to help increase engagement. Languages in progress are listed as buttons

• Discover languages page - accessed from bottom bar. Languages are shown with their flag colours to help find a language easily - note: could be culturally sensitive so caution should be taken when choosing flags

• Phrasebook page - also found via the bottom bar. Users can find a phrase quickly just like a physical phrasebook.

• Phrases in the phrasebook are listed with their translation visible at a glance - clicking through to a phrase opens it in large text with options to hear it spoken out loud

• Progress bars are visible to allow the user to see their progress through a language course clearly

• Rich media including illustrations, photos, video and audio will help engage users in the lessons

• According to the research, users need to be able to revise. So there is an ability to revisit past lessons or get a random revision quiz

• Onboarding occurs upon first entry to the app with 3 main screens prompting navigation from the bottom bar to the 3 main screens

Mid-Fidelity wireframes

Using the outcomes and experience gained from my usability testing I shifted my wireframes into mid-fidelity altering some key features and redesigning screens with high-severity issues

• Changed the style of onboarding to learn-as-you-go, which has a lower cognitive load on the user and is more likely to keep engagement

• Integrated progress bars into the course buttons on the home screen to give a clear progress overview

• Adding a course (formerly “Discover”) is accessed via the '+' button on the Home screen which is more intuitive. This also frees space on the bottom bar and allows implementation of a charts feature which was mentioned during research and again at testing

• Colour is an important indicator when a correct or incorrect answer is given - it provides the user with immediately recognisable feedback and encourages emotive engagement

• A full green screen upon completing a course gives extra positive reinforcement and again promotes emotional engagement

• Phrasebook has flag buttons relating to country’s language phrasebooks, new languages can be added with an ‘+ add phrasebook’ button, this style of button largely replaces the original onboarding system

• With phrases, the language being learnt is in a larger font with the translation running down the left side. A user can quickly lock onto the needed word or phrase and find the translation at a glance

Where next?

• With more time I would enjoy taking these designs into high-fidelity and creating a smoother and more fluid clickable prototype in which to conduct further Usability tests.

• I would like to build the ‘charts’ feature which was to be a quick and easy way to check grammar i.e. verb tables, gender pronouns etc. And this would need to be thoroughly user-tested.

• I also would love to delve into the emotive design of this project. Developing a character mascot such as Duolingo’s Duo. Or having a reward structure of trophies/coins/gems. Or using some emotive colour choices and animated elements. These emotive factors alongside a bit of gamification would help engage users more fully with the experience and really allow this app to excel.