top of page

WORK PROJECT

E2E Customer Journey

ROLE

Lead product designer

Front-end developer

User researcher

DURATION

2021.10 - 2022.8

10 Months

TECHNOLOGY

Figma, JavaScript, React, SCSS, GitHub, Amazon S3

ACHIEVEMENT

A complete customer journey tools connecting various teams. Open for more customer journey requests.

Challenges

The E2E Customer Journey tool created by the design technology team serves as an integrative platform, linking prototypes and experiences within the QuickBooks ecosystem to offer a comprehensive perspective on customer interactions. Although the first version was launched in early 2021, its adoption rate fell short of expectations and it lacks a strong purpose of usage. Consequently, our team is dedicated to investigating the reasons behind the product's underutilization and is committed to implementing necessary enhancements to the current iteration.

ezgif.com-video-to-gif.gif

Outline of the old E2E Customer Journey tool

Process

Step 1: User Research

Due to the ambiguity of the project, my coworkers put some fake customer journeys as the placeholder, lacking direct relevance to actual customer experiences. Recognizing this, my foremost objective was to construct a comprehensive user journey reflecting the engagements of various product teams. To achieve this, I engaged with the Intuit's "Adopt a Small Business" program's coordinator, gaining access to invaluable resources such as video recordings and notes from past participants. The "Adopt a Small Business" program facilitates connections between designers and small business customers, involving weekly meetings where customers share insights into their current business challenges while utilizing the products. Through meticulous review of these recorded interactions, I cultivated a profound understanding and empathy toward the customers, gaining invaluable insights into their encountered challenges.

Upon conclusion, I formulated a detailed customer journey, envisioning the entirety of the customer process and pointing out "moments to leverage" and "customer problems". 

adopt.png

Intuit's "Adopt a Small Business" promotional image

Step 2: Function Improvement

The subsequent phase involved a meticulous examination of the existing user journeys and a thorough review of the backlog. To comprehensively assess the current state, I reviewed all the prevailing user journeys and analyzed the backlog. Additionally, I conducted multiple customer interviews, utilizing these insights to validate and solidify my findings.

Upon meticulous evaluation, beyond addressing visual discrepancies, I identified two pivotal modifications:

  1. Redesigning the list card to incorporate an enhanced array of information concerning the customer journey. This involved adding specific timestamps, iterating on customer problems, and optimizing space utilization for a more comprehensive overview.

  2. Transforming the horizontal timeline into a vertical format to accommodate longer and more elaborate customer journeys, ensuring a more intuitive and scalable representation of the experience.

Step 3: Craft Iterations

During the design stage, I focused on redesigning the timeline. This involved an intricate exploration of shapes, line strokes, colors, and interactive elements. Specifically, I decide to create a timeline that can be expanded and collapse, grouped in different categories and stages. When a category expands, the accompanying line adopts a solid form, transitioning to a dashed line when collapsed. This deliberate choice enhances visual coherence, aiding users in seamlessly identifying connections between the timeline and list cards.

The overall design process encompassed numerous stages, including multiple design reviews, iterative visual refinements, and rigorous design critiques. Collaboratively, we shared our designs with both internal and external team members, yielding invaluable feedback that significantly contributed to the project's evolution.

1. Go Broad

Set up design principles, Get inspirations, Brainstorm, Initiate bold ideas

2. Go Narrow

Rank ideas, Prioritize on the impact and ease, Combine ideas and inspirations

3. Finalize Design

Design critiques, Visual reviews, interaction review, Team discussions, User Testing

Step 4: Coding and Innovation

Subsequently, the collaboration expanded as another design technologist joined the project, enabling a more nuanced division of responsibilities. In this phase, I personally undertook the coding of the timeline component. The expandable timeline I developed encompassed both categories and subtitles, serving as a concise summary derived from the text featured on the customer journey card.

My manager and I recognized the potential of leveraging AI for text summarization, viewing it as an exemplary demonstration of the capabilities AI offers. Initially exploring the Compromise JavaScript library yielded unsatisfactory results. Consequently, I opted to leverage OpenAI's capabilities to condense the text into succinct summaries comprising three words, storing these outcomes locally. This approach markedly improved the efficiency and quality of the text summarization process.

1. Independent Coding

GitHub setup, Publish code, Debug, Explore optimal solutions

2. Collaborative Coding

Discuss dependencies, peer code reviews and debugs

3. Finalize Details

Solve visual and interaction bugs in code, Spot any inconsistency

Final Product

The second iteration of the E2E Customer Journey prototype tool was unveiled in August 2022. I presented its progress to upper management, who displayed immense enthusiasm for the concept. Unfortunately, I did not get a chance to witness higher leadership people using the tool due to my transition to graduate school at that time. However, I strongly advocate for the critical importance of fostering an ecosystem among diverse cross-functional teams within a company's design system mindset.

Demo

Takeaways

1. It is wise to regularly engage in effective communication and seek feedback from colleagues and supervisors. In that way, they will know your current struggles and you might have some unexpected inspirations from them. 

2. Addressing customer issues involves diverse approaches. However, the lead designer needs to evaluate all options and choose the optimal solution based on tangible, substantiated reasoning. 

bottom of page