A platform for K12 students to learn flexibly and effectively
Snapask is an education technology company that applies machine learning and mobile cloud services to make education more effective, personalised, and accessible to everyone.
In APAC, Snapask supports 4+ million students across 11 regions in their post-secondary studies, aspiring to be the largest and best online self-learning service for students.
Challenges
The need for an updated identity stems from the fact that brand and marketing goals are very different, and some of them are even at odds with each other.
Marketing preferred to utilize a variety of trendy tones and messages to attract and retain users in order to meet their optimal return on investment (OKR). This caused a major loss in the position of the brand and negatively affected our users’ perception of Snapask.
Previous Design
Objective
Update Snapask's brand visual identity in order to optimize usage, flexibility, and scalability, as well as to solidify the visual language across all touch points.
Lower complexity, Increase flexibility
Increase co-work efficiency
Relatable, better storytelling
Assets should be updated for all products
(Android, iOS and Web)
Scope
We ran agile in Snapask, spending almost 5 months from finding the consensus with different departments, defining the value of brand languages, cleaning up all assets, refurbishing the design system and files to publishing into all product platforms and social media.
Jason Wang (Lead Design)
Amy Lin, Hao Lee, ViVi Wang, Danny Wong (Brand Designer)
Minyu Wu, Karen Li, Roy Wong (Product Designer)
Jerry Guan, Evan Ho, Chillin Wang (Android)
Jason Liang, Keke Arif, Ken Wang (iOS)
Dyson Lin, Jimmy He (Frontend)
Vincent Chen, Joe Wang (Backend)
Phases we have been through
Discovered the collaboration issue
Clarified the issues with marketing team
Discussed and reached a consensus through the workshop
Ideated the appearance and voted to decide if the new look would solve the communication issue
Redesigned and updated the design system and assets
Launched on all platforms
(Android, iOS and Web)
Schedule
Positioning the value
Being supportive, effective, knowledgable, and innovative are the 4 core values we promise our users.
To reach the consensus, we ran a workshop with stakeholders to brainstorm and consolidate the expectation. Focusing on the 4 types of learner behaviors, we brainstormed the values and mapped to each type of learners to position Snapask in their daily life.
S1 & S2: Supportive
S2 & S3: Effective
S3 & S4: Knowledgeable
S1 - S4: Innovative
Scenario 1
Supportive
Reliant on educators
Scenario 2
Supportive & Effective
Interest in learning
Scenario 3:
Effective & Knowledgable
Participate in determining the earning journey
Scenario 4:
Knowledgable
Self-directed learners
Logo
The 3 colors in the Snapask logo symbolize the 3 sessions in a student’s everyday learning journey: In-school learning, after class tuition, and self-study period.
Global
Japan
Taiwan
To extend the value, we decided to keep the original logo shape and upgrade the color contrast to make the appearance of the logo more professional and efficient.
App icon
Inspired by the new logo, we redesigned our app icon to express a clearer and more unique brand identity to our users.
Colors
The blue color was kept as the primary color since it represents trustworthiness, reliability and engagement.
Moreover, blue is widely considered a gender-neutral color which attracts users regardless of their gender.
Primary
Brand color, essential set
Neutral
Text and background
Secondary
Error, success, warning and subjects
Red
Green
Yellow
Purple
Primary
Brand color, essential set
Neutral
Text and backgound color
Blue
Text
Accent
Emphasize highlighted information
Semantic
Error, success, warning, information.
Purple
Tint
Red
Green
Yellow
Illustrations
With more and more design talents, the lines of the illustration are time-wasting and hard to extend. After discussing the issue with all designers, the saturation and contrast were increased to amplify the visual effects, and the lines were removed to improve the overall clarity.
To illustrate the pursuit of knowledge in the journey of learning, the concept of 'endless space' is used as a metaphor. In addition to our illustration designs, we have a character who best illustrates this philosophy, and that is Eve, the Navigator.
Icons
We redesigned the icons to fit the brand values and upgraded the strokes from 1 to 2 to emphasize the definition of each icon's functions and meanings.
With more and more designers joining our product design team, co-working on the same base line is vital to streamline the working processes.
Icon grid
A number of icons were created by different designers, and all the assets were stored as different files and in different folders. You can clearly see how sizes, formats, spacing, and colors are not consistent, and how the strokes and colors are all different.
Upon establishing the base library, we assembled the icon files and unified the color codes with the exception of multicolor icons.
In addition, the file names are edited to be easier and more straightforward to understand. For example, the name of the first icon was changed from "ic_album_text100_initial" to "ic_album".
Typography
Font style plays a crucial role in the success of the design. To match our new brand style, we selected Averta Standard as our font family.
A selected font should embody the character and the spirit of the brand. It is evident that it would be better for a typeface to be clear and legible. Failing to achieve that would lead to users spending extra time understanding the text, and eventually give up on interpreting the design.
Hello!
Hello!
English
Heading - Montserrat
Hello!
Body - Roboto
Nice to meet you
Traditional Chinese
Heading - Open Sans
你好！
Body - Open Sans
很高興認識你
Japanese
Heading - Noto Sans JP
こんにちは！
Body - Noto Sans KR
初めまして
Korean
Heading - Noto Sans KR
안녕하세요！
Body - Noto Sans KR
만나서반갑습니다
Thai
Heading - Noto Sans TH
สวัสดี
Body -
ยินดีที่ได้รู้จัก
English
Heading - Averta
Hello!
Body - Rubik
Nice to meet you
Traditional Chinese
Heading - Noto Sans TC
你好！
Body - Noto Sans TC
很高興認識你
Japanese
Heading - Noto Sans JP
こんにちは！
Body - Noto Sans JP
初めまして
Korean
Heading - Noto Sans KR
안녕하세요！
Body - Noto Sans KR
만나서반갑습니다
Thai
Heading - Noto Sans TH
สวัสดี
Body -
ยินดีที่ได้รู้จัก
Final look on App
Website
Reflect & take away
An upgrade to the brand identity is not just a discussion or a project to complete. It also represents a way to communicate values of the brand with the internal members.
With this process and results, we learned how to align misconceptions and cognitive.
After this project, I started leading the design systems establishment on all platforms.