JUMPING IN

The Starting Point
I was hired early into the project but not right at the start. The CEO was already working with developers to get the main features of the app functioning, and they already had an idea of what direction they wanted to take the visuals and layouts.

The Plan
‍I looked over what research, information architecture, and wireframes they had done. I was to refine the design and visual style based off of the pre-work they had already completed, and I broke the work down into user flows.

The Login Flow

This seemed like a natural place to start. The UI is relatively simple, but it gave me a chance to start figuring out the basics like grids, text styles, and some components and states, like active vs. inactive text boxes, error messages, and primary vs. secondary buttons.

The YouTube Flow

This is where users can watch YouTube videos and interact with the subtitles. Tapping words will pull up a card with its definition. They can also add these words to a word bank or hear its pronunciation. Users can expand the card to see example sentences as well.

I kept it simple at first. The subtitles and the translation were all on one screen, with the sentence being spoken highlighted. I felt that users could more easily consume the information they were taking in if they could quickly compare the original target language and their native language. Nothing else is highlighted except the sentence being spoken, so as not to distract the user from their learning.

When I showed him my first pass, the boss had a few ideas. He was picturing the target language and the translation split. He also wanted to highlight the words that the user is studying, the words that the user might want to add, and sentences the user has saved. This complicated things. I went from needing to differentiate one thing (the sentence being spoken) to four. My first few passes of this were definitely in need of improvement. I.e. here, the colors were not working together. I needed to reign things in a bit.

In the final version, it feels a lot more visually digestible. The boss wanted to add one more differentiating factor: visually show how well the user knows the word. I decided to lighten the color the more the user knows the word. Additionally, by changing the spoken sentence from being highlighted in gray to being bolded, I could use the gray for the suggested words. I still feel that there is a lot going on here and it could be reigned in a bit more, but it was exactly what the CEO was looking for.

The Chatbot Flow

A big part of this app is its AI chatbot. The AI can give users a quiz based on the video they are watching and the words they have saved. The quiz features multiple choice questions and asking users to repeat a sentence out loud, targeting pronunciation. After the YouTube visual exploration, this came fairly easily. We had the building blocks for the visual language of the UI.

The Homepage

At this point, the visual language of the UI was really getting nailed down. I just had to pull it all together for the homepage design.

I first tried a version where I pulled in the colors that were present in the YouTube page for the progress bar and the streak calendar. In the streak calendar, the lighter color was for days where the user practiced, but did not meet their goal, and the darker color was used for when users both practiced and reached their goal.

Ultimately, the boss was more interested in paring down the colors and removing the progress bar up top. While I think this looks cohesive visually, I do wish that I would have explained my reasoning for adding colors a bit more. I find that the grays in the streak calendar make it look inactive.

What did I learn?

1.

How to prepare Figma files for developers! The handoff process requires fully responsive frames, organization, and clear annotating.

2.

Explain your design choices clearly. Sometimes, people are really invested in their vision, and it can get in the way of good design choices.

3.

A lot about effectively utilizing style guides, components, auto layout, and style libraries.