seen from Belarus
seen from China
seen from Malaysia
seen from United States
seen from United States
seen from United States
seen from United States
seen from China
seen from Türkiye
seen from United States
seen from United Kingdom
seen from France
seen from United States
seen from China
seen from United States
seen from China
seen from Türkiye
seen from Hong Kong SAR China
seen from China
seen from United States
09.28.20
Got started on user flows for the transit app today!
I am horrible at sketching of any kind but this was a nice way to get some practice.
Here’s the Figma file for the flows: https://www.figma.com/file/bGjk2fpoNWc3UkmVuD8k1j/busAPPuserFLOW?node-id=1%3A3
Here’s a quick presentation on my user flow exercises so far: https://www.icloud.com/keynote/0p5LuTbjsWJPNfnHYgFW35NCw#busAPPuserFLOWpres
I hope you had a lovely day.
Peace,
-joe
Updated digital user flows for World Independent.
RSA - The LadyBird User Flows
I have mapped out the flows for each user and what the screens will roughly look like. I have also explained each step below the screens of the actions the users will be taking.
The first flow of the chefs is him wanting to apply for the competition and he will land on the splash screen where he will be directed to signup/sign-in. Once he has done that he will then land on the homepage with an about section of the event. He will then select a button from the navbar that will take him to the registration page where he will fill in his details e.g. why he thinks he should be chosen. Once he selects submit he will be shown a confirmation screen that his application has been successfully submitted.
The second flow is off the guest who is wanting to buy a ticket for the event. They will take the same steps but signing up/signing in and land on the home page. From there they will go to the events calendar where they will see a list of all the events and upcoming ones. They then can select which event they want a ticket to and pay via pay-pal login.
The third flow for the guest is when they want to vote for a winner the night of the event where they will select the big vote button on the navbar and will be taken to the voting page with a list of the chefs who competed that night. Once they selected which chef to vote for they will see a confirmation that they have voted.
The last flow is for a user who just wants to see recipes but not particularly go to any of the events. They will see a page of all the events that they can filter through and when they click on the events they will see a list of the recipes and which chef the recipe belongs to. Once they click on the recipe they will see a page with a video of steps on how to prepare the dish and the ingredients they would need.
RSA - Whiteboarding User Flows
Ross and I sat down together and started to work through rough user flows for our users.
The flows consist of:
A chef wanting to apply for the competition.
A guest wanting to get tickets for the events.
A guest wanting to vote for a chef on the night of the event.
A user just wanting to view some new vegetarian recipes.
We have just outlined each step that user would take e.g. sign up, enter details, goes to the home page to find out about the event, clicks a button on nav etc.
Working with Ross on this project together and thinking of user flows has really helped when thinking about the users and their needs for this app. It has also helped think about things that I may not have thought about.
I now have to mock up my user flows so that they can be seen more clearly and so I can show a very rough wireframe of how the pages will look and function for the user.
An illustrated guide on the different ‘resolutions’ of user flows, and when to use them.
User Flow Research
Starting off my user flow research:
I am starting to think of my user flows and starting to clear my thoughts on how my application is going to work. I have done competitor research to help me plan my user flows. When doing the competitor research I wrote down on each post “Things I need to think about?” I am going to go through all those and try to solve the questions I wrote down about each competitor. I then am going to go to the comments I have gathered in my survey and sort through those to try and come up with solutions.
I still have the post-it notes from the feedback I got from the “Mini-Pitch” I plan on using those as well as suggestions for my users flows. Once I have sorted through all these comments, suggestions and questions I am going to sort out features that my application will have and then from there I will start my user flows as I will have a clearer idea of what my application will do, what features it will have and what actions my users will take.
Before I start anything from the above paragraphs I want to understand user flows and have found this article that I have linked.
This article covers:
A quick definition of user flows?
What role do wireframes have?
What do wireframes have to do with user flows?
What are the different ‘resolutions’ for user flows?
I am going to touch into a few of these sections just to understand a little deeper the importance of user flows and how I should approach them when I start myself.
What is a User Flow?
A user flow is a series of steps a user takes to achieve a meaningful goal.
What Role do Wireframes Have?
Wireframes were a great invention that will go down in the records of design.
So what do wireframes have to do with user flows?
They have a lot in common! They both have different levels of ‘resolution’ and fidelity of the finished product. When used at the right time in projects they can both:
1. Faster iterations - Wireframes give designers—and non-designers—a way to iterate faster through ideas
2. Better communication - Wireframes give us something to keep the discussion about the design itself; without requiring a crisp pixel-perfect interface.
What are the different ‘resolutions’ for user flows?
In this section, the article outlines the different resolutions to user flows there are.
User Goal
This is a definition of the flow you are designing it is what separates it from a sitemap or process map. Define the user and their goal.
Task Flow
Describe what they will do at each step. A good way to get started is to write out what the user needs to do at each step to get the job done or meet the goal/requirement.
Wireflow
The wire-flow (or visual user flow) stage is the next level of commitment for your flows. At this resolution, you can start adding in what digital things your users will stare at/use: screens, messages etc.
User Flows
The goal at this stage is have a user flow that both your users and developers will understand—otherwise you end up with a solution that neither understands.
I found this interesting to understand these different flows. This is all very useful to know when I am starting to create my user flows. It seems to really help break everything down into tiny steps to help understand the bigger picture.
I use old paper to draw out #userflows or #webdesign . It’s easier to just get those initials ideas out and refine. Plus, it’s good for the environment. #recycle https://www.instagram.com/p/Bu8zgzmn-u1/?utm_source=ig_tumblr_share&igshid=vohoxwgz9ql9
Automatically generate user journeys
AT DC, I worked as the UX designer on re-design of Reportin app. It was a 3 weeks engagement that I really enjoyed. This is the evolution of an example userflow from day one of the userflow workshop with the co-founder and CEO of Reportin, the tech talks, and the final resulting userflow in illustrator. In this process, the development team was highly involved to discuss the current built model and the sandbox I could play in. Working side by side with a developer was so much fun as we found creative ways to communicate and understand one another.
Reportin is an app that helps accounting teams collaborate on creating and managing financial reports in a better, faster and more reliable way.
