Snapask

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

Year

2020

Problems

Challenge 01

The original design system no longer scaled with the product

Snapask’s original design system was created when the product was moving quickly and the team was much smaller. As the product expanded, the system became difficult to apply consistently across new features, creating visual inconsistencies between the brand and product experience.

Unfriendly visual assets

The illustration style relied heavily on thin lines and small details, making visual elements difficult to read and scale across smaller screens. This limited their flexibility within the product experience.

Low-contrast color palette

The original pastel palette created insufficient contrast between interface elements, weakening visual hierarchy and making important actions harder to distinguish.

Challenge 02

A complex mascot system limited scalability

As Snapask expanded across markets, local teams needed to produce brand and marketing content independently. The mascot’s complex construction made it difficult for designers to create new poses and variations consistently, slowing production and limiting the brand’s ability to scale.

Challenge 03

An undefined brand personality created inconsistency

As Snapask grew, the lack of clearly defined brand attributes led to different interpretations across design and marketing teams. We needed a shared brand foundation that could guide decisions consistently across product, marketing, and new markets.

What's Snapask's
Personality ?

Solution

Step.1

Understanding the users behind conversion

With a paid conversion rate below 2%, we needed a clearer understanding of what motivated users to pay. I partnered with two UX researchers to interview 13 paying users, uncovering their learning behaviors, goals, needs, and pain points.The research helped us define a core buyer persona that became a shared foundation for both product and brand decisions.

Step.2

Defining the design direction

Based on the research, I framed two design directions to address both sides of the experience: improving the product’s usability while building a stronger emotional connection with our audience.

Functional

How might we create a scalable design system that improves usability and consistency across the product?

Emotional

How might we build a brand experience that creates a stronger emotional connection with our audience?

Step.3

Aligning the team around a shared brand personality

I facilitated a workshop with designers and marketers to define four core personality traits for Snapask. These principles created a shared language across teams and became a framework for evaluating future product and brand decisions.

Step 4.

Redesigning the mascot for digital scalability

User research showed that Eve was already a recognizable and well-liked part of the Snapask experience, so rather than replacing the mascot, we focused on making it more scalable.I audited how other digital products use mascots and found that simpler proportions and fewer visual details made characters easier to adapt across UI, marketing, and different screen sizes.

Step.5

Style exploration

With clear design principles in place, the team explored four visual directions for Eve. Each direction tested a different personality while maintaining the same core constraints: simple forms, strong scalability, and flexibility across product and marketing.

Step.6

Preference testing

We tested the four mascot directions with users across seven countries to understand how preferences varied by age group. Concept 4 performed strongest among younger users, while adults showed a stronger preference for Concept 3. These findings helped us refine the final direction while balancing appeal across our broader audience.

Step.7

Prototype

Based on the preference testing, we selected Concepts 3 and 4 as the strongest directions across different age groups. We then developed both into prototypes across the product, website, and social media to evaluate how each visual system could scale across different touchpoints before making the final decision.

Step.8

Mascot refinement

After reviewing both directions against our design principles—simplicity, flexibility, and memorability—we selected Concept 4 for its greater flexibility across different scenarios. I then refined the mascot system and created guidelines that enabled designers to produce new assets efficiently while maintaining a consistent brand identity.

Design system

UI color scheme

I collaborated with a product designer to rebuild the UI color system, introducing stronger contrast and clearer visual hierarchy across the product. We also defined primary, accent, semantic, and neutral colors with clear usage guidelines to improve consistency and make the system easier to scale.

Ratio of colors

Assets colors

To extend the design system beyond the product UI, we created a broader color palette for illustrations and marketing assets. The system provides designers with greater creative flexibility while maintaining a consistent visual identity across different touchpoints.

Typography

Following iOS typography conventions, we built the system around SF Pro Text and SF Pro Display. SF Pro Display is used for larger type above 20pt, while SF Pro Text supports smaller sizes for better readability. We also standardized type styles across navigation, buttons, content, and captions to maintain consistency throughout the product.

UI Components

I created reusable components for common UI patterns, including dialogs, buttons, and form elements. Standardizing their behaviors and states made it easier for designers to build new experiences while keeping the product consistent as the team scaled.

App icon

We explored three app icon directions and tested them on the Google Play Store to understand which performed best. Version C achieved the highest conversion rate and was selected as the final app icon.