First impressions stick, particularly in UX. Once we noticed that new customers of our Yoast web optimization for Shopify app had been skipping key steps or dropping off early, we knew our onboarding wasn’t working. Utilizing journey mapping and repair blueprints, we redesigned the expertise to be sooner, clearer, and extra supportive from the beginning. Right here’s how small, well-timed modifications made a giant distinction.
Launching an improved onboarding expertise
We just lately launched a redesigned onboarding expertise to assist Shopify retailers arrange for fulfillment. Behind that replace is a much bigger story: how considerate UX choices, team-wide alignment, and repair design strategies reshaped the consumer expertise. And we imply that within the broadest sense, from discovery to giving customers the sensation that the app is working for them and serving to them succeed.
On this interview, we spoke with our UX designer, Tom Ottjes, who led the challenge to unpack that course of. His solutions will provide a better take a look at the issues we wanted to resolve, the instruments he used to speak throughout groups, and the omnichannel modifications that made the largest distinction.
Earlier than you begin studying, right here’s a fast animation displaying the assorted components of the service blueprint we labored on. In fact, there’s rather more, however we can not present you every little thing.
From patterns to priorities
Earlier than redesigning a single display screen, the staff wanted a solution to perceive and talk what wasn’t working. They wanted to uncover what needed to change to repair the expertise for individuals in a means that additionally helped us obtain our firm objectives. That’s the place service design instruments, significantly buyer journey maps and repair blueprints, got here in.
Buyer journey mapping helped visualize what customers had been experiencing from discovery by set up and first use. It highlights not solely the steps clients take but in addition the place they turn out to be confused, hesitant, or drop off. Primarily based on help conversations, surveys, and analytics, the journey map revealed a number of points. A kind of points was a scarcity of early steering, which led to missed configuration steps, amongst different issues.
Earlier than we moved on to motion, we wished to outline success by figuring out KPIs. That is a necessary step. It is going to assist form the course of the service and expertise you can be designing. As a substitute of viewing onboarding as only a UI downside, the service blueprint mapped each consumer motion alongside the programs, processes, and other people behind them. This included content material, buyer help, notifications, and dealing inside Shopify’s personal platform constraints.
As a result of it connects what’s seen to the consumer with what occurs behind the scenes, a service blueprint grew to become central to the challenge. It gave each staff, from UX to improvement, help, and advertising, a shared reference level. By mapping every part as its personal blueprint, the staff may prioritize fast wins whereas keeping track of a longer-term onboarding imaginative and prescient.
It turned a posh, cross-functional difficulty into one thing everybody may contribute to. The blueprint helped make enhancements simpler to design, construct, and take a look at in smaller, clearer components.
An actual instance: Turning uncertainty into reassurance for bigger shops
One of many extra stunning and vital insights from our service blueprinting course of was about scale. We found that whereas the app felt quick and responsive for smaller Shopify shops, bigger ones had a really totally different expertise. For retailers with tens of hundreds of merchandise and pages, the preliminary processing and indexing step may take anyplace from a number of minutes to a couple hours.
The issue? We weren’t telling customers that. Small shops would see their knowledge mirrored nearly immediately. Massive shops would land on a clean dashboard, with no indication that the system was nonetheless working within the background. From the consumer’s perspective, it seemed like nothing was taking place.
We addressed this with a sequence of small however intentional modifications. First, we launched a correct loading state with messaging acknowledging what was taking place. Then, we added an e-mail subject to that display screen, giving customers the choice to be notified when setup was full. Once they enter their e-mail, they obtain a affirmation message as soon as every little thing is prepared.
It’s a small element, however one which shifts how the expertise feels. As a substitute of confusion or doubt, customers now get suggestions, a way of transparency, and a solution to re-engage later. And for us, it’s a concrete instance of why aligning the front-end and back-end by service design truly issues.
Meet the designer
Meet the UX designer: Tom Ottjes
This interview is with Tom Ottjes, one in all Yoast’s UX designers. He led the onboarding redesign for our Shopify app and was co-responsible for designing the Yoast AI options. With a number of years of expertise working throughout product and advertising, his strategy facilities on translating consumer conduct into actionable design. A lot of his work focuses on simplifying advanced flows, bettering consumer steering, and serving to groups perceive the client journey.
Tom, what downside had been you seeing that made this challenge a precedence?
With our Yoast web optimization for Shopify app, we try to ship actual, tangible worth to our customers. That begins with understanding their expertise from the second they set up the app. By a mixture of consumer surveys, interviews, help request evaluation, and product analytics, we started to see clear patterns emerge.
There have been three important friction factors we saved listening to and seeing:
- An absence of steering: Many customers merely didn’t know the way to use the app successfully. They put in it however weren’t certain what to do subsequent to optimize their retailer.
- Unclear worth supply: We observed that essential steps, like finishing the ‘Website illustration’ settings, which unlock rapid web optimization advantages, had been typically skipped. That instructed us customers weren’t seeing the connection between setup actions and actual outcomes.
- Hesitation to have interaction with the free trial: Customers had been cautious of testing the app, not sure of what the trial included or whether or not it was really risk-free.
All of those insights pointed to 1 factor: the onboarding expertise wasn’t doing its job. It wasn’t guiding, reassuring, or demonstrating worth early sufficient. We visualized all these points in an in depth buyer journey map, serving to us to zoom out and see broader patterns. We discovered totally different consumer sorts, the place they dropped off, and what confused them. That map grew to become a key alignment instrument and helped us body the onboarding redesign as a top-priority challenge.
What would success seem like for you from the consumer’s perspective?
From the consumer’s viewpoint, success meant feeling assured and supported from the very first interplay with our app. We wished customers to land within the onboarding stream and instantly perceive two issues: how the app might help them enhance their Shopify retailer’s web optimization, and what steps to take first to see outcomes.
That meant providing a smoother, extra intuitive expertise. An expertise that clearly communicated worth upfront, offered improved steering round preliminary setup steps, and highlighted key options. It also needs to guarantee customers that attempting the app was secure and worthwhile.
First, we wished to assist customers shortly perceive the complete worth of the app. As well as, we wished customers to finish key onboarding actions comparable to filling out their ‘Website illustration’ settings and exploring core options related to their retailer. Emotionally, we aimed for a way of readability, belief, and motivation to proceed.
Finally, if a consumer may say, ‘I do know precisely what this app does, what I have to do, and I can already see it working for me,’ then we knew we had been heading in the right direction.
Are you able to clarify your service design course of and the way it helped the groups?
After mapping the present onboarding journey and figuring out the important thing ache factors, we knew we didn’t simply want a greater UI. We would have liked a extra holistic service expertise. That’s the place service blueprinting got here in.
We began by defining clear KPIs to measure the impression of our modifications, comparable to completion charges for vital onboarding steps, time to worth, and have discovery. These metrics gave us a shared definition of success and helped form the course of the consumer expertise.
Then we used the service blueprinting technique to reimagine onboarding as an entire service. A service blueprint maps the relationships between individuals, processes, and touchpoints tied to a buyer journey. It helped us visualize each what the consumer sees and every little thing taking place behind the scenes to help that have, from content material technique to buyer help workflows to engineering necessities.
This systems-level view was important in aligning a number of groups, like UX, improvement, advertising, and help. Everybody may see how their work related to the consumer’s expertise and the place coordination was wanted. It additionally helped us determine inner gaps, inefficiencies, or dependencies early, so we may design round them.
To maneuver shortly and ship worth incrementally, we broke the optimized onboarding journey into phases, prioritizing what would have essentially the most rapid impression for customers. That strategy lets us ship enhancements sooner whereas staying grounded in a long-term imaginative and prescient for the onboarding expertise.
We approached the entire effort utilizing a service design mindset. We zoomed out to know the system customers work together with, not simply the screens they see. Service blueprinting helped us take what customers had been experiencing (empathy and perception), determine inner blockers, and construction releases round clear hypotheses. It wasn’t nearly delivering onboarding, however about bettering the service behind it.
How are you monitoring whether or not it’s serving to customers get began sooner?
From the beginning, we knew that redesigning onboarding wasn’t nearly launching one thing new. We wished to show it made a distinction. So, we outlined clear KPIs to measure the impression of our modifications. To make this measurable, we constructed the monitoring infrastructure wanted to watch consumer conduct at every step.
However we didn’t cease at numbers. We additionally integrated qualitative buyer listening instruments, issues like in-app suggestions, help conversations, and interviews. As we wished to know how customers really feel as they transfer by onboarding.
Are there nonetheless enhancements to make?
Completely, as a result of onboarding isn’t really ‘completed.’ It’s an evolving expertise, and we see it as a steady alternative to raised help our customers.
The following part of our optimized onboarding journey will deal with deepening the steering we offer, serving to customers transcend setup and begin making extra significant enhancements to their retailer. We’re how we are able to higher floor insights, recommend subsequent steps based mostly on context, and empower customers to unlock much more worth with confidence.
Whereas I can’t share all the main points simply but, I can say this: we’re not stopping at getting customers by the door. We’re targeted on serving to them thrive as soon as they’re inside.
Good issues are coming. As all the time, we’re listening intently to our customers to ensure what we construct really meets their wants.
Professional ideas for getting began with service blueprinting
Considering of utilizing service blueprinting in your individual work? Right here are some things that helped us:
- Begin with an actual journey: Mapping is most helpful when it’s grounded in precise consumer conduct. Use help knowledge, interviews, and analytics to anchor the blueprint in actual issues.
- Outline what “success” means upfront: Earlier than mapping, align your staff on what outcomes you’re working towards (e.g., sooner time to worth, fewer drop-offs).
- Map front-end + back-end: Don’t simply monitor what customers see. Embrace inner programs, help workflows, engineering dependencies, and something that influences the expertise.
- Hold roles seen: Present which staff is liable for which course of. It retains conversations targeted and collaboration smoother.
- Don’t overcomplicate: A blueprint doesn’t must be a elegant artifact. Begin easy. The worth is in getting groups aligned, not in the way it appears to be like.
Blueprinting doesn’t change good UX analysis or design, but it surely’s a robust solution to join them to the broader expertise. In the event you’re engaged on something cross-functional, it’s completely price attempting.
A shared understanding drives actual change
This challenge wasn’t nearly transport a brand new stream. We wished to design with a transparent, shared understanding of our customers and the processes that help them.
Our service blueprint turned out to be an amazing instrument to align groups round a single purpose: serving to customers shortly see the worth of the Yoast web optimization for Shopify app. Alongside the way in which, we uncovered friction, mapped dependencies, and constructed towards one thing extra constant, supportive, and efficient.
Considerate onboarding is the beginning of every little thing that follows. By making these early minutes really feel clear, calm, and grounded in actual outcomes, we’ve not solely improved setup occasions and reached our KPIs but in addition modified how we work, design, and pay attention collectively.
The work continues, specializing in function onboarding, improved steering, and even future WordPress experiences. Collectively, we’ll apply these classes to any extent further. We’ll design by placing customers first, construct teamwork on transparency, and create experiences that information, not simply onboard.
