Design
System
Redesign and
Evolution
PROJECT OVERVIEW
The Design System Redesign project comprised two main phases: firstly, expanding and organising the existing system, and secondly, creating components for Pierian’s website screens and implementing the redesigned system.
The old design system consisted of a limited set of elements, resulting in inconsistencies and inefficiencies in the design and development processes. This project sought to revitalise the design system by expanding its scope, refining its components, and improving its usability and effectiveness.
For the second phase of the project, the focus shifted to deconstructing each section of Pierian’s website page designs and creating reusable components to reconstruct screens. This approach aimed to enhance flexibility and efficiency in design iteration.
DESIGN CHALLENGE
My task was to expand and evolve Pierian's design system by creating additional components and variants and reorganising the existing components in alignment with brand guidelines. The goal was to offer greater options and flexibility. The challenge extended to creating components of the website screen designs and organising them within the design system for easier and more consistent design iterations in the future.
PHASE 1: RESEARCH & PLANNING
I began this project by reviewing the existing design system and brand guidelines to get an understanding of its current state.
As a primary user of the design system, I had identified specific pain points that required attention. Collaborating with my design team, I gathered additional feedback to pinpoint areas for improvement. This research helped me to understand the strategy for the redesign and what I’d need to prioritise.
Pain points:
-
Limited design tokens & components with only the very basic core elements.
-
No clear ‘how to use’ guidelines.
REDESIGN PROCESS
After reviewing the design system, I started to go through our website page designs and look for any design elements that were missing on the design system. For instance; we had a small selection of buttons but I noticed there were a few we had on the website screen designs that didn’t yet exist as button components on the design system, so I created a bigger range of variants for the buttons. We also had a very limited set of client/brand logos that we needed during the website relaunch process to support case studies. We didn't have sufficient logos in the design system so I created a comprehensive set of of logo components. This would allow more flexibility and efficiency for future design projects.
I then began to organise the design elements in to different pages based loosely on atomic design principles. I created separate pages for atoms then molecules and organisms to ensure ease when looking for elements.
Once satisfied with the layout and organisation, I proceeded to integrate brand guidelines and usage rules for each component to ensure correct usage of components.
I was really happy with the final outcome of the design system as it was much more organised and clear. The guidelines provide clear rules on the component usage which will help with future design iterations and each component has its own page to live in. This will help to make the components easier to find.
PHASE 2: RESEARCH
& PLANNING
For this next phase of the project, I needed to create components of all of our website screen designs. I started by creating a mind map on Figjam to help me determine the necessary pages and organise the components effectively.
DESIGN PROCESS
To simplify the design process, I added pre-existing components like buttons to appropriate locations within the website page designs.
I then started to identify where we had frequently used elements and I created components with variants for those. For instance: we had headers on most website pages so I created a header component with variants of all the different headers used. I repeated this process for elements like nav bar, footer and contact form.
Once I gathered all of the general components that were used across all website screens, I organised them in to the ‘molecules + organisms’ page.
I then created a Figma page for all website components and began to organise the correct components into their designated spaces. Using these components, I reconstructed the website screens.
Our design team had initially created the designs for the website screens fairly quickly, with little structure and organisation. I wanted my approach to help with efficiency and and make it so that it would be easier to manage the design system and update the website in the future.
RESULTS & IMPACT
Reconstructing the website screens not only helped to maintain consistency but also helped with finding components much easier. New pages or features can now be easily built using existing components and maintaining a cohesive design language throughout. It also improved collaboration within the team, as everyone could easily find and use the standardised components.
WHAT I LEARNED
Component Creation: I mastered the creation and use of components and variants in Figma, which improved my efficiency and design consistency.
Atomic Design Principles: I learned and applied atomic design principles, which helped me understand how to break down designs into reusable components and organise them.
Problem-Solving: This project honed my problem-solving skills. I learned that creating a design system is flexible and requires adapting solutions to fit specific needs and future challenges.
Brand Consistency: I delved into our brandbook and added rules to the design system on how to maintain brand consistency across all elements and components.
User-Centered Design: I focused on user needs, ensuring that the design system was easy to understand and use, avoiding overly complicated or disorganized structures. I wanted to ensure that future designers unfamiliar with our brand could easily navigate and use the design system.