Form
Contact us
Drop us your message!
Thank you! Your submission has been received!
Call us
Monday to Friday 9:00am to 5:00pm
800-345-678.
800-345-678.
SUPPER: High-End Food Delivery Connecting Merchants, Consumers, and Drivers
Background
SUPPER was at a UX Maturity of level 2.
No UXR
No Component Library and Design System and documentation
No legacy or existing designs to refer to
Not customer focused
Little to no data analytics
The engineering team lacked understanding on how visual design affected usability and they initially did not think the products required improving.
Approach
Through weekly meeting with developers, 1:1 conversations with stakeholders. I helped prioritise components and communicate naming conventions to developers.
I focused on research on colour psychology, implementing findings and documentation on how to use components whilst another designer helped to create the component variables.
Outcome
Once components were clearly defined, developers and QA engineers were no longer frustrated and confused. They asked me less questions and they gained greater belief in what they were building were correct, I no longer needed to do design quality check and less tickets were raised.
84%
Developer's time saved
My Role
Daily responsibilities
Involved tasks found across roles of Product Owner, Product Manager, Product Designer, UX/UI, and User Researcher.
Experienced
Working in-person and remotely with an engineering team change.
Gained
Skills in managing up, collaborating at all levels, and learning from a broad team.
What I enjoyed
Autonomy, creative freedom to discover and work cross-functional work with customer services, design, engineering, marketing, data analysis, and business.
Involved tasks found across roles of Product Owner, Product Manager, Product Designer, UX/UI, and User Researcher.
Experienced
Working in-person and remotely with an engineering team change.
Gained
Skills in managing up, collaborating at all levels, and learning from a broad team.
What I enjoyed
Autonomy, creative freedom to discover and work cross-functional work with customer services, design, engineering, marketing, data analysis, and business.
My work journey summarised in 4 points:
I started as their First Product Designer hire
Established the function of design at the company
Became Lead Designer for all four products
Managed and prioritised the product backlog
The Team I Worked With
Ian Warner
CTO (2023)
Eduard Lazar
CTO (2022)
Peter Georgiou
CEO
Arabella Wentworth Waites
Head of Marketing
Catherine Levins
Head of Partnerships
Christian Black
Head of Sales, Corporate
Hossein Ojaghi.
Senior Frontend Developer
Ion Olaru
Flutter Developer
Vladimir Baumgartner
Software Engineer
Branimir Bibic
Lead QA Engineer
Vukaskin
Backend teamlead & roftware engineer
Alireza
Product Designer
Marko Kantardzic
Junior Flutter Developer
Hesam Heini
Full Stack Developer
Problem
Inconsistent & Fragmented Products
hOW THIS AFFECTED CUSTOMERS & Customer support
Customer support overwhelmed by volume of calls asking for help to make or cancel an order.
hOW THIS AFFECTED restaurant partners support team
Dealing with daily calls from restaurants
62% of restaurant partners' staff struggled to read what food orders were received on the handheld POS device SUPPER Restaurant app and were unclear each button meant.
Restaurant support staff were spending significant time everyday with restaurant staff to resolve issue, so they worked over time everyday to catch up with high priority tasks.
Impact on Engineering and business
Increased costs due to unnecessary expenses and waste
Multiple variations of icons, font, colours and components created at every sprint, at times inaccessible.
No single source of truth.
Introduction of new bugs in every production, creating more technical debt.
Slow development, QA and business growth.
Low morale and blaming culture.
hOW THIS AFFECTED restaurant partners support team
Dealing with daily calls from restaurants
62% of restaurant partners' staff struggled to read what food orders were received on the handheld POS device SUPPER Restaurant app and were unclear each button meant.
Restaurant support staff were spending significant time everyday with restaurant staff to resolve issues, so they worked over time everyday to catch up with high priority tasks.
hOW THIS AFFECTED restaurant partners support team
Dealing with daily calls from restaurants
62% of restaurant partners' staff struggled to read what food orders were received on the handheld POS device SUPPER Restaurant app and were unclear each button meant.
Restaurant support staff were spending significant time everyday with restaurant staff to resolve issue, so they worked over time everyday to catch up with high priority tasks.
Me and the engineering team simplified the UI by:
Refactoring selected code
APAC accessible, standardised colour combinations, future-proofing all products for (WCAG) 3.0 guidelines.
Reduce typefaces from 5 to 1 type
This increased page loading speed by 24%.
Light and dark mode
Customer App
5 out of 10 customers found it difficult to view menus in dark mode.
Restaurant App
60% of waitresses and managers found dark scheme and 12px typeface hard to read in dim lit restaurant interiors. A light scheme was created and tested, resulting in positive feedback and improved usability.
5 out of 10 customers found it difficult to view menus in dark mode.
Restaurant App
60% of waitresses and managers found dark scheme and 12px typeface hard to read in dim lit restaurant interiors. A light scheme was created and tested, resulting in positive feedback and improved usability.
Socialising the new Design System cross-functionally
Collaborated with marketing to improve E-mails & Push Notifications
We agreed on a cohesive tone for the copy, making it short, simple, and clear. This reduced customer frustration and lowered the number of customer service inquiries.
Engaged stakeholders
In elements which were relevant to their concerns, facilitating smoother adoption.
We agreed on a cohesive tone for the copy, making it short, simple, and clear. This reduced customer frustration and lowered the number of customer service inquiries.
Engaged stakeholders
In elements which were relevant to their concerns, facilitating smoother adoption.
Reusing components
Identifying existing HTML/CSS components developers helped optimise development time and informed the future roadmap.
Simplify all image assets using 1 aspect ratio instead of 3 to:
- reduce card height to increase number of menu items visible
- reduce scroll fatigue
- reduce development time (considering we only had 5 developers and 1 QA)
Before
3 different aspect ratios
After
1 aspect ratio
The Design System Was Applied To
B2C customer web & app
B2B restaurant app
Internal customer management website
Marketing and communication to customers
Content design incl. UX Copy, language and tone
.png){kind=small}