top of page
Frame 427319584-min.png

Redesigning the brand visual, design system,
and user interface of the APP for See's Candies.

My Role
Team
Clients
Duration

Branding Design

User Interface Design

Solo project

See's Candies

(Potential)

8 weeks

Context

Problem Space

See's Candies is a renowned brand that produces high-quality chocolates and sweets. However, the shopping experience on the APP and website is not as pleasant and smooth as their delicious chocolates.

Solution

Old Design

My Design

Problem Analysis

Design Crituque

Because of

Homepage

Side bar menu

Product page

Check out

original UI 01.png
Frame 4.png
Frame 3.png
Frame 5.png
Frame 2.png
1. Inappropriate spacing & bad Consistency

The banner occupies 2/3 of the entire screen space, and with 8 inconsistent designed icons on the page effect the aesthetic.

2. Messy hierarchy & colors
3. Low accessbility on purchasing
4. Narrow spacing & excessive text

Overlapping info with the navigation bar, and the colors between the clicked and unclicked objects are too similar.

There is no "Add to Cart" CTA button available for directly adding items to the cart, customers have to take an extra step when purchasing.

Redundant info and text on the checkout page as well as inappropriate leading and spacing causes bad readability.

User feel
1. Incovenient to access more information
2. Confusion when navigating
3. Bad shopping experience
4. Orderless info lead to more hesitation

It's relateively inconvenient for customers to reach the ichoices and feel confused with 8 icons on the screen.
 

The extra information and the similarity in colors can easily lead to confusion when navigating for the customers.

When customers have to take an additional step to add products may reduce their willingness to make a purchase.

The unorganized info can potentially prolong customer purchasing stage leads to more hesitation time for the customers.

Design Process

Design Strategy

The current design elements, including icons, color palettes, and type fonts, have imitated improvements in the user interface. To optimize the shopping experience, a redesign of the brand image and design system is essential, aligning it with modern online shopping trends.

01.

Stay vintage but infuse modern styles

As See's Candies is a historic brand founded in 1921, I have decided to preserve the iconic checkerboard pattern as a vital part of the brand's identity.

01.

Create designs that resonate with the target audience.

While See's Candies has its roots in the 1920s, I chose the 80's style to connect with younger generations, particularly Gen Z and Millennials, who represent the most potential customers.

01.

Keep it simple & easy to navigate

Improve visual consistency, and make the interface and user flow simpler to bring a better shopping experience that can potentially increase online sales.

Rebranding

1. Mood board

With See's Candies' uniqueness and appealing stories. I developed a mood board that conveys a vintage, classical, young, and playful aesthetic while retaining its signature checkerboard pattern.

moodboard_typefont.png

2. Logo Design

I created a fresh logo utilizing a contemporary 80s-inspired typeface to highlight the retro aesthetic. The font's curved details enhance the brand's groovy and playful vibe.

3. Style Guide

Following the logo design, I proceeded to develop a coherent brand identity by crafting a style tile. The newly selected brown color palette is intended to stimulate the viewer's chocolate cravings.

style tile.png

Logo

Color Palette

Typography

Package Design

Box_Mockups_OK_3.png
See's packaging .png

Interface Redesign

1. Free up the space

- Resize the banner and use a carousel-style layout on the category section to create more space for important content such as best sellers.

- Craft the new icon utilizing a minimalist line style and streamlined the total number of icons.

2. Simplify & unify icon style

3. Increase hierarchy by colors

- Establish hierarchy and use a high-contrast color palette on the sidebar menu to enhance legibility.

01 homepage.png
Homepage
Menu open.png
Sidebar menu
Product Page
Filter

4. Improve shopping experience

- Incorporate the "Add to Cart" button to allow an easier shopping journey that could lead to higher conversion rates.

5. Clear CTA btn

- Make the CTA button remains fixed on the screen to enhance accessibility for adding products to the cart.

6. Wishlist feature

- Add a wishlist feature to offer customers a space to save items they are contemplating which enables a higher chance of adding them to the cart.

Product Info
Wishlist
06 Bag-cart1.png
07 Bag-cart2.png

7. Hide unnecessary information

- Hide the information that does not need to be seen at first glance to leave enough blank space that makes the customers feel more comfortable.

Check out

Reflection

User Feedback

The clean and simplified interface of each screen brings a sense of joy to test participants as they navigate and shop on the app.

"The space between each section and the texts makes the visual look more comfortable when using, as well as the colors, love the new brown palette!"

- Tester 1

"It's easy to navigate but I would like to explore more pages, and it would be nice if I can actually click on the button to add the product to the cart."

- Tester 2

Space for improvement

Given additional time for the project, I would eagerly expand the number of interfaces and prototypes to enhance the overall purchasing experience, ensuring it feels complete and satisfying.

Additionally, I would also put some effort into designing the transitions, adding a touch of excitement for the users.

Next project

Next project

Redesign the branding element and mobile APP to leverage user experience for customers.

Revamp Zynga poker's lobby screen to enhance player engagement.

bottom of page