Main Tasks
- Designing & curating UI components.
- Writing, curating & designing contextual examples of best use of design system components.
.png)
MOBI is a SAAS company that primarily enables its clients to order digitally through a white labelled store front. The company is a B2B2C where they aren’t typically known to their users as their store fronts are usually under the guise of its clients branding. The idea of a design system came about because of the need to scale the skills of the design team to the rapid growth of the company. MOBI is a company that is customer facing in its white labelled store front and business facing in its admin controls of said storefront, due to this period of growth we were working on a lot of admin controls to make it easier for franchises to manage their storefront. While these controls were smaller in scope, shear number of admin related projects considerably ate into the design team’s time and ability to focus on the larger projects.
For this project I over saw the design, curation and research of best use case components to be implemented into our design system.
- Designing & curating UI components.
- Writing, curating & designing contextual examples of best use of design system components.
How might we design at scale to enable developers and product mangers make intuitive UI decisions without much oversight from designers?
- The inefficiency of having to create new components every time new UI is needed in our admin controls.
- Inconsistent UI patterns being established for both our internal and client facing controls.
- Bloated work going to designers that can be intuitively solved by other team members.
- Developers
- Designers
- Product Owners/ Managers
MOBI’s colour system was designed to accommodate a wide variety of component states and variants. State is typically displayed with varying a colour’s tone, where as variants will use a different lock up of colours all together. All components governed by contrast ratios that are key to ensuring both WCAG compliance as well as correct weighting when trying limit cognitive load.
MOBI’s colour system uses three values to represent its luminance and transparency. The first value represents luminance, with higher values equaling darker tones of the selected colour. The following two values represent the colour’s transparency, this value can reach a percentage of 99.
Elevation is a technique employed to minimise complexity on screen, it is most commonly used for progressive reveal and interaction. MOBI’s elevation system emphasises the z-axis with shadows to create a layering effect. The layering of interfaces helps to reduce page scroll and increase scan-ability by only revealing specific controls through key interaction points.
MOBI’s design system features a set of selection controls (Radio, Switch & Checkbox) for handling boolean types of user inputs. For other kinds of inputs that use values and strings, the design system has form fields with alternate variants and states to clearly communicate the expected data required.
An unexpected outcome of this initiative was that the Figma document enabled product owners and managers to engage and draft their own solutions thus making them a little less reliant on communicating all details through text. As a result of this interest I expanded the capabilities of the doc to also present explanations and diagrams of correct usage of the component types. One product owner in particular used the design system to design an onboarding tool for new clients, which ended up being built and implemented into the Admin Portal.
Typically a design system sits between design and engineering teams to improve velocity and maintain consistency. However from our discovery we found there was a need from users who weren’t savvy with design tools. These users wanted a better method of communicating their ideas and solutions. Our goal now was to empower people in the organisation who have touch points with design but don’t feel like they have the agency to execute on their intuition. The Utensils Design System creates a framework for developers and product teams to make reasonable assumptions based industry knowledge imparted through these files. MOBI’s design system is broken up into two parts, the first are the Figma files for product managers and other designers, the second is the Storybook app for developer use.
A tool to help un-managed clients onboard themselves. The Set Up Helper checks and validates key information required for a new head office to get their storefront online.
An internal tool for developers and support to provide each with more contextual information around managing enterprise client head office’s.
A theming tool for unmanaged clients to style their storefronts with a GUI in a few easy steps.
This project was a self directed initiative by myself and two other developers where our ultimate goal was to improve development experience and cut down on design time. After reaching the point where we had built up a substantial library of components, designers were now only required for oversight and sense checking of smaller projects. Developers also now had access to this library which cut down cycle time on tickets in their backlog.