Blink App

Introduction

The increasing pressure to pay off student loan has forced Millennials and adult learners to balance grad school with full-time work and family. The compromise people make is studying on the go like on the train. However, people cannot study effectively, and thus cannot retain the vocabulary. Blink wants to empower people to increase their vocabulary when they are studying in less than ideal spots. It is a flashcard application that allows users to make excellent hints. I will talk about the process of how I researched and prototyped my ideas to come up with the UI.

Competitive analysis

The first step was testing other flashcard applications. I found the card creation was confusing, and the applications were overwhelmed with memory games. I wanted to make the card creation process more cleaner. Below are screenshots from Quizzlet. The app could improve the navigation and the input fields for the card should be larger.

Analyzing Quizzlet

User research

Conducting user interviews went well. I learned the importance of asking open questions is to reveal the user's reasoning for decision making. My first assumption was people who studied other languages would have used flashcards in their studies, but that was never the case. People prefer to learn language by talking; instead, people used flash cards for terminology that they don't use in their everyday. After reviewing the recorded answers, I categorized the feedback into a persona's action, feelings and thoughts. Then I selected some of the points that would help me sketch out a proto persona.

User research Proto persona

Wireframing and creating a protoype

Before wireframing, I used Microsoft's Visio to write down the list of actions I thought made sense for the user to carry out to achieve their goal. From the list, I could visualize the inputs and outputs into a diagram for the user to make personalized hints. With the diagram as the DNA of my idea, I sketched the wireframes on paper and made variations so all my ideas were on paper. After reviewing my sketches, I highlighted my favourite ideas and then recreated them digital with Adobe XD to create a clickable prototype on an iPhone 6. I chosed Adobe XD just for this low fidelity prototype because I wanted to test the tool for the first time.

Wireframe and Proto

User testing

The user test clearly revealed the personalized hint feature was unusuable then. Everyone was confused with the word annotation. No one could find the hint feature, it was a foolish assumption to use the hold-down gesture on key words to reveal the hint option. And no one wanted to add suggested websites or sources as hints. I had to make obvious changes to my idea. The first obvious change was to rename the feature from annotation to hint. Secondly, remove the hold-down feature and add a hint button somewhere. Lastly, allow the user to write their own hint and offer a better suggestion to compliment their hint.

User test

Moodboard and UI design

Before I started working on the UI, I created a moodboard for myself focus my visual aim. I chose the color blue because it's the color of calm and relaxation for studying. And I changed the name of the app to Blink because the hint is waiting to appear, which can happen in a flash when the user clicks on it. To iterate and polish the UI, I used Sketch because I really like the sybmol tool. In the end, I added a hint button in the corner of the corner. The hint feature will only appear if the user wrote a personal message in the card editor. And to compliment the user's hint, I designed the suggestion tool to find images that could help the user remember their word.

UI Design