Building An End-To-End Application

The goal of this project was to build an end-to-end application that solved a problem of choice.

Project
Academic

Role
All aspects

Timeline
Approximately 80 hours

Tools Used
Figma, Figjam, Illustrator, Photoshop

The Problem

Independent language learning is hard

Learning a new language is an increasingly important skill in our global world. Languages are inherently social, but finding opportunities to practice with others is a common problem. Knowing this, what is a solution that can help language learners independently build the skills necessary to succeed?

Discovery

Competitive analysis

I compared apps that each had a different approach to learning languages to get a broader view of the market. I discovered there were many common features such as: bite-sized content, parallel text, clickable word translation, read along audio, audio speed settings, and content for different levels. View competitive analysis.

User interviews

To dig deeper, I talked to real language learners to understand their goals, struggles, and current learning methods. I had five participants: 4 men and 1 woman all between the ages of 34 to 46.

Analysis

A desire for realistic speech

Using an affinity map to organize my interview data, I was able to uncover many commonalities. Interviewees were motivated to learn another language for career and personal growth opportunities. Their main frustration was not being able to understand native speakers or be understood by native speakers. A majority used non-academic podcasts and videos to learn realistic pronunciation, cultural expressions, and slang. When using an app, participants looked for interactivity as well as tips and grammar explanations. View affinity map.

Two different personas

Two distinct personas emerged through my research: one who needs to speak like a native, the other who needs to understand native speakers. View personas.

The Solution

A gamified story app focused on native speech

It was clear that my solution must incorporate speaking practice and practice listening comprehension with a focus on realistic speech. I decided that using stories as the vehicle would help achieve both goals. To help map out the necessary tasks, I created task and user flows for speaking and listening practice. View task & user flows.

Balancing business & user goals

Although this was a theoretical business, it was important to consider where the business and user goals intersect. To generate revenue, users would be enticed to by a free trial with the goal of conversion to subscription-based learning. To retain users, game rewards would be used to unlock additional content. To increase user engagement, engaging social media content would be used to provide free grammar explanations.

The minimum viable product

I decided that the basic reading and audio functions of the app would be the focus of the initial product delivery. This meant the account setup, level creation, playable audio function and parallel reading functions would be developed. The speech functions would be left to a later release.

Wireframes

A simple flow to appeal to all

Since I knew there would be different levels of user, I wanted to keep the flow quite simple. I also took cues from existing apps to provide a familiar feel. In addition, I wanted to offset the bold visual content of each story page with a less intense navigation. View mid-fi wireframes.

Final Design

Fun and friendly visual design

Since the design was a game, I wanted it to look fun and inviting, but not overwhelming. I wanted the user focused on their purpose for using this app without visual distraction. View hi-fi wireframes.

Usability Testing

Testing goals

When creating the usability test plan, I sought to answer questions like:

  • Can users navigate with ease?

  • Do users understand the status of each game level?

  • Is the difference between the story and game modes clear?

  • What are the points of frustration in doing these tasks?

  • How long does it take the users to complete each task?

Testing without key functionality

Due to technical limitations, it was not possible to include audio or recording functions to help mimic what the user would actually experience. I had to verbally sell the experience to the user. It was a challenge, but the tests were very ultimately insightful.

Analysis

A friendlier design for inexperienced users

The main issue users had related to navigation. Although I was inspired by existing language apps, users who were not used to mobile games needed more information to help them navigate the interface.

I charted the potential revisions I uncovered from my analysis and then decided the priorities based on their impact. View usability test analysis.

Revisions

Improving the navigation

I choose five revisions mostly focused on improving comprehension of the navigation. For example, users were unsure about the sequential order of the game levels. To solve this, numbers were added to the levels to be explicit about the order. In addition, a sign was added to indicate the start of the path. View all revisions.

Takeaways

User first, visuals second

This was such a fun and challenging project to work on. The gamified nature of it is right up my alley and the graphics lean into my previous experience. One of the biggest challenges was making sure to not get caught up in the visual elements. I re-oriented myself frequently to the user’s goal and reminded myself that the graphic elements are meant specifically to support that goal.

Some other projects

Alert Messaging

Creating clarity through improved alert messaging.

Feature Flagging

Empowering users for more efficient software testing

Glamour Nails & Spa

Creating a seamless appointment booking experience.