problem and competitive analysis

All of the apps in our analysis included some form of module-based learning, rote memorization, and a lack of teaching instruction. And it dawned on us that these are language learning apps, with an emphasis on people that aim to learn language as a habit. But an app type we realized would be a better fit was a phrasebook app. In fact a physical phrasebook would better serve tourists as its physical modality has been a solution prior to phones and the internet. It also has pre-made phrases to use with native speakers, which was the angle we decided to focus on.

user interview & information architecture

We then conducted a user interview with questions asking about peoples’ process to preparing to go on a trip and how they approach foreign language preparation. We also wanted to learn how important what aspects of language learning is important if given a preference as well as people’s current toolbox when travelling abroad.

After interviewing, we used FigJam AI to summarize our findings which was basically:

• Speaking is crucial for communication and learning phrases
• People often feel embarrassed to speak in a foreign language due to fear of making mistakes
• Confidence dips when listening to native speakers and their fast speech
• Duolingo is a popular language learning app, but it does not prepare users for travel
• Short-form content like TikToks and Reels can be helpful for quick tips and learning
• When preparing for travel, logistics, itinerary, and budget are prioritized

We were able to pivot that people want to cram, as people don’t have the luxury to study or used spaced repetition when communicating abroad. Upon referencing more specific language tools like "Spanish Verbs" and flashcard apps like "Quizlet" and "Knowt" — we determined that we would combine the idea of a phrasebook, dictionary, and flashcard app into one. This would permit an already available database of words and phrases that exist while allowing users to pick and choose what they need for their schedules.

defining features and low fidelity

We then did some sketches for the wireframes and scoped out the information architecture. We determined that three main pages would best service the ability to search, review, and assess the easiest. From there, Saige had mocked up and made a basic prototype of the low fidelity frames.

As she did that I began developing the design system, but before we could implement it we did a preliminary user test of our low fidelity flow through Maze. It was the best option given our short period and permitted thorough data analysis in a consolidated way, especially heatmaps which would aid us later.

design system development

I started looking at colors first for the system and determined purple would be our core color with yellow accents to create the most contrast but also the purple tints and tones would be versatile for a light mode or dark mode.

From there, the slab-serif Plush font created a studious and academic vibe but Instrument Sans would keep things casual as the main system font. Since Saige and I can read Japanese, we made sure to use M Plus One as the font that best matches Instrument Sans while making sure to use a typeface catered for Japanese script.

I established that using an 8 pt grid for everything would scale best as from that point we worked from multiples of 8 with a few exceptions with multiples of 4.

The steps in this process allowed me to build a rudimentary design system that was scalable. This was the first time I tried to follow everything by the book, and it proved worthy in the final design.

This image shows the library of components developed when iterating time and time again between our various user tests. This includes main states, hover states, and pressed states.

Once we broke down our first user test’s insights we applied this design system to synthesize what worked about the user flow and make user interface adjustments accordingly. Of course from there new components emerged accordingly which led to a full-fledged design system!

iterate, iterate, iterate

We conducted three user tests in total. The first one was using the low fidelity frames prior to applying our design system. And the second and third ones were able to refine and reveal more specific user flow issues as well clear any confusion in copywriting and other expected flows.

In our 1st user test, we found that we need to:

This image shows all the changes from the low fidelity frames to our first set of high fidelity frames.

• We need to add labels to buttons and our nav bar to improve clarity
• Include a progress bar to visualize progress during flashcard study sessions
• Swap "play" icon for "audio" icon to prevent confusing use of same icons, different context
• Have the search input in English, not the foreign language

This was a good jumping off point as evidenced through the creation of icons and a more concrete and high fidelity looking design system.

In our 2nd user test we discovered:

This gif shows the changes illustrated from our first high fidelity frames to our second iteration with user suggestions.

• The name "Database" was unclear, so we changed it to "Discover" as to discover new words, phrases, and sets.
• There's a preference to stay on the homepage, so we needed to make search easier by labelling it and including it on the homepage as "Search for anything" versus "Search for words or phrases".
• Even when prompted to select specific topics of interest, the same four topics kept being clicked so let's recommend popular topics sooner.
• You should be able to add cards when editing sets, now you can with a modal that redirects to the "Discovery" page's results automatically.
• The assessment flow's full capabilities may be out of our scope, but we now included simulated interaction design to get a better sense that would permit clicking around.

This taught us to rephrase our questions to be more simple and direct. We also considered more paths based on the previous comments regarding alternative preferred entry points to search/add cards.

In our 3nd user test we discovered:

This image shows more of the analytical findings from our third user test including an additional user suggestion.

• By improving the amount of ways to add a new card, our success rate went from 25% direct success of one path and 25% unfinished → 71.7% success of four paths and 0% unfinished
• More users started to understand the goal of the app was to learn on the go or through travel compared to the first-two tests
• One user said it may be hard to search through multiple sets, and so we added another search-bar saying “Search for sets”.

final solution

And so we finally arrived at our final iteration, after three user-tests, continuously building and iterating our design system, and refining our interactions altogether.

This gif shows how one can get started with choosing what topics they want.

This gif shows us how straightforward is to search and add to your sets.

This gif shows a walkthrough of what it's like to study a set.