Tag Archives: user flow

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.