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.