AI-Driven Platform

Financial Times

The Financial Times Group and Nikkei Inc. jointly operate the corporate data and news service called scoutAsia. A scoutAsia subscription can provide real-time data, news, and context on over 800,000 companies in more than 20 East Asian, South Asian, and ASEAN countries. Through its databases, subscribers can create comprehensive corporate profiles, gain context and insights, and keep up with relevant companies.

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

Project Objective

To deliver a simplified and beautified data-visualisation product called scoutAsia. The product uses news, data and machine learning to reveal insights and speed up investor research. It is aimed at a wide variety of users, including M&A bankers, corporate strategy teams, salespeople, and compliance officers.

Team & Role

I joined this project in its early stages to co-direct the visual design by creating a design language and coming up with a solid design system to bridge the gap between development and design. The team consisted of 1 Product Owner, 1 Product Manager, 1 UX Designer and 4 Full-stack developers and 1 Tester, and it was split into 2 locations: London and Tokyo.

Stakeholder interviews

The project began over a series of meetings to discuss roadmap assumptions, how success would be measured and business objectives. During the week, we met with key stakeholders from London and Tokyo to explore:

  1. Customer Segments & Personas: Their demographics, backgrounds and motivations.
  2. Our Design Thinking process and tools to collaborate and work with Developers and Product owners.

We interviewed 11 senior team members to answer key questions:

  1. Who will use ScoutAsia?
  2. What they will use the tool for?
  3. What are the different use cases for this user?

Key takeaways

After digesting the learnings from the stakeholder’s interview, we created two proto-persona describing the target users and audience of ScoutAsia based on the assumptions of our stakeholders. Creating these two proto-personas allowed our product team to build a shared understanding of our potential users and to begin designing and building immediately without getting overly bogged down with the details of user behaviour.

By creating these two proto-personas, we also had a better understanding of the users we should recruit for user research and usability testing. We identified the following key themes and differences for our personas:

Primary Persona

  • Comprehensive data
  • Deep dive
  • Task completion
  • Impossible deadlines
  • Timely explanations
  • Compiling detail
Primary Persona: Jennifer Teo

Secondary Persona

  • Steers and hunches
  • Macro view/big picture
  • Forming a strategy
  • Setting timelines
  • First to know
  • Summaries
Secondary Persona: Peter Bauer

Empathising with our end users

The team travelled to Tokyo, Japan in order to engage with stakeholders from Nikkei. We took the opportunity to facilitate 1:1 sessions with potential customers in Asia. Common patterns learned from the interviews provided strong rationale towards design choices on tools like the “Connections Map”, “Company Search” and “Targets List”.

Some of the outcomes based on the user interviews: Users demonstrated to be more
interested in a feature where they could see all related connections from a company.

Key learnings

A common usage scenario learned from the interviews was that most customers would likely be in a rush or commuting in a train most of the time while checking for relevant news about companies they follow and discovering new companies mentioned in the news. They would feel more comfortable using a desktop to perform advanced tasks, like accessing a company’s connections map and a company’s market comparison chart.

Design, Test, Ideate

After establishing a strong understanding of the customer base, features and business objectives, we began to build the experience and the design process started. My personal deliverables were the Design Language followed by “Company Search” and “Targets List”. The iterations of the design concept can be found below.

The first concept is based on the interviews with key team members
The first concept is based on the interviews with key team members
The second design concept is based on the learnings and feedback from the user research
The second design concept is based on the learnings and feedback from the user research
The third and final design concept was created after two iterations followed by two user testing sessions, having all the necessary and essential features that customers need in order to perform their daily tasks while using the product.
The third and final design concept was created after two iterations followed by two user testing sessions, having all the necessary and essential features that customers need in order to perform their daily tasks while using the product.

Key learnings

Interviewing potential customers and data scientists from our team while conducting competitive research on data-visualisation products helped us to organise complex data best practices. The learnings led us to our design concept, scenarios, and mockups.

Prioritising System Parts

Working closely with our in-house development team, we set the goal for v1.0 of the design system to build the foundation by creating a compressive, scalable visual language and building atomic components most often reused and combined to make user experiences. Our emphasis in this process was to emphasize displays and data collection through normalization of form controls and standardized UX patterns and best practices.

The product

ScoutAsia consolidates data from companies into one central location. It allows customers to:

  1. Visualise news from companies of interest
  2. Visualise complex connections map
  3. Save companies to a custom target list and receive news and notifications
  4. View and download standard reports and charts
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.

The beta product was launched in Q1 2018 and is iterating through a series of interviews and usability testing with end-users in Asia.

Trading platform

Shell

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

Taxi on demand

Booking.com

Booking.com case study

Overview

In our quest to create unforgettable travel experiences, Booking.com embarked on a journey to integrate a taxi on-demand service into our mobile app. Our mission was clear: Make travel seamless and enjoyable for our users. 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.

Role

Product Designer: Led the design efforts, including user research, wireframing, prototyping, and ensuring the visual design aligned with Booking.com’s brand.

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

The Problem

Booking.com, renowned for its accommodation offerings, identified a common pain point among travelers: navigating local transportation in foreign destinations. Language barriers, currency differences, and unfamiliarity with local taxi providers often left travelers feeling overwhelmed and uncertain. Our challenge was to solve this problem by seamlessly integrating an on-demand taxi service into our app.

Users and Audience

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.

Our Team and Responsibilities

In our dynamic team, I was the sole product designer, driving the user experience and interface.

Product DesignerProduct ManagerDevelopment Team
My role was to Our Product Manager played a pivotal role in defining the project scope, priorities, and aligning our efforts with Booking.com’s overall strategy.Our development team was responsible for building the technical infrastructure, ensuring secure payments, and optimizing app performance.

Scope and Constraints

Our project’s scope was defined by the need to create a feature-rich on-demand taxi service within the existing Booking.com mobile app. This meant ensuring that the service could seamlessly handle bookings, payments, and communication with local taxi providers worldwide.

Constraints included aligning with local regulations, addressing potential language barriers, and accommodating various payment methods and currencies. Integration needed to be smooth and not disrupt the existing user experience of the app.

User-Centered approach and Design Sprint

We kicked off with a user-centered approach, which started with extensive research. We conducted interviews with travelers who had faced transportation challenges in Asia to understand their pain points. This research guided us in creating user personas, such as couples, families with no children, and solo travelers.

Competitive analysis: Exploring the on-demand taxi service landscape

Since Uber made its grand entrance, on-demand taxi services have taken the world by storm. The convenience of hailing a ride with a few taps on your smartphone has sparked a surge in similar services, turning the marketplace into a bustling hub of innovation and popularity. As I embarked on my research journey, I decided to dive deep into this dynamic landscape by exploring a handful of competitors, dissecting their user experience, user flow, user interface, and standout features.

User Interviews: Gaining insights from seasoned travelers

To truly grasp the problem we were tackling, we continued our journey by talking to a group of five seasoned travellers who had explored Asia and made use of taxi services there. I crafted a set of 20 questions neatly divided into four categories:

  1. Pre-trip: We wanted to know how they decided on their destination and what drove their travel choices.
  2. Planning: It was essential to understand how they prepared for their trips, from booking accommodation to organizing their itinerary.
  3. Getting around the place: We delved into their experiences with various modes of transportation, why they chose specific ones, and whether they found them satisfactory.
  4. Our product: To gauge their preferences, we explored what factors influenced their choice of a taxi service and whether they’d be interested in an on-demand taxi service seamlessly integrated into booking.com, one that automatically partners with local suppliers.

Rather than running these interviews like a dry Q&A session, we aimed to have engaging conversations and gather rich, qualitative feedback from our participants. We wanted to truly get inside their travel-savvy minds.

Crucial discoveries and emerged user categories

This step was pivotal in our journey. By delving deep into the challenges travelers face when using taxi services in Asia, we uncovered invaluable insights. These insights allowed us to identify common patterns and categorize the types of users we were designing the app for.

Our user categories boiled down to three key groups:

Couples: Those adventurous pairs looking to explore Asia together.
Family (no children): Families with kids all grown up, ready to embark on memorable journeys.
Solo travellers: The intrepid souls wandering Asia on their own, seeking unique experiences.

Defining user-flows

Our journey began by sketching out a high-level user flow map. This bird’s-eye view enabled us to see the bigger picture and understand the problem space in its entirety. We kept our user flow lean, ensuring it stayed under 15 steps.

One important assumption we made, backed by our research, was that customers had already booked their flights and accommodation in advance. This allowed us to focus on the taxi on-demand experience without getting tangled in unnecessary details.

Design Sprint: Unleashing creativity and efficiency

Incorporating a Design Sprint into our process was a game-changer. It turbocharged our progress, fostered collaboration, and ensured that every decision was rooted in real-world user insights. It was a whirlwind of creativity and efficiency that accelerated our journey towards creating a seamless and user-friendly Taxi On-Demand service for Booking.com users.

Ideation workshopWireframing & Prototyping

The team generated and shared a broad range of ideas as individuals. The goal was to push beyond our first idea and to generate a wide variety of solutions to our challenge. Using the generated outcomes, the wireframes were rapidly designed in one day and made into a simple click test-ready prototype.

Crazy 8s
Crazy 8s
Solution sketch
Solution sketch
Wireframe based on the ideation outcomes
Wireframe based on the outcomes

Scenario

It was important to make the research a collaborative task with the Product Owner and our partner in Asia to align interests. A simple test script was decided and created and we set the following scenario:

  1. The user doesn’t know the pickup point (default)
  2. The user knows the pickup point
  3. Pickup point has changed

User testing

Usability was conducted in order to gather insight into the “on-demand” happy path end-to-end flow. The test Helped us to determine:

  1. Do users understand how “Current Location” relates to pick-up-point?
  2. How intuitive is the UI flow end-to-end?
  3. Do users understand confirm pickup step, and is this required?

The evaluation was based on an analysis of videos from 15 unmoderated usability test sessions of the proposed end-to-end flow for the on-demand taxi app. Each usability test session lasted between 5 and 15 minutes. The tasks proposed for the user in the prototype were:

  1. Search for a given destination
  2. Book a taxi
  3. Rate the driver and the service

Learnings

The participant’s general comments were that the flow was simple and easy to follow. The testing helped us to validate our ideas and answer some research questions:

  1. Do users understand how “Current Location” relates to pick-up-point?
    Users prefer clear and consistent labelling of “to” and “from”. Showing their “current location” and not the pickup spot. However, users didn’t notice the change between the two. The “confirm location” CTA seemed to work well to resolve this.
  2. How intuitive is the UI flow end-to-end?
    All users were able to Book a Taxi and complete the trip with ease.
  3. Did users understand confirm pickup step, and would this step be required in our flow?
    Some participants mentioned that having a “confirm pickup” CTA helped a lot, as this added an additional validation step that was missing from the flow.

UI & Interation Design

After digesting the learnings from the user testing, the design process started and we began to build the experience. Booking.com has pretty solid design guidelines and a well-defined design language, which allowed us to save some time in small components, so we just had to focus on the features to be implemented.

Conclusion & next steps

The team successfully concluded the first phase of the project and acknowledged valuable learnings and insights from users. This project is not only about designing a taxi app but it also proposes an unconventional concept for a modern taxi app that can be used in many other cities, and also be linked with your holiday and accommodation services.

The features we designed collaborated to reduce the stress of using a taxi service, especially when customers are using this kind of service abroad.

The service is available in Singapore, Indonesia, Thailand, Cambodia, Malaysia, Myanmar, Vietnam, and the Philippines. It offers live feeds, real-time route maps, customer services translated in 40 languages and in-app cashless payments in the traveller’s currency.