Discovery

Analysis of the existing website

Upon joining the project, the client needed to update the existing platform for several reasons: first, the platform was outdated based on the brand guidelines; second, users reported a lack of guidance throughout the experience; and third, there were additional new features in the pipeline.

Understanding the new features

The platform aimed to integrate new collaborative features, AI functionalities, and overall, enhance storytelling to better guide users to the resources they require. Understanding the existing website components and identifying necessary additions was essential.

Define

Define a platform

The original website screens were created using Sketch App, so initially, I retained the same tool to align with the team’s familiarity. However, after some months, I successfully advocated for the transition to Figma, highlighting its advantages as an evolving platform. The emerging design system, initially established in Sketch, was migrated to Figma, greatly simplifying the designers collaboration and the delivery process for the development team.

Define a nomenclature methodology

The crossroad of whether using atomic design, foundations or other system, arrived. After discussions with project colleagues, Foundations was chosen.

Design

Map all the needed components

Mapping out all the necessary components was the initial step. To enhance organization and track progress effectively, I created a matrix listing all components along with their required variations, including sizing considerations for different devices.

Start crafting the components

Utilizing the list of required elements and the branding guidelines as my foundation, I began crafting the components within the system. I paid close attention to the structure, modularity, variants, states, accessibility, and responsiveness of each component.

Lead the rest of the construction

At this point, I assumed the role of design lead overseeing a team of 6 designers specialized in various design disciplines. My new responsibility was to impart best practices and skills to ensure the continued development of the design system (among other design tasks). Leveraging the diverse talents of the team, we were able to introduce new visual compositions and illustrations into the design system.

Validation

Testings

These components were tested on multiple usability testings that I ran to validate decisions regarding the overall platform design. Through these tests, we gathered valuable insights into how users perceived and interacted with the various components. This enabled us to make necessary adjustments and iterate where needed.

Implementation

Handoff

The components were gradually handed over to the development team within the Figma tool itself. Additionally, certain functionalities of the components were prototyped to provide the development team with a clearer understanding of their intended functionality.

Iteration

New features on figma

Due to the evolution that Figma experiences every year, with new and better functionalities, the design system is constantly being updated, with better constructions features that enables an easier and more realistic experience.