Back to Home

SCBO

UI and Component

Library Design

A fully-responsive eCommerce website for newly launched home decor brand, SCBO.

Overview

Designed a fully responsive, robust, and multifunctional component library for an eCommerce website. Employed atomic design methodologies, starting from the smallest component levels, to establish user trust and ensure a consistent experience from load to checkout.

Applicable Skills

  • Atomic Design

  • User Research

  • User Interface and Interaction Design

  • Usability Testing

  • Branding

Design Brief

SCBO is an upcoming player in the home decor space. Their products place people first both in sourcing and in connecting with customers. The brand’s purpose is to offer well designed, ethically and sustainably sourced home decor items to complete one’s space.


As a newly launched company, SCBO’s primary goal is to establish trust with customers in a market dominated with big brands and bring them along for a meaningful journey when shopping for products that will enhance their spaces. To accomplish this, I was brought on to design a consistent and easy-to-use eCommerce experience for the brand.

The Challenge

It takes a lot to gain a customer’s trust and make them want to buy your product, especially in a world dominated by Amazon, which is responsible for almost 50% of all eCommerce sales in North America.


Furthermore, there are a lot of good things to say about the products that SCBO carries. However, in the world of convenience, even if you do gain a shoppers trust, there is a limited window of time to push brand propositions without disrupting their experience or simply having them leave your site altogether.

How can this be solved with UI Design?

Two unique problems. To even begin to solve them, I interviewed 5 people through an online survey to understand what trust even means to a consumer, and how it can be built. This question was asked:

What makes you trust a brand or website on the Internet?

  • “If the website doesn’t look well designed, that is an immediate no-no for me. I don’t like it when no one has put any effort into how the website looks, which is always the first thing I look at before buying anything.”

  • “When I know the story behind a business I tend to find it more trustworthy. If it is simply a place asking me to buy something, I get suspicious and do not want to buy anything.”

  • “If there is a blog or articles written by the company, I know that they have put the work in to understand the products they are selling.”

It became clear that content and consistency were paramount to gaining user trust. The design of the components reflected this key goal. In order to address consistency, a library built off of atomic design principles would allow consistent and familiar patterns to form within the interface. Beyond this, it was clear that apart from simply serving users products, they needed an effective way to learn and explore content on the site.

Laying the Foundations

I began working to understand the needs and purpose of the website from a business perspective and mapped out a low-fidelity wireframe of the 3 key pages that a user would interact with before purchasing a product:

  1. Home and Landing Pages

  2. Filtered Educational Pages - Category and Product Collections

  3. Product Pages

3 wireframes for main content pages

Incorporating Atomic Design Principles

With a general picture of the site, I mapped out which elements were similar to each other in both appearance and function; these would be the building blocks of the component library. Once I had a clear idea of what these would be, I began to create them, documenting a library in Adobe XD.


Examples of these building blocks included primary and secondary CTA’s, navigation elements, input fields, icons, as well as interactive elements such as radio inputs, dropdown’s, and checkboxes.

Pattern Library created in Adobe XD

Piecing it Together

Based on my previous user research, I designed the components with specific purposes that would better suit a user’s journey.

  • Full-Width Feature Banner

    Education and information were key user requirements based on the interviews I had conducted. As such, it was imperative that a component be designed to bring users closer to the information they most need, while still informing them at a glance. The Full-Width Feature Banner solved this problem for the customer by having a clear text hierarchy (headline, body), as well as a predefined CTA that would encourage the customer to learn more. An image accompanies this component to serve the user visually, providing cues just at a glance.

    Full Width Feature Banner Component
  • Product Cards

    One of the biggest challenges that I faced was the iteration of the product cards within a grid. One of the business requirements for these cards was that a direct add to cart button was needed. However, it took several iterative versions of the same functionality and intermittent user-testing to land on a solution that was easily understood by users without overcrowding the minimalist appearance of the website.

    Full Width Feature Banner Component

User-Centred Design Iteration

Wrapping it all up

The robust and multifunctional component library was just a part of the UI and Interaction Design that I completed for SCBO. Pages such as the Product Page leveraged the same foundational building blocks that the components did, contributing to an overall consistent, lean, and performant web application.


SCBO will be launching in early 2020. I will be working with the team to evolve the experience based on user feedback and performance.

Best Buy

Retail User Experience Design

View Case Study