Creating a cross-cultural design system

Financial Times

TimelinePlatformMy role
Sep 2017 – Aug 2018WebProduct Designer

This case study delves into the transformative journey of scoutAsia, where I, as a Product Designer, led the development of a design system using a user-centered approach. My role was pivotal in defining the design system and creating developer tools while collaborating closely with software developers to streamline the development process. We focused on catering to the needs of scoutAsia’s diverse user base while ensuring consistency across multiple platforms. Additionally, I traveled to Tokyo, where we connected with the local development team from Nikkei and conducted local user research, underscoring the importance of cross-cultural collaboration.

All information in this case study is my own and does not necessarily reflect the views of Financial Times and Nikkei.

Background

scoutAsia is a multi-platform application that simplifies business and market intelligence for professionals across various industries. Recognizing the need for a design system that would foster efficiency and maintain consistency across different platforms, I was brought on board to lead this innovative endeavor.

The challenge

Our primary challenge was to develop a design system tailored to the web, ensuring a consistent and delightful user experience while also comprehensively understanding user needs.

Approach

User-Centered foundation

We conducted in-depth user research to understand scoutAsia’s diverse user base, uncovering their needs and preferences. This research informed the creation of two user personas, guiding our design decisions based on their characteristics and preferences.

Defining guiding principles

I used the insights gathered from user research data to shape our Design Principles. These principles were defined with a focus on clarity, efficiency, and a contemporary aesthetic, closely aligned with industry expectations. To ensure a comprehensive approach, we had collaborative sessions with both stakeholders and engineers, allowing us to jointly define the principles while incorporating their valuable input. This collaborative effort ensured that our design system not only excelled in terms of aesthetics but also demonstrated technical feasibility, all while staying true to the project’s overarching objectives.

Holistic Design System

Close collaboration with software developers led to the creation of a holistic design system comprising:

  1. Component library: A versatile collection of reusable UI components and patterns that address a wide spectrum of use cases.
  2. Colour palette and typography: A meticulously crafted colour palette and typography system to ensure consistency across platforms.
  3. Interaction guidelines: Comprehensive guidelines for animations, transitions, and micro-interactions, all designed to enrich the user experience.

Local user research and collaboration in Tokyo 🇯🇵

Travelling to Tokyo, we connected with the local development team from Nikkei, our partner in the project. We conducted local user research to better understand the preferences and cultural nuances of the Japanese user base, ensuring that our design system resonated with this specific audience.

Key learnings

Our commitment to understanding the local context extended to conducting user research in Tokyo, resulting in several invaluable learning points:

  1. We gained a deeper understanding of the specific preferences and expectations of the Japanese user base.
  2. We discovered unique cultural nuances that guided our design decisions, ensuring the design system was culturally relevant.
  3. The collaborative session in Tokyo fostered a sense of partnership and alignment with our local development team, which proved invaluable for the project’s success.

The product

scoutAsia serves as a central hub for consolidating data from various companies. This versatile platform empowers customers with a range of essential features, allowing them to:

  1. Visualize real-time news updates from companies of interest.
  2. Create and explore complex connections through an intuitive map interface.
  3. Curate a personalized target list of companies and receive tailored news updates and notifications.
  4. Access, view, and download standard reports and charts to gain valuable insights.
Page overview containing news and notifications from companies the customer tracks, and general news from companies around Asia.
Search results page: It displays companies and their relevant news. The customer can select and add them to their targets list in order to receive notifications about any activity from the company.
One of the key features offered by the product. The connections map gives the customer a full view of the company followed by their parents and child companies.

Reflecting on our impact

  1. Streamlined development: The introduction of the design system substantially expedited the development process. Collaborating closely with software developers, we could now focus our efforts on enhancing functionality and features specific to the app, instead of reinventing design elements.
  2. Consistency across platforms: scoutAsia was now distinguished by a consistent and visually appealing user experience across web, iOS, and Android, elevating brand identity and recognition.
  3. Elevated user satisfaction: Post-implementation, user feedback indicated a noticeable uptick in satisfaction with the app’s interface. This was a direct outcome of our user-centered design process, including insights from local user research and persona-driven decision-making.
  4. Simplified maintenance: As the design system grew and evolved, it significantly reduced maintenance efforts. Updates to the design system cascaded automatically to all platforms, preserving consistency and saving valuable time.

Conclusion

In the task of developing scoutAsia’s design system, I, as a Product Designer, had the privilege to lead the charge, using a user-centered approach that underpinned our efforts. My collaboration with software developers, both locally and internationally, and my focus on the distinct requirements of multiple platforms not only streamlined development but also notably enhanced the user experience. This project underscores a profound grasp of design systems and the adeptness to create tools for cross-platform applications through effective collaboration, cross-cultural insights from Tokyo, and user needs driving design decisions.

Empowering B2B energy trading

Shell

This content is password protected. To view it please enter your password below:

Integrating a user-centered taxi service

Booking.com

Booking.com case study
TimelinePlatformMy role
Sep 2018 – Dec 2018iOS and AndroidProduct Designer

Overview

In a quest to create unforgettable travel experiences, Booking.com embarked on a journey to integrate a taxi on-demand service into their services. Our mission was clear: Make travel seamless and enjoyable for travelers. To achieve this, we embraced a user-centered design approach and organized a Design Sprint to ensure that our taxi service met the unique needs and preferences of our diverse user base.

All information in this case study is my own and does not necessarily reflect the views of Booking.com

The Challenge

Booking.com aimed to enhance the travel experience for its users by providing an integrated taxi on-demand service. The goal was to reduce friction in the travel journey by allowing users to book taxis seamlessly through the Booking.com app. The key challenges included:

  • User Experience: The existing process of booking taxis was disjointed and required users to switch between multiple apps, causing a drop in user engagement.
  • Trust and Reliability: Users were often hesitant to use third-party taxi apps due to concerns about safety and reliability.
  • Competition: To remain competitive in the travel market, Booking.com needed to offer a comprehensive travel solution.

Design Process

Our users were as diverse as the places they traveled to. We catered to leisure travelers seeking adventure, families in search of quality vacations, and business professionals navigating unfamiliar cities. Understanding these unique user profiles was pivotal to designing an inclusive solution.

1. Research

The design process began with a thorough understanding of user behavior and preferences:

  • User interviews: Conducted interviews with travelers to identify pain points, behaviors, and expectations regarding taxi bookings.
  • Market research: Analyzed existing taxi on-demand services to understand their strengths and weaknesses.

Key learnings

  1. Pain points: Users expressed frustration with long waiting times, difficulty in finding available taxis, and uncertainty about the arrival time of their ride.
  2. Behavioral patterns: It was observed that many users preferred to book taxis in advance for scheduled appointments, while others needed on-demand services for immediate transportation needs. This highlighted the importance of offering both scheduled and on-demand options.
  3. Expectations: Users expected a seamless and user-friendly booking process, transparent pricing, and the ability to track their ride in real-time. They also emphasized the importance of safety and reliability in their choice of taxi service.
  4. Preferences: Some users preferred specific features like choosing the type of vehicle (e.g., sedan, SUV) or specifying special requirements (e.g., pet-friendly, wheelchair-accessible) when booking a taxi.

2. Ideation

To rapidly generate and test ideas, a Design Sprint was conducted:

  • Cross-functional workshop: Ran a Design Sprint to brainstorm and sketch potential solutions. Generated a wide range of ideas and selected the most promising ones for further development.
Crazy 8s

3. Design and Prototyping

The chosen solution involved integrating a taxi booking service directly into the Booking.com app. The design phase included:

  • Wireframes: Created wireframes to outline the user flow and interactions within the app. Focused on keeping the process simple and user-friendly.
  • Prototyping: Developed interactive prototypes to simulate the user experience and test the flow’s usability.
booking.com wireframe

4. Usability Testing

Usability testing was conducted with a group of real users to validate the design:

  • User Testing: Invited participants to use the prototype, booking taxis through the app. Gathered feedback and identified pain points.
  • Iterative Design: Made necessary iterations based on user feedback, refining the user interface and interactions.

The end-to-end UI flow proved highly intuitive, with all users seamlessly booking a taxi and completing the trip. Some participants highlighted the importance of the “confirm pickup” CTA, indicating that it added a necessary validation step that was missing from the flow.

5. Development and Integration

Worked closely with the engineering team to ensure seamless integration of the taxi on-demand service into the Booking.com app.

6. Launch and Monitoring

The feature was launched as part of an app update. Continuous monitoring and user feedback were used to make improvements. The development phase ensured that the design vision became a tangible, user-friendly reality within the app, ultimately fulfilling the project’s goals of improved user engagement and competitive advantage.

Reflecting on our impact

  • Improved user engagement: The integration of the taxi on-demand service significantly increased user engagement with the app. Users found it more convenient to book taxis through Booking.com.
  • Enhanced trust: The Booking.com brand’s trustworthiness extended to the taxi service, mitigating user concerns about safety and reliability.
  • Increased competitiveness: Booking.com’s comprehensive travel solution with the taxi service integrated helped maintain its competitive edge in the travel market.

Conclusion

The design and integration of the taxi on-demand service within the Booking.com app successfully addressed the challenges of user experience, trust, and competition. The project demonstrated the value of user-centered design, cross-functional collaboration, and iterative development in improving the travel experience for Booking.com users. This project contributed to improving the overall user journey and maintaining Booking.com’s position as a leading travel platform.