Mogul Design Library

— MY ROLE
Collaborate on UI and UX for Mogul's
design system

— DATE
Winter 2021 – Spring 2021

— TOOLS
Figma

Mogul's component library was created in order to streamline and standardize the core product design process. Components were made with flexibility in mind, so they could be used in a variety of different scenarios. We also explored large, modular components for use in branded, white-label client projects.

ASSUMPTIONS

OBJECTIVES

• Flexible components will streamline the design of Mogul’s core product

• Modular, large components will make the design of white-label, client designs both more effective and more efficient

• Save time and resources on Mogul’s core product design

• Save time and resources on Mogul’s branded, client product design

• Average time and resources spent on designs for Mogul’s core product is decreased

• Average time and resources spent on designs for Mogul’s white-label, branded client projects is decreased

SUCCESS METRICS

Placeholder (wireframe) module based on the coming soon page we made for The Road to ReWired tournament series.

Modular (fully designed) version of the coming soon page we made for The Road to ReWired tournament series.

Below is a slideshow of several components from Mogul's design library - the first is a video showcasing the flexibility, modularity, and customizability of some of the components that we created.

Next steps

The components for the core product were put to use within the core Mogul product, but the modular components for white-label products have not yet been put to use.

If we had a chance to use them going forward, the modular components would serve as a base for white-label client projects. We could customize some of the elements within the modular components, as well as scale and adapt the modular components based on each individual white-label project.

⪻ previous projectNext Project ⪼