Toolkit: Sketch App

Type: E-Commerce

Timeframe: 1 month

 
 

MY ROLE

As a Lead Product Designer, I was responsible for the iteration cycle, ensuring that the company would increase online orders by reducing design inconsistencies and bounce rates. I was on a mission to decipher the solution through a iteration concept pitched to Jerry (Sept. 2018 to Nov. 2018).

 
 
 

PROBLEM

70% OF CUSTOMERS ARE RESORTING TO PURCHASE PRODUCTS THROUGH PHONE - WHY IS THIS HAPPENING?

The company was having a large amount of phone orders instead of online orders based on the 2018 data, which was puzzling for the CEO as he believed his website was simple to use. We discovered it was ultimately decreasing user engagement as drop-offs would occur at the landing page. This led me to go on a journey to identify the problem within the shopping experience.

 
 

TEAM & ROLES

 
0.jpeg

Deandra Sumitro | UX Researcher

Jerry.jpg

Jerry Zhou (CEO & Founder)

 
 
 

Preliminary research

WHAT CAN WE ANALYZE FROM THE HOMEPAGE?

To jumpstart the process, I conducted a website audit and discovered the following issues:

Wayfinding: Customers are having difficulty with navigation as it leads to different pages.

Filtering: Consumers are given uncommon options to filter their search and discovery.

Lack of personal content: A diversity of branding with each product is not displayed strategically.

Repetitive: The bestsellers (Galaxy Lollipops) are highlighted in each page.

 

 

USER RESEARCH

LEARN ABOUT THE COMPETITORS AND THEIR BRANDING

Jerry wanted Dean to compare SparkO with Sugarfina (main competitor), to speculate how the company executes online orders and branding. We discovered that partnerships and sponsored content drove Sugarfina’s website and social media to increase sales online and in-person stores. SparkO relied on recycled content and social media influencers to push their product on a customized post.

 
Comp Analysis.jpg
 

LEARNING ABOUT THE USERS THROUGH SOCIAL MEDIA

Dean and I took advantage of searching the company’s Facebook reviews and other social media platforms to understand the users journey and attention appeal with the product. Majority of the consumers range from 18 - 40 that choose to purchase or partner with SparkO because of their limited release and creative customizations. Below were the biggest takeaways:

Customer Service Transparency: Consumers value worth and continue to purchase from SparkO due to their excellent customer service.

Power of Influence: Specific influencers that are “creative-focused” can leverage their following and influence fans to purchase specific products SparkO has for limited relesae.

 
Screen+Shot+2019-02-02+at+8.03.52+PM.jpg
IMG_0297.jpg
 

SOLIDIFY OUR USERS/CUSTOMERS

From analyzing our cumulative research as a whole, Dean drafted the personas. SparkO has targeted the millennial market, but has reached to other scopes in the professional world. Our goal was to be inclusive to all consumers from creative to business professionals.

 
Sparko Sweets Personas.jpg
Sparko_Persona_1.jpg

 

Strategy

CREATE AN ENGAGING EXPERIENCE THAT ALLOWS USERS TO DISCOVER VARIETY

By redesigning the homepage, users will be engaged to a variety of SparkO’s inventory. From this, bounce rates would possibly be reduced due to the product being the highlight. The strategy was focused on highlighting each product as its own art form, thus driving interest and sales.

 

 

Information Architecture & DEFINING THE CURRENT EXPERIENCE

HOW SHOULD OUR CUSTOMERS FEEL WHEN THEY PURCHASE?

After our research, I sat down with Jerry to break down the branding he’s been striving for with his consumers. We bounced terminologies and finally solidified the experience that we both believed would be the potential solution. Consumers should be curious about the candy and relaxed as they checkout.

 
IMG_0247.jpg
IMG_0248.jpg
IMG_0246.jpg
SiteMap_General.jpg
 

From Jerry’s feedback, Dean and I created a site map of the original website and designed an alternate version of the navigation tab based on the breakdown session I had with Jerry.

 

 

Content

WHAT SHOULD WE SHOWCASE?

Knowing that the Galaxy Lollipops were the best sellers, part of the additions was to highlight the products in everyday settings on the website iteration. For the time being, we selected photography as a medium to be showcased in the site.

 
IMG_0260.jpg
DSC01983.jpg

 

IDEATION & Wireframing

HOW TO DESIGN AN EXPERIENCE THAT BRINGS CURIOSITY AND RELAXATION?

I started with exploring inspirations from other e-commerce sites and visual trends that portrayed similar tones.

Anonymous Dribbble Design #1: Color palettes surrounding the shoe pushes curiosity for consumers to explore different products.

Anonymous Dribbble Design #2: Checkout process breaks down items and clarifications prior to official purchase.

Nike’s E-Commerce Site: Allowing users to access inventory under one main category.

 
 

From identifying the key points of the designs, I drew my wireframes to push a similar function towards the redesign. Below were my main objectives to gauge for based on our user research:

Variety: Users can get a full view of different products and simply access its information on the landing page.

Accessibility: Creating filter options and purchase all in one page.

Inventory Access: Allowing users to search a wide variety of items instead of major bestsellers.

 
Desktop HD.jpg
ProductInfo.jpg
CollectionPage.jpg

 

FINAL DESIGN & STYLE GUIDES

WELCOME TO SPARKO SWEETS

The work Dean and I conducted was a valuable asset for the company to explore possible iterations and potentially rebranding itself. The biggest takeaways we learned was how data impacts our design decisions and our process, especially in the e-commerce space.

 
Homepage 1

Homepage 1

Homepage 2

Homepage 2

 

From the two homepages, consumers can click on the right to scale different types of candy and its description. The purpose for this was to build curiosity behind the products and what makes the customizations/flavors special.

 
Checkout 1

Checkout 1

Checkout 2

Checkout 2

 

Including a seamless checkout process to break down consumer’s cart to ensure the customer’s purchase is valid before official purchase. To avoid unnecessary content prior to purchase, this purpose was to ensure customers feel relaxed.

 
Style Guide.jpg

 

conclusion

WHAT’S THE AFTERMATH?

The company unfortunately didn’t move forward with the rebrand due to limited resources and funding during their busy season. Jerry greatly appreciated my assistance with this iteration as it was kept in their records. The biggest takeaway I greatly appreciate from this project was being able to lead a small agile team of 2 to tackle on a problem based on data.

The solution, however, was solved in their current site by restructuring the navigation tab, which helped the company reduced bounce rates by about 15% from Nov. 2018 to Feb. 2019 ever since it’s revision for both mobile and desktop platforms.

 
 
Screen Shot 2019-04-16 at 10.44.00 AM.png