The
Challenge

Chapter 1 –––––– WHAT NEEDED TO BE SOLVED

Design perspective

When I started at Fullscript, there was no existing website UI Kit/Design System.

Difficulty working efficiently as no component library was available, which created design inconsistencies that affected the brand and quality of our product.
Lack of time to implement best UI/UX practices
Spend too much time on designing instead of working on strategy
No defined libraries to support design productivity and efficiency
Difficulty doing fast iterations on website and landing pages

Dev perspective

There was a lack of foundation in the code base and many one-offs on our web pages.

Cannot implement best code practices
Pages were always built from scratch (time-consuming)
The website used many third-party hosts

My Goals

Chapter 2 –––––– WHAT ARE MY OBJECTIVES

In today's digital landscape, businesses increasingly recognize the importance of Design Systems to improve the efficiency and effectiveness of their design and development process and enhance the user experience.

Speed and Efficiency: By integrating pre-designed elements into the user interface, I will save time and resources, resulting in faster turnaround times and more efficient use of our time.

Consistency, Cohesiveness & Accessibility: By ensuring a consistent and cohesive user interface across all website pages and elements, I will improve the user experience, build trust in the brand, facilitate user navigation, and make accessibility a fundamental aspect of the website's architecture, design, and functionality.

Improve Communication and Collaboration: By establishing a common language and best practices, I will enhance communication and collaboration among developers, which will lead to a more efficient and cohesive workflow and a higher-quality end product.

Reduced Business Costs: Providing a library of reusable components reduces long-term costs; I will minimize the time and resources needed to design and develop new websites, landing pages, and features.

Results

TEAM & BUSINESS IMPACT

The design system was beneficial for many reasons :

It improved our team's efficiency, allowing synchronized work and faster delivery of new projects
Reduced business costs
Improved overall brand cohesion, resulting in consistent user experience.

Overall, the impact of the design system enabled our team to focus on innovation and user feedback to build a superior product.

Documentation

DESIGN SYSTEM / STYLE GUIDE

Website Foundation

Includes the foundation of our product

Accessibility, colour, grid, typography, spacing, overlay, icons, etc.

Website UI Kit

Includes elements and 60+ components:

Buttons, avatars, lists, tags, ellipses, input fields, etc.
Lightboxes, forms, modals, search, sliders, tiles, cards, banners, testimonial components, menu, search, tiles, footer, etc.

Takeaways

LEARNINGS

I learned that:

A design system is never truly complete due to the ongoing and evolving nature of digital products.
New design challenges across different projects may require updates or additions to the existing system.
Building the design system with an atomic approach has proven beneficial for the team.
The atomic approach fosters consistency, efficiency, and scalability across web projects.
This project enabled the team to pivot quickly when design iterations are needed.

My Process

Chapter 3 –––––– MY STEPS

To build and document the design system's components, guidelines, usage instructions, and best practices in a clear and accessible manner, it was important to make proper research as it would become a governance tool for effective utilization by all stakeholders.

01

Research and Analysis

I conducted thorough research and analysis to understand user needs, existing design patterns, and best practices within the industry (i.e. Microsoft, Apple, Material Design), gathering insights to inform the design system's development.

02

Design and Accessibility Principles

I established a set of design principles that aligned with the organization's brand values and followed the web content accessibility guidelines (WCAG) core principles, outlining the core guidelines and philosophies that will shape the design system.

03

Component Library and Inventory

I created an inventory of existing UI components, styles, and patterns used throughout the organization, identifying common elements that can be standardized and reused in the design system.

04

Testing and Iterations

I tested the design system's components and guidelines in real-world scenarios, gathering feedback from users and stakeholders and iteratively refining and improving the system based on insights and user feedback.

Design, Iteration & Collaboration

Chapter 4 –––––– TEAM COLLABORATION

I collaborated with developers to design and build the core components of the design system, ensuring they meet the defined design principles, are modular and scalable, and have consistent behaviours and interactions.

Implementation and Adoption: I rolled out the design system across website projects and teams, ensuring proper integration and adoption by providing training, support, and guidance to other designers and developers.
Maintenance and Evolution: I continuously maintained and evolved the design system by regularly updating and expanding its components, guidelines, and documentation based on user needs, technological advancements, and design trends.

Reduced Business Costs

Providing a library of reusable components reduces costs in the long run, reducing the time and resources required to design and develop new pages and features.

Consistency and Cohesiveness

To help to ensure that the user interface is consistent and cohesive across all pages and elements of the website, which improves the user experience. This consistency leads to increased trust and credibility in our brand and can make it easier for users to navigate the website.

Mobile-responsive Design

It has a responsive design that adapts to different screen sizes and devices. This allows our business to reach a wider audience and provide a better user experience.

Improve Communication and Collaboration

To establish a common language and set of best practices, which can improve communication and collaboration within the team. They lead to a more cohesive and efficient team and a higher-quality end product.

Speed and Efficiency

These pre-designed elements can be quickly and easily integrated into our website's user interface, saving time and resources in the design and development process. They lead to faster turnaround times and more efficient use of resources.

MY GOAL

MY PROCESS

1. Defined the purpose and scope of the design system; I identified the specific design elements I wanted to standardize, such as typography, colour palette, buttons, icons, etc.

2. Conducted research; by reviewing existing websites, design systems, and brand guidelines to get a sense of what worked and what didn't, I gathered feedback from developers, users, and other product designers to identify pain points and areas of improvement.

3. Created a comprehensive, transparent and easy-to-use style guide; this documentation outlined our design principles and standards.

4. Designed reusable design components; I used an atomic framework which made them flexible, modular and easy to use.

5. Tested the design components with real users and iterated on the features and style guide as needed.

6. Documented the design system thoroughly to make it easier to use and maintain. This also included information on how to use the design components, update the style guide, and maintain consistency across different teams and projects.

7. Implemented the design system across all our web projects and provided ongoing collaboration and training with designers and developers.

< IA Website Strategy

FS Website Redesign >

Developing a Design System to Improve Team Efficiency and Business Growth

My Contributions

Led and defined the purpose and scope of the design system
Conducted design system research (Material design, Microsoft, Apple, etc.)
Created a comprehensive, transparent and easy-to-use style guide
Built and designed elements and components following an atomic design framework
Tested design components with engineers and real users and made necessary iterations emphasizing accessibility and user-centric principles
Documented the design system thoroughly
Implemented the design system across all our web projects
Provide training to designers, peers, and engineers

Context
Founded in 2011, Fullscript supports over 70,000 health practitioners by providing a platform (SaaS) that can prescribe and manage healthcare's best supplements to over 6 million patients, all in one place. During COVID-19, the company witnessed hypergrowth and aimed to become a thought leader in the industry.

The Website struggle
Initially built by developers, the website presented many visual and UI inconsistencies, which affected not only the maintenance and scalability of the site but also the overall user experience, which impacted the company's credibility as a leader in the market.

My Role
As a Senior Product Designer for Fullscript, I developed the Design System for Fullscript's website.

Goal

Develop a Design system / Style guide that will enable designers and developers to collaborate more efficiently and become more productive and efficient. The objective is to provide clarity, consistency, and standardization, facilitate onboarding and collaboration, support maintenance and scalability, and serve as a governance tool for effective utilization by all stakeholders.

Fullscript

2021 – 2023

Team

PJ Zito (Senior Product Designer)

Dan Morton (Technical Lead)

Mirre Abdi (Front-End Web Developer II)

Chanthu Sasi (Front-End Web Developer)

Ryan Yuke (Senior Copywriter)

Tools

Figma, Crazy Eggs, WordPress, Storybook

Skills

UI, Atomic Design, System Libraries, Documentation, UI, QA

Curious to learn more?

HOW WE GOT THERE

More in-depth details about this project are available below.

The Challenge