Year
2021
Team
Product Manager x 1
Product Designers x 2
Engineers x 4
My Contribution
Information Architecture
User Experience
User Interface
Design System
Design System / Rebrand
01 Project Brief
As one of the 2 core people on the team I was tasked to translate Condor’s brand new corporate identity (that came with only a few generic concept screens for digital application) into a digital language. Then, to apply it onto a living, breathing mammoth of a website without causing any disruptions.
→ Rebrand, reskin and ship 5000+ components (28 website sections + the app) in 4 months!
→ Rebuild and optimise 5000+ components in Figma, develop a cohesive design system in 2 months!
02 Challenges
• The existing design system was inconsistent, with multiple versions of UI components being used across different product areas.
• Lack of comprehensive guidelines led to misinterpretation and misuse of design elements.
• The design rollout ran in parallel to the development which meant that we had to be incredibly agile and responsive to all the changes and updates along the way. The stakes were high, Condor’s website serves millions of customers, we were to cause no disruptions to service.
03 Process Overview
1. Concept Refinement
Worked with Condor’s branding team to create concept screens with minimal structural changes while maintaining the desired look and feel.
2. Foundational Elements
Defined and optimised foundational elements and integrated accessibility into the design process from the outset.
3. Breakdown & Execution
Divided the project into 29 branches (28 website sections + app) and scheduled weekly rollouts.
4. Component Rebuild
Reconstructed all UI components in Adobe XD.
5. Design System
As lead designer, developed a cohesive, scalable design system in Figma to ensure consistency across products and teams.
6. Implementation
Organised the design system, documented it in Storybook, and facilitated its implementation.
04 Process
Concepts
We worked closely with Condor’s branding team to bring their vision into the digital realm. My first job was to turn their concept screens for digital application into versions that were less engineering heavy, kept structural changes to a minimum but still maintained the desired look and feel. My concepts gained a buy-in from the executives on the spot.
Original
Final
Foundational Elements
We started off by defining and optimising the foundational elements (Colour, Typography, Icons, Buttons, Forms, etc.) referencing my concept screens. It wasn’t as straight-forward as anticipated since Condor website featured every UI element imaginable! We also made accessibility part of the process, rather than an afterthought.
Design System - Adobe XD
We broke down the project into a series of branches that we were to roll out each week. We had 2 weekly status calls with the stakeholders to make sure we’re all on the same page at all times considering the scope of the project and a tight deadline.
In total, there were 29 design branches (28 sections of the website + the app) that we divided between two of us and ultimately conquered. We gathered up all of the components by taking screenshots and quickly rebuilding them on Adobe XD since the existing sources files were outdated and fragmented. However, constructing our own source file provided us a great insight into the structure.
Historically, Condor didn’t have a dedicated design team, most sections of Condor’s website were designed and developed by different designers and engineers in isolation which explained the lack of consistency. Initially, all we could do were the HTML and CSS changes which I in particular found rather painful. What kept me going was actively plotting the complete design system overhaul in my head!
→ Foundational elements defined and optimised.
→ Entire design library of 5000+ components rebranded/reskinned.
→ All components organised by section.
→ All components organised by function.
1 - All Components Organised By Section
Minimal UX/UI Tweaks
2 - All Components Organised By Function
Further UX/UI Tweaks
Selected Components
Design System - Figma
By this point, I got to know the website with all its parts inside out and became known as ‘brand police’. Subsequently, I was made the lead designer responsible for further optimising all the components and developing a cohesive design system on Figma. Having identified the experience gaps at a previous stage, I now worked towards a scalable design system that would enhance and promote consistency across different products and teams and fit various forms of content. I aimed to provide rationale behind my design decisions, showcase behaviours, interactions and various states wherever possible.
I worked closely with the engineering team to make sure that the naming conventions and the way the components are organised work for both sides. Then, I collaborated with them on documenting the entire design system on Storybook & managed its implementation.
→ Entire library reorganised and rebuilt on Figma.
→ All components optimised and unified (position, spacing, size, visual treatment) according to Atomic Design principles.
→ Company-wide style guide established; grids for key breakpoints defined.
Design System - Overview
Design System - Selected Sections
User Journey Mapping
Different departments were often working with varying sets of information in silos, focusing on their specific tasks without a holistic understanding of the user journey.
I self-initiated mapping out the key user journeys to facilitate better internal communication and coordination between different departments and ultimately, enhance the overall customer experience across all touchpoints, from booking to post-flight.
→ Documented current user journeys across various stages of the customer lifecycle, including booking, check-in, in-flight, and post-flight interactions.
Having all key user journeys mapped out and distributed across the organization contributed to streamlined operations and reduced confusion across the organization.
05 Results
Translating Condor’s new corporate identity into a cohesive digital design language presented me with a unique opportunity to shape Condor’s online presence for years to come. In just 6 months me and the team managed to reskin/rebrand the entire website and develop a cohesive design system with over 5000 components!
We have streamlined the design process by providing engineers with a single source of truth (a set of reusable components and patterns) which have resulted in improved efficiency (reduced time to market), consistency and scalability.
Not to mention, we have not only met but exceeded Condor’s expectations and have won the agency many more projects.