Before the project kickoff, I invited the customer support team to share new-user pain points and issues raised about the Getting Started guide. I attended product design critiques to understand the product team’s priorities and primary user flows.
I started user research by mapping the user journey to, and from, the existing guide, including onboarding flows in the web app and email nurtures. This helped identify information gaps and opportunities to reinforce information presented elsewhere in the flow.
To understand how users interacted with the guide, I analyzed user session recordings, heatmaps and Google Analytics data. I found that users clicked icons that looked too much like buttons and text that was colored blue despite not being a link. Users often begin exploring the guide, but abandoned it after a few sections of content.
Research helped define the changes that could have the biggest potential impact:
I organized the information architecture in FigJam based on the user research and in consultation with product designers and customer marketers, ensuring it aligned with the in-app getting started checklist.
Rather than presenting separate guides based on a user’s plan, we identified areas of overlap and key tasks for all users. A few selected plan-specific tasks that still fit the getting started steps were included and called out.
I gathered industry examples of successful getting started guides from HubSpot and Trello, finding that one of the most common patterns used a left-positioned navigation like a table of contents.
I wireframed the pages of the guide in Figma and presented them to stakeholders, discussing functionality and structure with the developer.
Most of the guide’s content needed rewriting to be more clear, concise and action-oriented, so I provided direction on copywriting needs and wrote microcopy for navigating the guide and specific actions for users to take.
I designed the web page styles and assets, incorporating feedback from stakeholders. I created high-fidelity prototypes to explain different component states and interactions and worked closely with the developer to ensure the guide functioned as intended.
I also performed quality assurance testing, ensuring the pages rendered correctly across different devices and browsers.
Results are pending as the design is still rolling out.
Send me an email or reach out on LinkedIn.