Snapask App

Revamp Ed-tech product design system to create the ultimate digital learning experience for Gen Z users!

Year

2020

Problems

Challenge 01

Product : outdated design system

In the early stages of the rapid brand creation, when I designed the first version of Snapask's branding, efficiency took precedence over integrating brand visuals effectively into the product. This led to challenges in applying the past design system to the interface design.

Unfriendly visual assets

Firstly, the current illustration consists of numerous fine lines, which often lead to difficulties in utilizing design elements when presented on small screens. It usually led to problems on product usability.

Low-contrast color palette

The original interface predominantly featured pastel colors, resulting in low-contrast visual color schemes that could obscure the hierarchy of UI components.

Challenge 02

Marketing : complex mascot causes
low scalability

After recruiting visual designers in local marketing regions, the complex mascot design significantly hindered efficiency in producing materials for social channels.

Challenge 03

Brand : the vague brand attributes

In the past, due to rapid growth considerations, Snapask did not define its brand personality, leading to vague brand attributes that often resulted in conflicts between marketing and design. Therefore, after identifying the challenges faced in product and marketing, we decided to redefine the brand personality and document it in the guidelines.

What's Snapask's
Personality ?

Solution

Step.1

Build a buyer Persona with UX researchers

Snapask's user payment conversion rate has been consistently below 2%, posing a significant challenge for our revenue-driven startup. To address this, I coordinated with two researchers to conduct user interviews with current 13 paying users. The goal was to gain a deeper understanding of buyers' learning behaviors, needs, goals, and pain points, etc. These insights helped us develop more precise communication strategies targeting potential buyers and assisted product designers in creating a better product experience. Ultimately, this aims to increase the conversion rate of paying users and support the team's sustainability.

Step.2

Direction

After defining the problem and establishing buyer personas, I spent an afternoon addressing the challenges of the product in both functional and emotional aspects. I crafted two "How might we" statements to help the design team effectively focus on the issues throughout the subsequent process.

Functional

How might we develop a user-friendly design system to elevate the usability within the product ?

Emotional

How might we cultivate a brand that fosters emotional connections with potential buyers?

Step.3

Brand personality workshop

At the outset of the design process, I organized a workshop involving all designers and marketers within the team. During this workshop, we defined four key brand personality traits for Snapask. These became the basis for evaluating the appropriateness of our design outcomes.

Step 4.

Audit mascots application in digital products

In the interviews, more than ten paying users mentioned that they really like Snapask's mascot, Eve. They also appreciated the fun visual design, which differs from the authoritative tone of most educational software in Asia, making the product feel more relaxed and enjoyable to use. Consequently, we decided to retain the original brand mascot, Eve, and continue integrating it as a key component of our design system. To balance brand consistency with improved usability, we conducted desk research to understand how other digital products effectively use mascots in their UI designs. Interestingly, we found that having a head-to-body ratio of over one-third and simple body segments often allows mascots to be better represented in digital media.

Step.5

Style exploration

On this stage, designers created four different styles of mascots to explore more possibilities. Despite the character's design differences, the same design principles were followed to ensure the practicality of creative solutions.

Step.6

Preference testing

We tested the audience's preference for the mascot designs in 7 countries. The No.4 mascot had the best performance among young people, and adults had a stronger preference when they saw the NO.3 mascot.

Step.7

Prototype

Based on the result of the previous survey, we chose No.3 and No.4 mascot design which had higher performance in either teenager and the adult groups as the candidates. Next, prototypes of the product, website, and social media were developed for stakeholders to review the future application of the visual identity system.

Step.8

Mascot refinement

The original design principles - “Simplicity, Flexibility, and memorability” were reviewed by brand designers and CEO before the final conclusion. After cautious consideration, we decided to use the NO.4 mascot design as the future direction because of the bigger flexibility of its separate head and body. Finally, a complete and structural mascot guideline was written to ensure any designer could operate this system smoothly in order to achieve a great balance between the efficiency of production and consistency of the brand.

Design system

UI color scheme

Next, I collaborated with a product designer to develop a color scheme for the interface. In this updated version, we increased the overall saturation and contrast of the colors, aiming to create a better hierarchy in visual assets and improve usability. Additionally, to effectively manage the product's colors, we specifically defined the ratio at which primary color, accent colors, semantic colors, and neutral colors should be used on the screen.

Ratio of colors

Assets colors

To achieve a more consistent color scheme, in addition to the color specifications for the interface, we also defined color guidelines for visual assets. Compared to the UI color specifications, this palette offers a wider range of colors and varying saturations, aiming to provide designers with greater flexibility when creating visual assets.

Typography

In line with the iOS Human Interface Guidelines, we utilize the native iOS fonts "SF Pro Text" and "SF Pro Display" in the design system. After testing, we determined that for improved readability, we switch to SF Pro Display for font sizes above 20pt, while SF Pro Text is used for sizes below 20pt.

UI Components

Furthermore, within the design system, I established various dialog and button templates for different scenarios, simplifying their utilization for product designers. This initiative also ensured the consistency of our design output across transitions between different designers.

App icon

Three app icons were developed to conduct AB testing on Play Store. Due to the better conversion rate, the version C app icon was chosen