Isobar Digital Agency

From 2016 to 2017, Isobar digital agency helped FWD Group rapidly refresh their digital presence as the insurance company expanded across Pan-Asia.

In accordance with my non-disclosure agreement, I have omitted confidential information in this case story. The information in this case study is my own and does not necessarily reflect the views of Isobar or FWD Group.

hero_isobar.jpg

My Role

I led the Discovery phase of FWD Group's website refresh to improve customer decision-making and the search experience.

I worked with the UX Design Director at Isobar digital agency to understand stakeholder needs, present findings, prototype and iterate wireframes for UI developers.

We need to figure out what IS the differentiator and where the right place is for all the information we currently have. How can we stand out?
— VP Strategy, FWD Group

The Challenge

Streamlining customer flow to achieve goals

Rapidly-growing businesses face cross-functional communication challenges. This was an opportunity for the agency to understand internal stakeholder needs, while comparing them with external competitor offerings. We shared our research upwards and across the teams.

Four main challenges could be summarized as:
  1. Understanding who the customers are and their behaviour on the website
  2. Finding the customer value proposition and communicating the competitive advantage across strong external competitors
  3. Implementing quick tools that would improve customer search and sales contact
  4. Harmonizing a unified visual identity and strategy across multiple countries

The Roadmap

Building Trust and Proving Differentiation

When a client reaches out with their own proposed design solution, I've learned to always kick-off a project by taking steps backwards using The Five Whys to understand the ultimate goal and reason behind the proposed solution.

  1. Used quantitative and qualitative research to better understand stakeholder needs
    • Conducted expert interviews with C-Level executives, cross-functionally
    • Worked with a business analyst to uncover entry, exit, and click behaviour in Google Analytics
  2. Integrated multidisciplinary frameworks to make holistic design recommendations
  3. Presented findings every two weeks to client and involved their evaluation and feedback as a way to co-design and build trust


The Process

Discovering Stakeholder Needs

I conducted 10 one-hour semi-structured interviews with cross-functional executives to understand internal needs from the Group's corporate website, from the CEO, to Operations, Sales, and Strategy. I also dove into Google Analytics and presenting competitive analysis within and outside of the insurance industry to the client.

Five main stakeholder groups became apparent through perusing entry and exit behaviour flow on Google Analytics, page views, and click event-tracking.

The most important commonality across all functions, from Product to Marketing to Sales and Operations, as well as the CEO, was that consumers would be able to find what they were looking for and be directed down the sales funnel when needed.

Developing User Stories and Common Vision

I visualized the user journeys based on research findings and presented them to the client to confirm target audience with stakeholders. I also used the Customer Value Proposition Model to show how future pain points of complicated interactions that would "appeal to Millennials" might lead FWD away from their end goal.

It’s a good point that what it takes to get a customer from point A to B is simplicity, rather than presenting Millennials a connection with edgy interactions. We want to funnel them down the sales funnel at the end of the day.
— VP Operations, FWD Group

We also leaned on card sorting to further understand the consumer's point of view with focus groups in order to start building sitemaps, navigation, and information architecture. User pain points with the websites included clunky service and a lack of understanding, common in the insurance and financial industry. We proceeded to go back to the whiteboard once we confirmed the same vision.

Designing Sitemaps and Wireframes

After presenting initial findings and incorporating feedback from the client, I reorganized the information architecture using card sorting to understand user goals. Then I looked at existing Country pages and categorized them into the values that customers would have in terms of protecting their families, investing, and saving money. I designed wireframes using Sketch and Adobe to present navigation to help investors, media, and end consumers find relevant content.

From hand-drawn sketches, to low-fidelity wireframes, to high-fidelity mock-ups, I presented iterations internally in the agency to the UX Director and Business Strategy Officer before presenting to the client at their office.

We looked at other Country sites and their branding kits as well, through our agency's other locations in Singapore, Vietnam, and the Philippines to draw elements that would eventually be put into a visual pattern library for all countries to draw from, like the five circular product icons and immediate call-to-action buttons to purchase.

ini-wires.jpg

Iterating Prototypes after User Evaluation

Forrester Research and usability testing identified the need for quicker access to product offerings, so I created more iterations of wireframes that used toolbar drawers for more mobile-friendly Search, Recently Viewed and 24-hour Chat features.

cx-research.jpg

We also went back to Google Analytics to statistically inform our next proposals.

We looked at direct competitors and external benchmarks outside the insurance industry for quick inspiration, including Tesla, Ray-Ban, Nike, and other e-commerce stores that our target audience would be browsing on a daily basis.

We opted for drawers based on Google's Material Components pattern library, and placed them on the right-hand side of the screen according to F and Z-patterns for desktop versions. Responsive mobile versions moved these tools up to the top right-hand side.

The Launch

Criss-crossing functions

The main qualitative lesson in this project for me was to design fast, and let ideas die fast. With many stakeholders within the agency and in the client's multi-national organization, rapid growth means abandoning any initial ideas in order to blend business results with client satisfaction. Plus, time is finite.

We were able to guide vision and strategy based on quantitative information.
  1. Clients can be convinced with number-crunching and data insights, but involving them in your process of design work is also great at building trust in the final result
  2. Design does not need to re-invent the wheel - in fact, developers and designers were emphatically happy to work and lend ideas when material components were repeated and inspired from other places. In a way, proof is in the pudding applies in cross-functional design.
  3. Finding unity across the countries helped increase client and customer experience.

Priscilla showed patience during bumps in the project, and she also demonstrated flexibility on adapting to client’s needs.
— A. Yu, UX Director at Isobar (2016)

Next Case Studies

EXPERIENCE SAMPLING METHOD

Prototyping daily diary from field interviews.

Read More

FLOW IN TANGIBLE INTERACTION

Designing product through iteration.

Read More