Designing a journey flow
Hey, I’m Eshbal and I’m a product designer.
In this blog, I am going to take you through the process of designing a new tool - a Journey Flow, and show you my point of view.
What is a journey flow?
It’s the path taken by website visitors, and the actions they take during their visit.
For example, the user starts on the homepage, and from there continues to the category page. From the category page the user clicks on a product, from the product page the user adds the item to the cart, and from the cart the user goes to the checkout page.
This is one example, but of course, each user has their own journey.
Research
My first step was to research and then to analyze this kind of journey flows: see what has been done well, what I like and why, and what I can learn from it.
The main issue with the examples that I found are that someone using these journey flows can easily be confused. The flows are very busy and complex, and they were designed for analytics people …
For someone who isn’t into the data, and comes from a business background, it can be difficult to use and understand these tools.
My goal was to create a better analytics tool - that it will be really clear to the user where they are, what they are looking at, and that it will be user-friendly and easy to use, and also to promote exploration.
Mockups
The next step is to start creating mockups.
At this point, there are still unsolved questions, a lot of directions, and ideas -but it’s very important for me to have something visual to show and talk about - and that’s how I actually progress and improve from mockup to mockup.
This was my starting point - what I got from the Product Manager (PM), together with the product requirements doc (that talks about the company's goal), and also my goals: create the easiest tool, that even a user that doesn’t understand how to read and analyze data will feel comfortable to use our tool, and of course promote exploration.
These two examples below are the first mockups. What guided me here was to keep it simple, take out all the noise and to keep the user focused on the flow they are looking at - this is the reason I choose to show only 3 top flows in our tool.
Changing direction
An idea that came up along the way was to think of the flow as a road. Suddenly, my inspiration is no longer our competitors’ flows, but other digital products like Google Maps, Waze…
We have the start point, we have the end and the road that connects them. This step was a turning point for me because it opened a new window of many ideas that I had to check…
How does it look like if I’m using dotted lines, similar to a route that is taken, the icons here change to match the idea of a road (Circle at the start and pin at the end).
But then I thought it wasn’t enough, and why not take a map and place the flow on it and see how it looks? So this is what happened:
As a result, all my next mockups were inspired by the map.
The flow definitely looks cool, it’s different from what I saw in the research and it seems fun to explore it.
But then I understood that it all comes at the cost of other things that are just as important. Suddenly the order of the flow isn’t clear enough, it is a little bit difficult to identify the beginning and the end.
So I took a step back. But this process was really necessary because it helped me understand and communicate the idea better.
The flag and the pin icons are better than the previous ones and the gradient color makes it look more flowing.
One more thing that happened at this point, which was critical, is that through the mockup I understood that I can improve the experience and make it even more easy and clean.
The change that I made here was to separate completely the main flow (that is on the top) from the investigation and exploration (on the bottom).
In that way, the user can open or close the investigation parts to view deeper insights, or collapse them and only view the main flow at the top.
This is the flow, a result of a long and complex process. We have the main flow on the top and the sub-flows on the button, the user can open or close them.
In that way, we are different from our competitors - we don’t overwhelm our users with a lot of data, we are giving them the opportunity to play with the tool.
We have the icons of the road- the pin at the start, and the flag at the end. We have elements to emphasize the direction and the flowing feeling like the gradient color on the sides, and the lines that are curved and not straight.
Every time I thought I solved something and moved a step forward, I suddenly took a step back. It also was a test on how much I can stretch boundaries - go more to the extreme - but then find the right balance.
Summary
A few things that were really important and helped me in the process are:
- Get feedback and constantly improve. Also know how to take the feedback and sometimes compromise, because ‘a lot of people a lot of opinions’. During the process, I got feedback all the time: from other Designers, the Product Managers, the Developers, the Data Team and also from our Clients.
- Don’t limit yourself. Don’t be afraid to think different and out of the box, because even if it’s not the direction, I learned from the process and took from it a lot.
- And the last one, let things go. This is a zoom out of my working file that shows parts of many versions I created and worked on. You can see there are a lot. It’s very tricky because, from my side, I never finish. There’s always something that can be done differently.
It’s a process, the flow is updated all the time.
It’s important to know to say to myself — that’s it, I took it as far as I can, I did the best for now.
