I’m on a quest for projects to practice my UX skills.
UX Tools website offers a decent amount of UX Challenges for practicing with real-world exercises.
Each challenge comes with a scenario, task itself, hand-picked tutorials and list of tools you can use.
I picked User Flow challenge because…
- User flows is something I haven’t done before.
- I like grocery delivery services such as rohlik.cz.
Reading tip: Right-click any image and select “Open image in new tab” to view its full size!
Task
“Create a user flow for the entire process of creating and submitting a grocery delivery: selecting a nearby store, adding food products to the cart, checking out, and choosing a delivery time.”
https://uxtools.co/challenges/user-flow/
Process
I knew nothing about user flows before this exercise. I started by reading and watching tutorials.
(In)fidelity
Tutorials showed a spectrum of user flow diagrams – some consisted of basic geometric shapes while others featured complete mockup screens.
I’ve decided I would start with the lowest fidelity and add mockup screens at a later stage.
However, a friend asked me to help him with his business and I left this task before getting to mockup screens. I’m publishing my process anyway. It was a good learning experience.
Flow for?
I would’ve (foolishly) jumped straight to user flows but tutorials advised to figure out who is the user and what are their goals first.
Initially, I’ve scribbled it on a paper and later made it nice with a fake person’s photo. Everyone, meet Anna, our user:
Anna is loyal customer and ain’t got time for shopping’ herself. She wants her groceries to be delivered to her.
I’ve appreciated answering questions about the user soon enough. You see, user flow diagram for a regular customer (who is already logged into their account) would differ from a first-time visitor. You do need to know who you’re designing the flow for. Duh.
Baby steps
At a first glance, mapping out steps for user seemed pretty straightforward.
Nothing surprising here:
- Select store.
- Add items to cart.
- Choose delivery time & location.
- Pay.
I’ve supplemented this section with a few assumptions as well:
- User is logged in.
- Once submitted, order can’t be changed.
- User’s credit card details are already saved in the system.
- User’s delivery address is also already in the system.
As before, I made an ugly scribble on a paper first, then noted it down in Figma. Let me satisfy your curiosity and show you the scribbles:
Flow #1
At this point, I made a mistake. I didn’t design the flow for the user. In hindsight it’s obvious I was making it for myself to help me design the interface.
I started breaking down the steps and analyzing what elements I would use. I touched upon some technical aspects as well.
Here is the flow:
Let me highlight some of the notes:
- “Selection of stores would differ per region”
- “Interface featuring (…) searching, filters & sorting.”
- “This step would feature map, address, datetime selection.”
- “This would be your regular credit card form.”
All the points above tell Roman (that’s me) what to include in his designs but nothing about the user!
Sketch(y) interfaces
Armored with the flow I marched on. For each step of the flow I explored different approaches how to structure the layout and interactions. I sketched lo-fi wireframes on a paper.
Step 1: Select store(s)
I had fun – especially with the first step of selecting store(s).
My favorite was the wheel of fortune. User would have to spin the wheel and watch the animation again and again until desired store is selected by chance or lose patience. It was inspired by The most ridiculous ways to input a phone number (there is more; try this game). This would never get into the final product but it was entertaining to explore the idea.
The sane option was the grid (top right). It’s well-established pattern and accessibility wouldn’t be an issue.
Step 2: Shop for items
I got more serious with the step 2. I really enjoyed the process of studying interfaces of existing delivery services, thinking and sketching how to improve upon them.
In regards to layout, I though what would be the most natural order of search, categories, breadcrumbs, filters and sorting.
no Validation
None of the presented designs were ever validated with an actual user. This is the downside of exercise projects – there is no business driving the effort to completion. Of course, I could’ve asked on social networks but I never did. My counter argument is that I aim for the role of a UX Designer not a UX Researcher. This is was never about me being lazy, see?
Filters
I decided to focus on filters with multiple options. I’m not satisfied with the way it works on my favorite rohlik.cz. It’s a tough nut to crack to get it right and they are doing a decent job. Still, I don’t like how there are 2 sections: one with filter controls and second with active filters (see screenshot below):
In my sketches, I tried to integrate filter controls and active filters together.
Consultation (Natasa): I’m doing it wrong
I can’t stress enough how valuable it was to talk with a mentor at this stage. We had a chat with Natasa. She’s a UX Designer and a friend of mine. We went over my work so far and it was interesting…
As you already know, flow #1 was not about the user and was too technical. We talked about wireframes as well. The main takeaway was to redo the user flow from the point of view of a user.
It seems that the term “user flow” doesn’t contain the word “user” for nothing…
Thank you Natasa!
User flow
Invigorated and equipped with all the newly acquired UX knowledge (from the consultation) I dove into user flow diagrams. I sketched a bunch and gradually started to understand how it’s done.
There were some cases I needed to clarify and I marked them with a red pen – for example: how to model situation in which user’s decision earlier has repercussions later in the process?
I also searched online for “grocery delivery user flow” and found a couple of diagrams. I didn’t copy them. Actually, I was quite disappointed in what I found.
In comparison, my diagrams felt more thought through, more complete. I tried to model every single little interaction user would perform. I tried to capture as many different situations I could think off. As you can imagine, working in isolation like this without feedback is not good. With this level of detail, my work progressed slowly and I didn’t had any way of telling whether it’s good or bad.
In retrospect, I was going into too much detail too early. At this point, it’s better to iterate faster and verify basic assumptions.
I dove too deep!
Consultation (Marie): Storytelling
Marie is an Interaction Designer. I’m really grateful for our consultation. We talked about edge cases in user flows and about the level of detail.
She showed me some of her work and it was rather refreshing. She was telling a story with her user flows! What’s more, the story provided a context to user goals, steps and decisions.
User flow with a story
I came up with a story that would show their experience using a grocery delivery service. I started on paper and after 2nd iteration moved to Figma.
Meet Anna and Tom:
This is their story:
The user flow contained in the story is basic but shows user steps within the broader context.
Recipes
To add a bit of complexity I decided to include “Recipes” feature. It would enable users to add all the necessary ingredients for a <dish> with one click. However, Anna and Tom would already have plenty of <ingredient> at home. This is why they would want to remove it from the shopping cart before proceeding to payment.
You might be asking why are there generic variables <dish> and <ingredient>? Honestly, I just couldn’t think of a recipe and wanted to move on with the project. It’s irrelevant to the interaction anyway. Fill in blanks with your favorite food!
Interaction for 2, please…
This interaction involved 2 people. What I find interesting is that usually we design user experience for 1 user who is interacting with the system. In reality, multiple people can be involved and we might never know. I can easily imagine a situation in which entire family sits in front of a screen and they exchange mouse between them… but then again, there are multiplayer games, aren’t there? :]
Takeaway
This project was a great learning experience for me. I wanted to practice user flows and got to do that. Mission accomplished!
The main takeaway is that I should always check-in with someone during my solo projects. Both Natasa and Marie provided me with guidance when I strayed off.
If you’re UX newbie like me, get a mentor. This is the way.
Project: Grocery Delivery – User Flow
Date: 2022
Duration: 30 days
Team: Roman Luks (UX)
Consultation: Natasa, Marie
Tools: Paper, Figma (FigJam)
Leave a Reply