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 giantMaterial Design.

FW_Example.png

Define Objectives

Before re-design kicks off, I first thought through what establishing a new visual style would achieve.

Objectives:

  • 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

Identify Users

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.

User Demographics:

  • 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

Draw inspiration

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.

Example Takeaways: 

  • 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

Test IMpression

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.

  FlipWord has two types of interfaces: tooltip and pop-up.   Tooltips are accessed by hovering over foreign words that FlipWord replaces on any webpage. They contain learning/reviewing/testing tasks scheduled by a combination of algorithms, e.g. Hermann Ebbinghaus’s forgetting curve.   The pop-up is accessed by clicking FlipWord's logo in the corner of the browser. It contains five tabs: Home, Review, Market, Karaoke, and Settings.

FlipWord has two types of interfaces: tooltip and pop-up. Tooltips are accessed by hovering over foreign words that FlipWord replaces on any webpage. They contain learning/reviewing/testing tasks scheduled by a combination of algorithms, e.g. Hermann Ebbinghaus’s forgetting curve. The pop-up is accessed by clicking FlipWord's logo in the corner of the browser. It contains five tabs: Home, Review, Market, Karaoke, and Settings.


Emphasize with users

test2.png

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.

New Insights:

  • 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

Belief.png

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:

  • Healthy
  • Modern
  • Energetic
  • Clean

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.

Moodboard.png

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. 

Main Improvements:

  • 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
styleTile.png

Apply Visual Style

With another two design interns, we applied the new visual style everywhere in FlipWord.

Design Highlights:

  • 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
Origami.png

Design Interaction

UXFlowWhite.gif

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.

UXFlow.png

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.

FW_library.png
 

 

more projects by Yinghua