Jessica Brown • Lead User Interface Designer
Mallcomm design system
Calming the chaos with consistent design standards. I streamlined Mallcomm’s design process by creating a unified design system for their existing components, and launched internal guidelines for their white label app.
Skills
Design System
User Experience
User Interface
Agency
Mallcomm
Mallcomm
Role
Senior UX/UI Designer
Year
2021 — 2022
The Project
Context
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.
I joined as a Senior to address the existing gaps between designs produced and the live interface. The app had largely been developer-led, with the Lead iOS and Android developers influencing decisions like device parity, the accessibility of the interface, and the overall user experience logic.
Once I was onboarded, I started with a top-level audit of the existing app experience from the perspective of a property owner, property tenant, and visiting customer to identify quick wins across Mallcomm’s web and mobile app platform.
Over the course of a year I was responsible for
Calming the chaos with design guidelines
Working with account managers and lead developers, I created an internal white label guideline and design system for Mallcomm. We wanted to show clients the full capabilities of the Mallcomm platform, and ensure satisfaction through accurate app designs.
The aim was to:
- reduce time spent by designers recreating white label app designs from scratch
- document all possible component configurations in order to reduce amount of design defects
- document differences between the iOS and Android app builds
- establish the rules for what was customisable per component for a white labelled app, and which interface changes constituted a bespoke build
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.
The 2 style guides I produced for Mallcomm contained
- detailed screen annotations for component behaviour, interaction states and any noted OS differences
- guidelines for content and limitations, like character count and best practices for call to actions
- customisable properties per component
- required assets for app store launch
Making the move to Figma
Along the way, the team felt the restrictions of working within Adobe XD, so I played a key role in migrating to Figma. Central to my case was enabling the entire team at Mallcomm to access, view and share design files with transparent version control.
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 felt across the business, with reusable components and templated designs reducing design effort by 70% (i.e time taken to produce and handover designs to development) and reducing the amount of ‘UI defects’ in build (i.e inconsistent typography, sizing, or colours throughout a design).