Case Study

Robust Design System

One of the largest retailers in Australia

Challenge

When you’re a leader in one of the most fiercely competitive industries in Australia, every detail counts. Fabric was approached to build design guidelines for an inventory management system with over 100,000 users. The existing application lacked user journey optimisation and design consistency, adding hours to time spent learning and performing daily tasks. There was a need for an intuitive design standard that was easy for users to understand and for developers to implement.

No items found.
PRocess

Design thinking discovery

Stakeholders were engaged to frame the project scope and consolidate assumptions. This resulted in an aligned understanding of project definitions, objectives and priorities. We managed around conflicting schedules and created an adaptive and tailored set of workshops.


Contextual research

We kicked off with some in-store research to equip us with an in-depth, unfiltered understanding of user needs. The research provided a foundation to create user-centric designs. In the design phase, each iteration of designs was validated through in-store usability testing with over 30 real users.


Extensive application audit

In order to make scalable and robust design decisions the old application was audited to map out requirements and scenario variations. Hundreds of screens and dozens of components were analysed in order to consolidate best applicable patterns.

Proven design concepts

Multiple rounds of design concepts were explored to include typography, layout & grid systems, colour, tone of voice, sound data visualisation, composite components and more. Each round was validated both technically and with users to guarantee feasibility and ease-of-use.


Design system structure definition and documentation

The structure of the style guide was detailed and digitally documented in a webpage. In-depth usage explanations were written to accompany each element of the style guide.

Complete project transparency

Presentations were given to key stakeholders on a weekly basis. New findings and opportunities were conveyed and discussions regarding project direction occurred frequently.


No items found.
Solution

New mobile designs

Fabric produced mobile wireframes that implemented the new design system. These wireframes were used to validate the new design guidelines and optimise the current journey of key tasks.


Clickable prototype  

An extensive prototype was created covering the major user journeys of the current app. The prototype gave greater visibility to stakeholders and provided them with a tangible asset to help acquire funding.


Web-hosted design system

A comprehensive and componentized system that brought consistency to the entire app. The design guidelines outlined the standards, principals and rules that designers and developers should follow in order to improve the consistency of the application. Design assets were able to be downloaded and used to create mock-ups or inspect element properties.

No items found.
Results

Value proofed new features

The research based approach generated insights that warranted the need for new features. It also validated the impact of these features before they were implemented, this meant that features were able to be perfected without having to write a line of code. 


Tools for better informed decisions

Additional process issues and improvement recommendations were generated throughout the research process in the form of user insights. The business was given a clearer understanding of their users and more tools to make decisions.

Increased learnability reduces time spent doing tasks

By improving the learnability and optimising user journeys, Fabric was able to reduce the amount of time taken to complete a task. Change management procedures became less intimidating as tasks were able to be learnt by a range of users without the need for training.


Delighted Users

Users were visibly less frustrated with the new designs compared to the old state and praised the similarity to everyday design standards.

Streamlined design and development practices 

The presence of a style guide enabled easier design decisions in-line with user needs. It also sped up the delivery process by limiting the number of components used, making code reusable and maintainable.


No items found.

"I like how simple and easy the training designs are, it's better than running to a computer every time we need to learn something"

"I love that you have this action available from here, thank you! That's going to be so much faster"

Related CONTENT