Bigcommerce Control Panel Pattern Library & Redesign

Elevator pitch

Bigcommerce is an ecommerce platform - shopping cart software that lets users set up an online store. The control panel UI was outdated, lacked consistency and used many different styles, so an overhaul of structure and style would improve the user experience. 

 

My role

Visual design, user experience design 

 

Pattern Library

As a first step on the path of removing styling inconsistencies (and ensuring new ones weren't introduced), I audited every interface element in the existing control panel. First I removed any doubled-up elements that had the same function but different designs. Then I replicated each element on a pattern sheet in Sketch. 

The final pattern sheet had hundreds of interface elements, from buttons and navigation items, through modals, banners, notifications, empty state patterns, a huge icon set, many different kinds of form fields and inputs, alerts, navigation patterns... and so much more. All elements were fully editable. This became a great time-saving tool for anyone making wireframes or designs, and also acted as a map of our interface, so nobody spent time designing a new element without realising we already had a pattern for it (an issue that was occurring unfortunately often). 

 

A very small sample of the existing control panel elements audited and recreated in Sketch.

 

The next step was to use this as a basis to redesign each atomic element using our new design language, to become part of a living Pattern Lab, built on the Foundation framework, that would eventually style all of the Bigcommerce platform. Together with the design team I redesigned elements of the application, from atomic elements to small sections and interactions and up to whole pages.

 

 

When creating a password, an inline form validation tooltip provides helpful information when it's needed most.

 

Detailed specifications for how to present a critical warning confirmation modal. UX specifications should include not just the what, but also the how and the why

 

Element specs should account for all possible scenarios, and the more information and context, the better. 

 
 

 

 

Concepting the workflow when adding product images. Clicking on Upload Images would bring up a modal window with options to upload images, use pre-uploaded images, use images from web, or link a Youtube video. The whole section would act as a drag and drop landing if drag was detected.