WORK PROJECT
E2E Customer Journey
ROLE
Product designer
front-end developer
DURATION
2021.10 - 2022.8
10 Months
TECHNOLOGY
JavaScript, React, SCSS, Figma
ACHIEVEMENT
Support 300+ designers to create an ecosystem between different teams
Challenges
The E2E Customer Journey tool 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. 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.
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 meticulous and detailed customer journey, envisioning the entirety of the customer process, synthesizing the collected information into a cohesive and insightful framework.
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.
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.