User Interface re-design
FlipWord's new visual style is designed to be unobtrusive, making it easily blend into any web page and not distract users from their primary online activity. Origami 折り紙 is our design metaphor. We built the new visual system by standing on the shoulders of a giant - Material Design.
Before re-design kicks off, I first thought through what establishing a new visual style would achieve.
- Leave a better first impression, increasing FlipWord’s perceived value and trust for new users
- Impart FlipWord's deep empathy for users, helping create word-of-mouth advertising for organic growth
- Portray a stronger brand and raise awareness, easing user acquisition
Designing for users’ feelings requires us to understand them well. I analyzed our user base from three sources: 1) FlipWord’s on-boarding survey; 2) Google Analytics report; 3) FlipWord's internal user activity data.
- 18-35 year-old tech-heavy males are the main FlipWord's users
- Working professionals make up the biggest group; college students come in second
- Distribution of FlipWord users covers the Western world
- Users are most active during business hours
To draw inspiration, I sourced the web with a design intern for both good and bad visual styles. We took time to study each example for what works, what does not, and the reasons behind them.
- Clean backgrounds with bright colors generally leave a good impression
- Strong color combinations can leave strong impressions but risk drawing too much attention
- Avoid uncommon fonts and shapes, unless they serve specific design purposes
Based on what we learned from design examples, we quickly prototyped twelve visual styles for FlipWord’s learning tooltip and conducted an impression test.
Considerations of using the specific tooltip interface for the test include: 1) Its visual style must have high compatibility when overlaid on any arbitrary webpage; 2) Its elements can be consistent in all tooltip interfaces; 3) It is quick to design due to simplicity; 4) It is the "face" of FlipWord as the most frequently accessed interface.
The twelve styles were posted as a poll in my co-founder’s Facebook network, since he has 2.5K+ friends and they generally fall into our user demographics. We specifically asked people to vote within the first few seconds and comment their reasons. From people's feedback, we narrowed down our design styles moving forwardto a white background with green elements and dark texts.
Emphasize with users
In parallel with the impression test, we conducted a series of in-person interviews. Besides collecting feedback about FlipWord's old interface and experience during each interview, we also asked about their daily routines. This gave us deeper understanding of their everyday needs, from which we uncovered new insights on ways to better integrate FlipWord into users' daily life through visual re-design.
- Make FlipWord’s interface unobtrusive to avoid breaking users' overall experience of their original tasks, e.g. shopping on Amazon
- FlipWord's visual style should help lower users' daily stress, so that they will not view language learning as a burden
- Avoid colors and fonts that can cause eye strain since the majority of FlipWord users face screens much of the day
- Keep interaction simple, as users only expect to spend a few seconds on FlipWord when doing their primary online activities
Tailor to Brand
To tailor the prototyped styles for a better delivery of our beliefs, I discussed with my co-founder about what brand image we would like to develop over time.
Our belief is that learning foreign languages should be 1) as effortless as babies learning to speak a mother tongue; 2) as nourished as eating healthy snacks while browsing. By changing this status quo, we hope to increase mutual understanding between people of different cultures, leading to more poly-linguals and thus a more connected world.
Build Mood Board
With all of the information collected in mind, we decided our general look and feel direction:
We also defined our universal visual style -- Origami. On one hand, this style resonates with users' daily life as paper is one of the most common everyday things. On the other, it allows us to keep consistency between interface design and illustrations for words, since almost everything can be designed with the simple art of paper folding.
Iterate on Style Tile
After multiple iterations of the most voted prototyped style, we transform the broad strokes of the mood board into actual building blocks.
- Fixed width of learning tooltips with vertical expansion to accommodate text-overflow issue
- Better contrast and character/line spacing for more comfortable reading
- Color adjustment for backgrounds and shadows to match with Chrome's defaults
Apply Visual Style
With another two design interns, we applied the new visual style everywhere in FlipWord.
- Maximized compatibility on any arbitrary webpage through using Chrome's default grey and white as parts of the color scheme
- Energetic and fresh feelings permeated from elements in refreshing and modern green gradient to free users from daily stress
- Highly contrasting text and background colors with a sans-serif font, Arial, to ease reading, minimizing eye fatigue
For interaction design, InVision is very useful to check the UX flow without actually implementing it first, but it is not very helpful for discovering edge cases. I tried my best to think through all of the possible edges first and then worked with engineer interns to solve new cases over time.
BUild Design Library
I also created a reusable UI design library for FlipWord to maintain design consistency and developer efficiency, since we hire design/engineering interns quarter by quarter. Over time, different interns will contribute new solutions and styles, causing experiences to diverge. Therefore, a reusable UI design library is very useful for a startup like us.
more projects by Yinghua