cUSTOMER INTERFACE (DESKTOP/MOBILE) & COURIER APP (NATIVE MOBILE APPS)
Re-designing two interfaces (at the same time) for bookers and couriers
Re-designing two interfaces (at the same time) for bookers and couriers
From inheriting three over-complicated, poorly documented Figma files, with interfaces lacking usability and accessibility principles, to successfully testing and delivering two fully re-designed interfaces on top of a scalable Design System for each one of them
From inheriting three over-complicated, poorly documented Figma files, with interfaces lacking usability and accessibility principles, to successfully testing and delivering two fully re-designed interfaces on top of a scalable Design System for each one of them
0 ➔ 1
0 ➔ 1
Re-design
Re-design
Design System/UI
Design System/UI
Design System/UI
UX Research
Timeline
5 months
5 months
MY ROLE
Principal Product Designer
Principal Product Designer
Industry
Logistics
Logistics
TEAM & MAIN STAKEHOLDERS
Product Managers, Sales Team, Engineers
Product Managers, Sales Team, Engineers
Context & Challenge
Context & Challenge
I was hired at a pivotal moment when both user interfaces were being revamped to match the new company branding, so I inherited:
I was hired at a pivotal moment when both user interfaces were being revamped to match the new company branding, so I inherited:
3 designers
3 designers
3 Designers worked on 2 user interfaces without communicating, leading to inconsistent UX patterns, lack of visibility, and no design critique culture
Developers
Developers
excluded from feedback loops, resulting in siloed decision-making, no visibility and no shared goals or responsibilities
3 Figma files
3 Figma files
over-complicated and
poorly documented
No
No
integration with the front-end system
No
No
usability and accessibility principles
My main challenges as the newly Solo Product Designer:
My main challenges as the newly Solo Product Designer:
How to leverage rapidly the power of a design system?
How to leverage rapidly the power of a design system?
How to learn quickly about two completely different products when there's not enough documentation, and all other designers are gone?
How to learn quickly about two completely different products when there's not enough documentation, and all other designers are gone?
Find the right methodology to kick off the project and build good foundations on a tight deadline
Find the right methodology to kick off the project and build good foundations on a tight deadline
Implement a completely new branding and "make users happy" whilst accounting for resistance to change and cognitive load
Implement a completely new branding and "make users happy" whilst accounting for resistance to change and cognitive load
Be ahead of development so they were not blocked
Be ahead of development so they were not blocked
How it started
01.
AUDIT AND PREPARATION
Understanding the problem before creating a strategy
Understanding the
problem beforecreating a strategy
There are no quick solutions for problems you don't really get the grasp of, so the best approach was to research before coming up with a solid plan.
There are no quick solutions for problems you don't really get the grasp of, so the best approach was to research before coming up with a solid plan.
UX Audit and Research
UX Audit and Research
Conducted a thorough audit of the existing systems by mapping all journeys for both interfaces
Established clear design and accessibility principles, which would also enhance overall usability
Conducted extensive competitive analysis to understand the logistics landscape
Collaborated with front-end engineers to catalog existing components and their required states
Conducted a thorough audit of the existing systems by mapping all journeys for both interfaces
Established clear design and accessibility principles, which would also enhance overall usability
Conducted extensive competitive analysis to understand the logistics landscape
Collaborated with front-end engineers to catalog existing components and their required states
Workshops with stakeholders
Workshops with stakeholders
Led online workshops with stakeholders (using Miro and FigJam) to understand the main issues we had, from internal communication, lack of visibility and documentation, so we could improve our efficiency as a team
Led online workshops with stakeholders (using Miro and FigJam) to understand the main issues we had, from internal communication, lack of visibility and documentation, so we could improve our efficiency as a team
Interviewing customers in real life
Interviewing customers in real life
Interviewed customers and couriers (our users) to create some use cases which would guide me to make some core design decisions
Got powerful insights from seeing how users were interacting with the system on their own displays and environments
Interviewed customers and couriers (our users) to create some use cases which would guide me to make some core design decisions
Got powerful insights from seeing how users were interacting with the system on their own displays and environments
02.
THE APPROACH
Laying the groundwork & validating prototypes
Laying the groundwork & validating prototypes
I decided to use the Atomic Design approach. From early on, I focused my efforts by putting accessibility as a pillar of my Design Systems.
I decided to use the Atomic Design approach. From early on, I focused my efforts by putting accessibility as a pillar of my Design Systems.
Translated all my research into actionable designs for validation
Translated all my research into actionable designs for validation
Conducted usability testing by creating interactive prototypes to validate components and user journeys. Some other key methodologies I used:
A/B testing
Card sorting to improve Information Architecture
User interviews
Contextual inquiries
Stakeholder feedback
Conducted usability testing by creating interactive prototypes to validate components and user journeys. Some other key methodologies I used:
A/B testing
Card sorting to improve Information Architecture
User interviews
Contextual inquiries
Stakeholder feedback
Integrated cross-functional teams by fostering a collaborative culture
Integrated cross-functional teams by fostering a collaborative culture
Aligned both design and engineering teams on the shared goals of the product and the design system, ensuring everyone understood their role in the process, and setting the foundations for ongoing communication and feedback loops.
Implemented regular design critique sessions
Encouraged constructive feedback focused on the design's usability, technical feasibility, and how well it aligns with the system’s principles
Fostered an open and collaborative environment to ensure that all team members, including developers, felt comfortable offering feedback
Aligned both design and engineering teams on the shared goals of the product and the design system, ensuring everyone understood their role in the process, and setting the foundations for ongoing communication and feedback loops.
Implemented regular design critique sessions
Encouraged constructive feedback focused on the design's usability, technical feasibility, and how well it aligns with the system’s principles
Fostered an open and collaborative environment to ensure that all team members, including developers, felt comfortable offering feedback
03.
IMPLEMENTATION & DEV HAND OFF
Shared ownership with engineering
Shared ownership
with engineering
I worked closely with front-end engineers to ensure components (with behaviours and variants) were being coded in Storybook, providing all the documentation needed.
I worked closely with front-end engineers to ensure components (with behaviours and variants) were being coded in Storybook, providing all the documentation needed.
Design System roadmap, governance processes and iterations
Design System roadmap, governance processes and iterations
Created a roadmap of implementation based on Atomic Design, planning for upcoming changes or additions that would affect both design and engineering
Established governance for new variants and components, setting up a review process to ensure that new additions align with design system principles and consistency
Provided support for any questions or adjustments needed during development
Kept developers informed about changes to design guidelines or components
Created a roadmap of implementation based on Atomic Design, planning for upcoming changes or additions that would affect both design and engineering
Established governance for new variants and components, setting up a review process to ensure that new additions align with design system principles and consistency
Provided support for any questions or adjustments needed during development
Kept developers informed about changes to design guidelines or components
Outcomes
Outcomes
Design
Design
🤝
Development
Development
Design tokens
Design tokens
🤝
Scalability & Consistency
Scalability & Consistency
Usability
Usability
🤝
Accessibility
Accessibility
Governance
Governance
🤝
Design System updates
Design System updates
Collaboration
Collaboration
🤝
Feedback loops
Feedback loops
Delivered two scalable design systems, creating tokens to define core design values, following consistent patterns and accessibility principles
Delivered two scalable design systems, creating tokens to define core design values, following consistent patterns and accessibility principles
Improved usability by addressing pain points from previous versions, optimising flows for future features on the roadmap
Improved usability by addressing pain points from previous versions, optimising flows for future features on the roadmap
Accelerated the creation, testing, and release of new features as design tokens ensured consistency
Accelerated the creation, testing, and release of new features as design tokens ensured consistency
Established a single source of truth for developers, helping maintain a cohesive brand identity whilst allowing designs to fit different screen sizes, platforms, or user preferences
Established a single source of truth for developers, helping maintain a cohesive brand identity whilst allowing designs to fit different screen sizes, platforms, or user preferences
Implemented a more holistic design culture that encouraged constant collaboration, fostering innovation, and ultimately leading to better products
Implemented a more holistic design culture that encouraged constant collaboration, fostering innovation, and ultimately leading to better products
Created a feedback loop gathering ongoing feedback from users and stakeholders to continually refine the system
Created a feedback loop gathering ongoing feedback from users and stakeholders to continually refine the system
Boosted the team's confidence by making everyone feeling included and part of the process
Boosted the team's confidence by making everyone feeling included and part of the process
