Apricot Pls

PROJECT OVERVIEW

Create a UI Kit and styleguide for APRICOT. Create and manage a component library that constantly changes and updates.

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 developers to use when creating components.

ROLE

Sole Product Designer

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 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?

Updating the UI Styleguide

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 kit 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.