Shopee Supermarket
Duration
Type
My Role
Team
Two Months
Design Guidelines, Design Assets, Brand Experience
Project Lead, Research, Visual Design
2 Brand Designers, 1 Design Manager
Shopee Supermarket, a dedicated section within the Shopee platform serving millions of users in Southeast Asia, offers a wide range of grocery and household products for a convenient online shopping experience.
As the lead designer, I collaborated with regional designers to address inconsistencies in brand identity due to the lack of guidelines and assets. Over two months, I developed comprehensive guidelines for color, typography, and imagery, streamlining design processes and establishing a consistent, trustworthy brand image. This initiative significantly enhanced the platform's appeal, increasing orders by 20%.
Overview
A One-stop Grocery within Shopee’s App
A wave of digitalization during the pandemic widened Shopee’s, an e-commerce giant in South-east Asia, access to consumer segments that had typically been hard to penetrate. This led the company to double down on adapting its supermarket platform to aggressively engage a more diverse customer base.
Background
Business Opportunity vs. Current Defect
Residents who live in Southeast Asian countries often get groceries from wet markets, where they can obtain limited options provided by vendors.
Since the Covid-19 pandemic, there has been a rise in people who purchase daily supplies through the app for Shopee Supermarket because it is relatively safer and has more choices.
Therefore, we wanted to grasp this opportunity to expand the user base and increase their engagement by improving the brand identity. Inconsistent, indirect, and insufficient were the most critical problems that needed to be tackled.
Background
User Journey Snapshot
Background
Symptoms of Problems
Defining
Communicating with Stakeholders
Since the final design guidelines and assets would be used by designers in different countries, I communicated with them seamlessly from the beginning. I identified their main pain points and ensured the guidelines would be a useful tool for them.
Singapore Designer
We were told to use the color palette of Shopee. However, the saturation of those colors was too high to apply as background color directly. Therefore, we adjusted the colors with lower saturation ourselves.
“
Indonesia Designer
The biggest challenge was that we needed to create visual elements from scratch without the understanding of the art direction when designing a banner.
“
Taiwan Designer
Although we have Roboto as primary typeface for in-app creations; we also have Shopee 2021, the font developed by the branding team. We were confused about which font we should use and how to use it.
“
How do we build the design assets that deliver reliable brand image to engage more users, and are easy to implement?
Defining
Success Metrics
Goals
Users are able to directly locate the product that they were interested with strong hierarchy.
Users are attracted to the promotions because they recognize the content of the banner.
Users purchase because the brand image genuinely reflects reliability and the quality of products.
Signals
Users spend less time sliding ups and down on the homepage.
Users click the banner directly and make a purchase.
More orders on Shopee Supermarket.
Metrics
Average clicking time
Conversion rate
Increasing rate of orders
Discovering
Competitive Analysis
Lazada
-
Strong primary color usage
-
Clear hierarchy
-
Visual motifs captured from logo
Tokopedia
-
Consistent color usage
-
Focus on products, less decoration
-
Consistent icon style
Carousell
-
Clean background
-
Simple icons
-
Large banner headline
eBay
-
Strong hierarchy
-
Image as main visual
-
Focus on products
Discovering
Finding the North Star
After studying apps in competing spaces in the initial phase, we learned how they categorize and present the products, and how they differentiate themselves.
It was evident that brands like Lazada and Tokopedia had recognizable brand identities and displayed items clearly. By contrast, it was relatively difficult to recognize the brand on Carousell and eBay.
After mapping the competitors on a 2x2 matrix, we found out our current state and goal state.
Defining
Design Direction
Create Basic Components
Develop the design assets that can be easily applied to different situations.
Build up Art Direction
Illustrate the guidelines that designers can refer to and create consistent artworks.
Deliver Clear Message
Deliver simple information to end users by demonstrating how to construct copywriting on creations.
Convey Clean Visual
Keep the artworks as fresh as possible by using solid colors and avoiding too much decoration.
1
2
3
4
Designing
First Prototype & AB Testing
We ran an A/B Test, with 20 visitors who saw each variation to spot whether the proposed design would receive more click rates than the original design.
Goal: Banner on the top of the homepage to get more clicks.
Hypothesis: Simplify the design and emphasize the products, and the click rate will go up.
Looking at the result, the click rate of variation B was significantly higher than variation A. Therefore, the B version met our threshold for effectiveness, and proved the hypothesis.
Designing
Asset Toolkit
The following are the key assets developed based on the previous research and feedback, including the directions of color usage, typography layout and imagery resources. These elements played a vital role in messaging across artworks.
Designing
Color
The color palette is inherited from Shopee but extended with different saturation, in order to remain consistent with Shopee Supermarket and be implementable in various scenarios.
Primary Colors
Light Blue Scheme
Specialty Colors
To be used on seven specific marketing and product categories, ex: The Women’s & Beauty category uses Shopee Orange or Shopee Red color schemes
Designing
Typeface
Shopee 2021 is the primary typeface of Shopee Supermarket creations. It is derived from the signature Shopee logo to represent the vibrant and colorful image of the brand.
There are two suggested type pairings for Shopee Supermarket artworks:
-
Shopee 2021 Bold is recommended to be paired with Robots Bold in titlecase
-
Shopee 2021 Black can be paired with Robots Bold in uppercase
Type Pairing 1
Type Pairing 2
Designing
Imagery
1. Icon
Light Blue and White colors are set as default colors for icons in Shopee Supermarket. When the icon is contained inside a circle, the diameter of the circle can be determined by doubling the width of the icon.
2. Illustration
Create engaging stories with real-life scenarios and visual narratives that draw in our community. Use Light Blue Scheme in brand-related elements, including supermarket staff, trucks, delivery boxes and stores.
3. Shopping Cart
Captured from the logo, the width of the graphic can be adjusted according to designers’ needs. The graphic is recommended to be used as background visual.
4. Vouchers & Coins
Vouchers and coins are a tertiary element, constructed by flat shapes and solid colors in various aspects. Designers can utilize them freely based on creations.
Icon
Illustration
Shopping Cart
Vouchers & Coins
Designing
Final Design & AB Testing
We ran the second A/B Test with 6 users choosing which design exhibited specific brand qualities out of four pairs.
The testee chose the designs they thought were fit the following brand traits:
Reliable, straightforward, recognizable
Looking at the result, the selected rate of the B series was substantially higher than the A series. Therefore, the B series was more recognizable to users and serve the goals we set.
Six testee
Four pairs of comparison
A1
B1
A2
B2
A3
B3
A4
B4
Designing
Impact
With the guidelines and design assets, we built a consistent and reliable brand image that was recognized by users. Customers were able to locate and purchase items easily with the cleaner visuals.
clicking time
25%
conversion rate
35%
orders
20%
Reflection
Improving People’s Lives
The renewed brand identity distinguished the brand and increased its popularity among users. Individuals could purchase authentic products more safely on the e-commerce platform instead of from street vendors.
Designers Work More Efficiently
The direct users of this project were designers in different markets who implemented the guidelines. Seamless communication throughout the project ensured that the final design assets were handy and enhanced their work efficiency.
Leveraging the Team’s Strengths
My colleague and I collaborated smoothly, leveraging each other's strengths. After aligning the project goals, she focused on illustrations while I concentrated on defining guidelines and other visuals. We developed content we were proud of in the end.