E2E Customer Journey
Lead product designer
2021.10 - 2022.8
A complete customer journey tools connecting various teams. Open for more customer journey requests.
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.
Outline of the old E2E Customer Journey tool
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".
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:
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.
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.
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