Mallcomm design system
Mallcomm is the leading retail proptech 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 our clients better communicate with their 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 includes a web and mobile app, and a customer-facing white label app.
As the platform had grown quickly, there were design inconsistencies across systems and branches of the software that supported bespoke or defunct functionality. My challenge was to unify the existing components within a design system, with a route to WCAG AA compliance.
As the platform had grown quickly, there were design inconsistencies across systems and branches of the software that supported bespoke or defunct functionality. My challenge was to unify the existing components within a design system, with a route to WCAG AA compliance.
Role:
Design System
UI
UX
Design System
UI
UX
In house:
Mallcomm
Mallcomm
Year:
2021—2022
2021—2022
Calmning 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
The team made the move from Adobe XD to Figma, enabling everyone to work collaboratively and easily access designs across the company.
During the move to Figma, 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’ (i.e inconsistent typography, sizing, or colours throughout a design).
