The Source

The Source is a Canadian technology platform made up of businesses offering a wide variety of consumer products. To match the growing trends in UX/UI, I redesigned the website interface.

Year

2020

Tools

Adobe XD, Figma

Project Type

UX/UI Design / Web Design

Role

UX/UI Designer

Project Overview

Designing a multi-functional platform

I redesigned the product interface for The Source and developed a design system that would be adaptable, expandable and flexible as the platform grows and evolves.

Research & Planning

Differentiating in a dense, competitive landscape

A visual identity, marketing website, and web design had already been created before I began this project. These elements served as jumping off points for the development of the design system.

Competitive Analysis

The first step I took was to conduct a visual study of the Source's competitors to identify industry trends on how color, typography and layout impacts complex UI systems.

Platform Architecture

The IA and user flows were established before I started this project but had not been formally documented. I built a site map to help inform my decision making when designing each dashboard.

Design

Establishing a fresh, dynamic and scalable design system

With a clear scope of the competitive landscape, I developed a design system that was visually calming and easy to use though the following practices:

Design System Ethos

01

Minimal, purposeful use of color

02

Typographic hierarchy and contrast make important information stand out

03

Similar component layouts that repeat throughout the dashboards

Typography

Roboto was chosen for its classic, neutral, Helvetica-like qualities and it's legibility at small scales.

Color Palette

Using the red identity of the logo for the Source as a starting point, I expanded the color palette to create a more consistent and readable interface.

Key Considerations
  • Neutral shades help facilitate readability and consistency throughout site interface
  • Clear messaging is created via a bold red or black color choice
Buttons
Icons
Fields/Drop Downs
Modules
Alerts/Status
Tables

Final Dashboards

Designing for efficiency and easy collaboration

The final design aims to reduce the visual clutter typically experienced when using the original site to shop for products or view services. By consolidating these tasks into one consistent minimal platform, viewing products/services is easier, workflows are more efficient, and products are more organized for users.

Home Dashboard

Centralized hub to view all products and services offered in a more minimal and clean interface.

Shopping

Displays all products with filters and sorting to accommodate users preferences.

Sales

Along with the shopping section, the sales section features filters to display products relevant to the users.

Support

A support page created to organize all services and optimize support by implementing a search bar and options for users.

    More Case Studies

    Skinworks

    Kayla Hop Hing