Tag Archives: user flow

Journey map: UX Deliverable to illustrate process

Jennifer Blatz UX Design user flow, user journey, journey map
A journey map can be used to help educate others on the steps in a process.

When working on a user’s experience, it is critical to have an understanding of what the user actually does. These steps in a user’s process is called a variety of things. Some call it a user flow or a journey map. Whichever term you use, the basic process is to show the high-level steps that user participates in when using a product or service.

As with many UX deliverables, there are a million ways to present the information and the design the product you are sharing. You can include certain components, or exclude others all based on a matter of factors including time, purpose, audience and important content that needs to be shared.  Basically a journey map can be as simple or complex as you choose to design it.

Jennifer Blatz Design UX design journey map, user flow sketch
Skating the user’s process is a great way to make sure you have captures all of the essential steps before creating your higher-fidelity deliverable.

For me, like with many processes in UX, I like to start with a rough layout or sketch. To create the final deliverable, I first went through the following steps:

  1. Conducted several rounds of observing of the user, including interviews  for clarification and process.
  2. Sat with more than one user, to capture diversity in the process as well as consistency and differences.
  3. Walked through the steps with others members of my team to educate them on the process as well as to gain an understanding of the different interpretations they have of the process.
  4. Gathered questions from my team members so I can revisit my users and get answers to these new questions.
  5. Sat with (more than one) user to get clarification on the potential gaps in the process as well as get the team’s clarifying questions answered.
  6. Reviewed my notes and understanding to come up with a basic user flow.
  7. Sketched out the basic steps, in my understanding, to review with the user.
  8. Again, sat with the user and go over my proposed steps in the journey for feedback, correction, updates and clarification.
  9. Simplified all of the steps captured to present only the most important information.
  10. I finally took this simplified process, and designed a graphic to illustrate the steps in the user’s journey to aid the team in understanding and to build empathy.

Yes I said it: Build Empathy. That really is the most valuable outcome (in my opinion) of creating a journey map.

Sure it’s great to have a general understanding of the steps involved in a process. It’s valuable to know what happens first, second and so on. And like I presented in my journey map, it’s interesting to know the user’s emotional state as he goes through each of those steps. And finally, it’s helpful to present possible solutions at various stages in the user’s journey to make that process better.

But likes I said before, the real value of a journey map is to build empathy. A strong journey map will showcase things like:

  • How many (often painful) steps a user must go through to complete a task.
  • The bad parts in the process, like delays and other pain points.
  • The user’s feelings as he goes through the steps, especially the bad feelings.
  • The numerous extra resources the users has to touch in order to complete the job.
  • The gaps in the process.
  • The additions that could be (hopefully eliminated)
  • The flaws in the technology and tools.

Empathy is the key to success when you want your developers and engineers to build great product with the user being a strong part of the equation — not just keeping in mind the time and technology restraints.

UX Deliverables: Journey flow

Along with the requirements needed for the Virtual travel sheet (VTS) , also wrote out the steps a user will go through when working the VTS.

As posted before, we are creating a feature that will help doctors quickly build their medical plan and add items to the order. This feature, called a virtual travel sheet, will greatly increase the doctor’s satisfaction by making data entry easier, fast and perhaps quite pleasant with minimal typing. Doctors are familiar with the concept of a travel sheet. Many of them still use them in their practice still. So integrating a familiar paradigm in to the softwares used in the hospital should be greeted with delight.

Below is the user’s journey of working with the Virtual Travel Sheet for an Outpatient. What is an outpatient? That is a more “typical” type of visit to the doctor. This type of visit does not require the patient to be checked in to the hospital or to stay over night.

User Journey (Outpatient, Plan building)

  • A pet is checked in to the hospital
  • A VTS (virtual travel sheet) is automatically created for today’s visit when the pet is checked in
  • Today’s medical plan is designated on the VTS by the background color and tab at the top being blue.
  • Filters have been applied to the pet.
  • The exam has already been added to the VTS. This is shown by the item highlighted on the VTS and it is listed on today’s medical plan. This is based on the type of appointment that was booked.
  • The Outpatient VTS is selected (from the pulldown)
  • The Dr. will examine the pet and determine what procedures, medications, labs, vaccines or other items should be included in the medical plan.
  • To open the VTS, the user will select a tab (probably located on the right of the screen) that slides from right to left and covers the current screen with the VTS.
  • The user adds items to the medical plan by clicking the item he sees on the VTS one at a time. This selection is instantly highlighted in yellow and is added to the right column under the Medical plan.
  • If a user does not see a lab that he would like to add to his medical plan from the list provided under Labs In House, the user can select the MORE option.

The popup after hitting MORE on a category will:

  1. Give the user the ability to search within this category on the popup
  2. The items from previous VTS screen will be listed within the MORE list in alphabetical order
  3. The ability to select multiple items before closing this window
  4. The items selected will be visible on the TVS as highlighted selections
  • While in the MORE popup screen, the user finds the lab he would like to add to the medical plan on the VTS and selects it. This lab is highlighted, which indicates that it has been selected. When all items are selected, the user then hits the DONE button to add the lab to his VTS
  • The user can use alternative travels sheets, like medications, to add items that are not on the originally displayed VTS. The user selects to the Medication VTS from the pulldown and adds the medication he would like to include with his medical plan.
  • Additional notes can be added to each item in the medical plan. To do this, just double click on the line item and a text field is revealed. Once a note is typed, just navigate away, and it is saved. An orange “N” will indicate that an item has a note.
  • If the user would like to delete an item from the Medical plan, he can hover over the line item and a red “X” will appear to delete the item. The user can also delete the line item by right clicking and selecting the “Delete” option.
  • When all items have been added to the Medical plan, the user can select the “Present estimate” from the pulldown.
  • When the user chooses to present an estimate to a client from the medical plan, another window will slide from the Medical plan column, from the right to the left, covering the VTS selection area. This interactive screen allows the user to:
  1. Show the plan items in a larger font so the customer can review on screen
  2. By checking the “Show Financial” box, it will show the monetary values of each product and summarize the charges
  3. The doctor can add additional notes to this estimate
  4. Instantly get customer approval by checking the box, which will be time stamped
  5. Print estimate for the customer to review and sign if needed
  6. Save this estimate
  7. Update the medical plan if items have been declined by the client
  8. Move items from the medical plan to recommendations if the customer declines an item
  • When the user prints this estimate, it automatically saves the estimate. The plan is also updated if any items have been removed, and therefore sent to the Recommendations section.
  • When an item is declined, it is moved to the recommendation section. On the VTS, the highlight color also changes from yellow to green.

Optional: the user can designate order items to be linked to concerns. This would be done by right clicking on the line item, and selecting the concern from the pull down list.

Optional: the user can create additional estimates for today’s plan or a future visit.

Journey map to understand the flow

Customer journey map, user flow, Jennifer Blatz UX Design
Understanding how the user will go through a process makes for a better design.

When a UI designer is assigned a new feature to build, it is crucial that you understand this process from the user’s point of view. You might think, “Oh I know all the steps the user will go through. I have it all in my head.”

Well I am here to tell you probably don’t have all of the steps the user might go through in your head. This is the advantage of creating a Journey Map. Call it what you will:

  • Journey map
  • User flow
  • Flow chart
  • Task flow
  • Customer journey map
  • Experience map

To me all of these terms are very similar. Yes I know I am bastardizing these terms by clumping them all together as one item. I understand there are difference in these terms and when they should be used. However, the point I want to make is just think about how the user will go through the process and make some sort of illustration to show these steps. You don’t have to use some fancy software like InDesign or Omnigraffle. Go completely low fidelity and just sketch it out on pencil and paper.

There are benefits of sketching the user flow on to paper and get it out of your head:

  • You think you have thought of all of the options. Well you have not.
  • You will discover unknown unknowns.
  • You might leave out a step when it’s left in your head. Drawing each step really fleshes out the process.
  • There will be additional avenues you have not considered that only sketching will bring to the surface.
  • It forces you to visually consider the options and how many additional steps those option might provide.
  • It illustrates how complicated a user flow can get. It’s often more detailed than we thought.
  • As with all sketches, it provides a great communication tool that you can then show to your team to continue the discussion.

So before you start designing any software, or mocking up any of your fancy ideas in Photoshop of Sketch, take a few moments do perform this crucial step of creating a  Journey map / User flow / Flow chart / Task flow / Customer journey map / Experience map. It’s a great idea to get any thought floating around in your head on to paper.

‘Healthy’ topic assigned, now get to work

The day after WIAD (World Information Architecture Day) I participated in another day-long User Experience event. This time, I was not a passive observer who had organized the event. I was a hands-on, jump-all-in User Experience designer.

We were assigned the timely topic of Healthcare, so we chose to redesign the Covered California website.  We did not feel that there was a clear call to action, so we wanted to simplify the interaction of the website a bit.

We were very tight on time, so we banged through a lot of brainstorming sessions, mind mapping and creative flow to narrow down the scope of the project.  Just before the deadline, the team created a few valuable assets for our 3-minute presentation. Some are shown below:

Information Architecture

UX-health-board

User Flow

UX-health-userflow

Redesigned Homepage

Interrobang UX Hackathon 2-14

UX Hackathon was an exciting experience and I learned a lot about working in teams, working under very tight deadlines, lean UX and creating deliverables in less than a day.