Product DESIGN

Makreting website

Working on my first ever Design system at Flexiple.

Working on my first ever Design system at Flexiple.

Company

Company

Flexiple

Flexiple

Time Duration

Time Duration

2 Weeks (to build the base Design system)

2 Weeks (to build the

base Design system)

Number of coffee cups

Number of coffee cups

☕️☕️☕️

☕️☕️☕️

Project Overview

Project Overview

The Flexiple website includes more than 20 unique webpages. Our goal was to maintain the same design language throughout the entire website. We focused on creating a consistent theme across all pages.


Therefore, we needed a Design System.

The Flexiple website includes more than 20 unique webpages. Our goal was to maintain the same design language throughout the entire website. We focused on creating a consistent theme across all pages.


Therefore, we needed a Design System.

Objective

Objective

When a website have huge number of paged the make concern is to maintain the consistency of elements across all the pages.




Here’s the summary of the goals & objectives of the Design System:-


➡️ Have a basic Design system which will set the design language of the whole website.
➡️ Provide consistent & reusable components across all pages & screens.
➡️ Make it easier for other collaborators to understand and adapt to the design system quickly.
➡️ Reduce the amount taken to design a new page/screen.

When a website have huge number of paged the make concern is to maintain the consistency of elements across all the pages.




Here’s the summary of the goals & objectives of the Design System:-


➡️ Have a basic Design system which will set the design language of the whole website.
➡️ Provide consistent & reusable components across all pages & screens.
➡️ Make it easier for other collaborators to understand and adapt to the design system quickly.
➡️ Reduce the amount taken to design a new page/screen.

Approach

Approach

This design system created the foundation for all Flexiple's digital products. It applies to both the marketing website and the web platform.


With our objectives in mind, I developed an Atomic Design system. This system serves both the marketing website and the web platform effectively.

This design system created the foundation for all Flexiple's digital products. It applies to both the marketing website and the web platform.


With our objectives in mind, I developed an Atomic Design system. This system serves both the marketing website and the web platform effectively.

Designs

Designs

Here’s are all the components created in the Design system



  1. Colors

  2. Typography

  3. Spacings

  4. Iconography

  5. Buttons

  6. Forms & input fields

  7. Pills

  8. Tags

  9. Tabs

  10. Tooltip

  11. Badges

  12. Breadcrumbs

  13. Dialog box

  14. Toast

  15. Filter box

  16. Progress stepper

  17. Table

  18. Pop-ups

  19. Drawers


Get a sneal peak of the design system from the file below ⬇️

Here’s are all the components created in the Design system



  1. Colors

  2. Typography

  3. Spacings

  4. Iconography

  5. Buttons

  6. Forms & input fields

  7. Pills

  8. Tags

  9. Tabs

  10. Tooltip

  11. Badges

  12. Breadcrumbs

  13. Dialog box

  14. Toast

  15. Filter box

  16. Progress stepper

  17. Table

  18. Pop-ups

  19. Drawers


Get a sneal peak of the design system from the file below ⬇️

Business Impact

Business Impact

2

Average page designed

in a day

With our design system in place, one designer can now knock out multiple pages in a day.

40%

Time reduced to

design a page

Ready-made components have cut down the time designers need to create new pages by almost half.

10-12

weeks required to

Make the website live

We managed to build and launch over 30 pages for Flexiple in just 10-12 weeks.