Mallcomm
Calming the chaos with a design systemRole
Design System
User Experience
User Interface
Agency
Mallcomm
Mallcomm
Role
Senior Designer
Year
2021 — 2022
The Project
Mallcomm is the leading retail prop-tech solution, providing their customers with an integrated platform to connect with stakeholders, tenants, and their customers. Used in shopping centres, workplace communities, and even airports, Mallcomm’s suite of features have helped their clients better communicate with tenants and customers, and manage their properties with increased efficiency.
One of my first tasks upon joining was to run an audit of the existing UI. The Mallcomm platform consists of a web app, mobile app, and a customer-facing white label app.
In my first month, I slowly became aware to the lack of parity between iOS and Android builds, as well as the gap between the designs produced and the actual code being built. My challenge was to unify the existing components within a design system, establish new patterns to improve the user experience, and identify a route to WCAG AA compliance.
Calming the chaos with design guidelines
Working with account managers and developers, I created an internal white label guideline and design system for Mallcomm.
The aim was to:
- reduce time spent recreating templated designs from scratch
- document all possible component configurations
- document device (iOS and Android) differences
- set the rules for what was customisable per component, or what constituted a bespoke build
With a consistent design system and guidelines, we could show clients pixel-perfect designs that would look and behave as expected on their device.
Though documentation isn’t the most glamorous of jobs, it’s one that’s vital for teams scaling up and transitioning into agile. This project opened the door to discussing how to make Mallcomm WCAG compliant and address underlying accessibility and UX issues within the platform.
Making the move to Figma
Along the way, we started to feel the restrictions of working in Adobe XD due to its limited features, so we decided to migrate onto Figma. With Figma, it was clear to see how designs could be more easily shared between developers and other stakeholders, and how the design system could be maintained and socialised.
During the migration, I took the lead in educating the wider team on how to use the software, setting up best practices for Mallcomm with a white label template for all new projects, introducing the design system, and creating shareable templates to encourage adoption across teams.
There was an immediate improvement with templates reducing design effort by 50%+ (i.e time taken to produce and handover designs) and reducing the amount of ‘UI defects’ in build (i.e inconsistent typography, sizing, or colours throughout a design).