Annie McDougall
UX/UI DESIGNER
lexicc.png

Lexicam

Lexicam

Lexicam is an app which uses visual search technology to label things around you in the language you want to learn, and  helps you memorize  words with flashcards from the pictures you've taken. Lexicam was inspired by my time living in Vietnam, where I started thinking about the value of innovative learning tools for empowerment. Lexicam combined two strong interests of mine: photography and education.

As part of a 10-week project I conducted market research, interviews, experience maps, proto personas, sketches, wireframes and high fidelity designs for the app. Have a look at some highlights from the project below.

Concept and hypothesis

From my travels I had developed a loose concept of a language-learning tool app using your phone's camera, but I needed to do research to identify what specific problems I was trying to solve with my product and start to brainstorm how best to address those problems. My hypothesis was: I believe that a fun augmented reality experience (utilizing visual search technology) for learning foreign language vocab will help people learn with less time and effort

User interviews

I started my research with a series of interviews. I wanted to find out whether people were happy with their current language-learning experiences, what thoughts they had around language-learning and what tools they tended to use to help them. From my interviews I found that people overwhelmingly were currently learning a  foreign language or were interested in doing so, but that they often found it hard to find time for it, they struggle to maintain the enthusiasm to make significant progress, and many find that the content that is taught on platforms such as Duo Lingo feels impersonal and/or irrelevant to their lives. 

Proto personas

From there I developed personas, which were based on people that I interviewed. My target user was Jenna Martin, who I crafted as being representative of my 'enthusiast' users. Jenna is a serious language learner and would be using Lexicam on a regular basis, both while at home and while travelling. She is in architect in her late 20s, and a fan of apps like Pinterest. My secondary users were those  likely to use the app only when travelling. I named those my 'travellers'.

Experience map

From there I created an experience map, to track Jenna's pain points, and describe how downloading Lexicam could improve her overall language-learning experience by making the process easier, more personal, and more fun.  

Market research

I then spent some time analyzing the competition and finding inspiration.  With apps like Duo Lingo, I loved that the lessons were fun and engaging and the design clean and playful. However, I felt the design was aimed at a younger market, which could put off older learners. I liked that apps like Pinterest and Instagram did a very good job of creating experiences that were visually interesting but minimal enough to have wide appeal. 

 

Sketching

Following my user and market research, I started sketching wireframes to try out different layouts and test different ideas. When I started sketching I had three main routes I felt I could go down: a concierge-type experience where a person or perhaps a cute robot could pop up and translate for you, a personalized flashcards experience where you could  draw on top of your images a bit like Snapchat, or a more stripped back experience more similar to Google Translate. After more interviews and usability testing using prototypes created on the app Pop, I started iterating designs based on the latter two ideas. 

Digital wireframing

While wireframing generally doesn't include images, as I was designing for a camera-based appI was going to have to test my app in an imagined scenario. I decided on a cafe setting, with my users wanting to learn Spanish

Usability testing, round 1

My first round of usability testing uncovered a number of problems. Issues identified included that my staring system to save words wasn't working and there was no way to choose which collection you wanted to save words into. 

Second iterations

My second iterations included a new large, easy-to-access save button and a pop-up screen allowing you to choose your collection. 

Branding

I felt that a logo which was reminiscent of both a camera aperture and a speech bubble would communicate well what my app what about. I liked the idea of a gradient or transformation from one colour to another to communicate change or translation, but in the end I felt that the flat white logo on a slight gradient packed the most punch. I didn't want the logo to look like a loading screen! I choose a font that I felt was fun but respectable. 

logo_development

Final user flows

The final flow for taking a photo and selecting words to save is as below. You take a photo, wait for Lexicam to identify and translate items, and then either individually select which words you want to save and tap the bottom left button, or save them all with the button on the bottom right. Selected words become more opaque. The audio button became smaller while still having a large selection area, and I introduced more type hierarchy so that the translations stood out. 

To save to a collection, a suggested collection is provided, or  you can choose your own or create a new one. When you tap done, you are taken back to the previous screen where you see a notification that the word has been saved. Any saved words are greyed but still legible. In your flashcards collections you can scroll horizontally to see your flashcards within a collection, or vertically to scroll through different collections. 

You can easily toggle between test mode and study mode on the top right. In test mode, when you go into a collection the translations are not shown, and you are asked tasked with writing in the translations. If you are correct, the box turns green and you can swipe to the next card. 

If your answer is incorrect, the box will turn red. The correct answer will be shown and if your answer was close, the part of the word which was wrong will be underlined and a pop up will tell you that you were almost right. 

Prototype

Experience the app via the prototype below.