E-Commerce Design System for Bodymod

At the beginning of the project, it was decided to test the existing styles to identify any potential issues.

Through this testing, problems with the contrast colour ratio of key elements, such as buttons and links, were identified.

A Colour Palette was developed for the Bodymod Design System, which includes saturated, neutral, and alpha colours. The colours were tested for contrast colour ratio to meet WCAG standards and were also categorised by roles for easier navigation on the website, as well as to streamline internal workflows within the company.

The colours were created as local variables in Figma and grouped based on their role. This approach allows for global changes, significantly speeding up the workflow within the company.

The Brand Yellow colour was slightly adjusted during the process. This decision was made because the previous yellow, when combined with black, appeared orange. The new, brighter yellow achieved a bolder and more modern tone, better reflecting the brand’s values.

The font used for Bodymod is Nunito Sans, applied to both headings and body text. This typeface is a Google Font, supporting 627 languages, making it ideal for an e-commerce site with a diverse range of languages.

The challenge was the lack of guidelines for using different font weights and styles. As a result, a decision was made to create specific styles for headings, call-to-action elements, and body text, along with adapting them for mobile devices.

The font used for Bodymod is Nunito Sans, applied to both headings and body text. This typeface is a Google Font, supporting 627 languages, making it ideal for an e-commerce site with a diverse range of languages.

The challenge was the lack of guidelines for using different font weights and styles. As a result, a decision was made to create specific styles for headings, call-to-action elements, and body text, along with adapting them for mobile devices.

The grid system was created to ensure a flexible and consistent layout across the platform. It was designed with three main breakpoints—desktop, tablet, and mobile—to ensure the best experience across devices.

The grid also features column spans and offsets, allowing for better control over content placement and alignment, while maintaining a balanced and responsive design. This approach makes it easier to scale and update the design as the content evolves.

For consistent spacing across the site, space units were defined to maintain visual harmony and alignment. These units provide a flexible and scalable way to handle padding, margins, and gaps between elements.

The library was designed as Figma components using the Atomic Design methodology, ensuring flexibility and scalability.

Atomic Design is a methodology that breaks down user interfaces into smaller, modular components — atoms, molecules, organisms, templates, and pages. This hierarchical approach emphasizes building interfaces from small, reusable elements, which are then combined to create more complex components.

Some of the key UI elements created for the library include:

• Accordions

• Buttons

• Checkbox

• Dropdown

• Drawer

• Header

• Text Inputs

• Toggle

• Payment Methods

• Menu

• Modals

• Product Cards

• Radio Buttons

• etc.

Marketing banners are an essential part of an online store. A banner is a dynamic UI element, and its creation may involve various stakeholders, such as content creators, copywriters, designers, and marketing managers. It was decided to create marketing banner templates to optimise the workflow and reduce the time spent developing banners.

Based on the marketing team's needs, the following types of banners were identified and created:

• Banner with background image

• Banner with solid colour

• Split screen banner with text and image

In addition to the Bodymod Design System, the Bodymod Social Media Design System was developed. Built as Figma components with multiple properties, the system allows stakeholders to create on-brand content without the need for a designer.

This approach streamlines the process, enabling teams to produce high-quality social media content efficiently while staying aligned with the brand’s identity.