Apricot Pls

PROJECT OVERVIEW

Design a component library and styleguide for APRICOT.

This was created to enforce consistency and be able to create rapid designs with reusable components, text styles, icons and components. It also is a source of truth and reference for the engineers to use.

ROLE

Sole Product Designer

Product Design, Visual Design, Branding, UX/UI design, Prototyping

Initial Problems

When I joined the APRICOT team, the very first thing I noticed was the platform's UX and UI. Their Brand Book used the words Savvy, Bold, Innovative, Editorial and Sophisticated but their designs were primitive and super barebones. The designed looked loud and APRICOT is BOLD, not LOUD or chaotic.
‍
I gathered some inspiration and competitor analysis and presented to the CEO how APRICOT presented itself and how it COULD present itself.

This was the opportunity to design a digital experience based on APRICOT's brand principles and to transform a general template to a deliver sleek and bold experience that is more engaging for users.

Initial Problems

There is a disjointed experience from the Portal (where users add products, edit their collection, and view's their stats), and the Shopping Experience (Collection pages and checkout experience). Confusing information architecture makes for a poor user experience.
The lack of styling makes the designs look primitive (Wordpress-like) - super barebones which is understandable for a product was is just created and has not launched but can use improvement.
Lack of sense of hierarchy.

High Level Goals

Revamp with minimal amount of effort without having to start from scratch and save developer time.
Build a digital ecosystem while having a considered, seamless, and distinct design that sets it apart from its competitors.
Create a UI kit and Styleguide for consistent and sleek designs.
Create a UI that demonstrates the tone of APRICOT: Savvy, Bold, Innovative, Editorial and Sophisticated.

How can we create a platform that portrays the artsy and editorial side of APRICOT while still being a clean and sleek ecommerce product?

Creating a Component Library

The primary APRICOT color was bright and while it was used for CTAs it was also being used for error messages which is very confusing for a user. I muted the signature APRICOT color so it could be more inviting, friendly, and differentiated from the error color which is now red.

Implementing the Styles

I updated the current designs with the new UI and styleguide I created: utilizing the canvas color we have, lowering the saturation of our Apricot color and cleaning up the UI. Overall it started looking cleaner and provided more whitespace.

Takeaways + Next Steps

1. Simplicity is key
As a designer, we have a tendency to want to design by gorgeous and out of the box designs. However, we have to remember the ‘why’. We must understand our users, their problems and solve for it WITH design.

‍2. Being realistic
Being realistic about the timeline was important to know how long a UX overhaul would take. Both engineer and design work would take several months but would ultimately generate revenue for APRICOT which is the priority.

‍3. Listen to your users
Prioritize testing and user interviews in order to save time and effort.