Tag Archives: Showcase

UX Deliverables: sketching ideas

Jennifer Blatz UX Design sketch ideas for enterprise software.
It’s helpful to sketch early ideas in paper.

I cannot emphasize this enough: sketch out your ideas before jumping on to a computer and starting your design. Sketching is good for the body and it’s good for the mind. Not to mention, it’s kinda fun to live like a kid again and practice those rudimentary drawing skills. But you certainly don’t have to be a fantastic illustrator to create a good idea. If you think you can’t draw, don’t let that hold you back. I can’t draw either, as you can clearly see from my photograph at the top of this article.

To be honest, I don’t sketch enough. I have been guilty of jumping straight on to the computer, trying to come up with the best design idea as quickly as possible. But I do see great value in sketching out a few possibilities before exploring ideas on the computer.

Some of the advantages of sketching out your design solutions are:

  • Brain dump. Get the ideas out on paper.
  • Explore several idea possibilities. And build the ideas off each other. Variety and iteration are great skills in UX.
  • Force yourself to not settle for the first things that comes to mind.
  • Writing it out helps so that you are not forgetting a key component.
  • It gives you a prop to facilitate a discussion.
  • Seeing it visually on paper really is drastically different than what is in your head.
  • It helps you to communicate to another person by having the visual to discuss. Having the idea just in your brain could be misinterpreted.
  • You can refer to dismissed ideas later. You might find new inspiration or that one of your alternative ideas might actually be a better one to develop.
  • You can include as much or as little detail as you choose.
  • You can do it without electricity. If your laptop has died or the power is out, you can still be working. Your boss will love that!
  • Sketching makes it easy to dismiss an idea without be too emotionally or technically invested.
  • It helps you focus your idea, from the abstract thought in your head, to the real world scenario on the screen.

So as you can see, sketching has many advantages. I encourage your to sketch your next design solution first, without ever turning on your computer. You would be amaze how many ideas you can create if you devote a bit of time and effort. One of those second or third ideas just might become the winner. Give it a try.

UX Deliverables: wireframes

VCA Wireframe for Travel Sheet

Wireframes are a good step between touch sketches and final design. There are times that sketches on a napkin just aren’t polished or sophisticated enough to communicate the design. And there are times you are just not ready to mock pages up in Photoshop or Sketch because the design still needs some tweaking. That is why wireframes are a great intermediate step between sketch in higher fidelity mockups or diving straight in to code.

There are several benefits or wireframing your designs:

  • They are easy to produce. You can be created quickly once you get the hang of it. You are skilled in the software to produce wireframes, and there are many, then and experience UX designer can usually create them with great ease.
  • Wireframes allow for design exploration and easy iteration. You can change and update designing without being too invested in the design.
  • They allow for focusing on what’s important. Instead of focusing on fonts and colors, the user can function on the layout and placement of items on the page.
  • Gives an idea of the design without being fully invested. This makes adjustments and changes low cost and without be too committed to the code or design.
  • Clients understand the designs are not fully baked. They see that the designs are rough. There’s no color or images. There might even be squiggly lines or other clues that it is in a rough state. But being in this preliminary state the user or stakeholder is more comfortable making suggestions or providing feedback for changes.
  • Wireframes help developers understand relationships. Without requiring the developers to create things in code, a wireframe can help them easily understand the page, the design, and how things relate to each other. In that way, wireframes are a great communication tool.

I understand there are cons for wireframes. And not everyone is onboard with the concept of wireframes. But I wanted to highlight some of the benefits of working wireframes in to your work flow.

UX Deliverables: card sort

Jennifer Blatz UX design is using a card sort to organize the taxonomy of a virtual travel sheet.
Card sorting can be used for more things than just a website’s navigation. This card sort was done with Post-it notes in person with the user.

Cards sorts can make many forms. They can be low tech with index cards or Post-it notes. Or they can be a higher fidelity done on a website or with other card sorting software on the computer.

Jennifer Blatz UX design card sort of taxonomy and information architecture.
An online card sort can be performed with remote users.

 

If you have access to users in person, you can use a physical card sort. With this, you can use index cards or Post-it notes to have the user organize the items written on the card in to more general categories. If you do not have the opportunity to to meet the user in person, it’s ok to use a remote card sorting service or software (second image above) to do a card sort.

The major things that a card sort is used to accomplish is:

  • It is cheap and easy to do. Yes it takes a bit of time to create one card for each topic and make sure that all assets are covered. But once that is done, all you need to do is hand the cards to the user and have them organize them. Take a picture of the results with your phone or a digital camera and save for analysis.
  • It is user centric. It truly is from the viewpoint of the user since the user is the one organizing the cards in the best way they see fit.
  • It can be done in person or remotely. As shown in the images above, card sorting can be performed in a variety of ways.
  • It is a valuable and reputable source for gathering information. Car sorting and taxonomy have been used in a variety of ways for years. And if done correctly, it really works!
  • It can also help create labels and navigation titles. If you leave the card sorting open (without providing categories for the user to organize the cards) you can have the user not only group like items, but give them intuitive titles as well.
  • It provides insight in to the user’s thoughts. If you are able to talk with the user as they organize the cards, you get great insight as to WHY they are organizing the cards in certain ways. This helps you get sone context as the why and how the user is grouping like items.

Don’t be afraid to perform your own cart sorting exercise to help organization for your website or app. Feel free to leave comments and share your experience with your own card sort.

 

UX Deliverables: personas

Personas as a UX deliverable for Jennifer Blatz User Experience Design

 

What is a persona anyways?

Different people, be it a User Experience Designer or someone in the Marketing department of your company may have a persona. So what does a “persona” mean in the UX world? Wikipedia defines a person as: a fictional character created to represent the different user types that might use a site, brand, or product in a similar way. In other words, a user persona is a representation of the goals and behavior of a hypothesized group of users. In most cases, personas are synthesized from data collected from interviews with users.

How do you make a persona?

No you don’t just make it up. Pick a fictitious name, throw some random facts on a page and say “This is our personal Sally Student.”  No, no, no. You use actual user research to develop a persona. As mentioned before, a person is created from combined data based on interviews and other research methods. The most important factors in a persona are generally not demographic information like age, political interests, or what type of car a person drives. Though some of these types of factors can be used to give the persona some human characteristics and personality. They key is to use information that is important to portraying the persona. They type of driving habits a person has, would not be important for a persona representing a user of medical software. But that information would be important for an app that tracks a person’s mileage and gas consumption when they drive.

Generally personas consist of:

  • The user’s name
  • Age or level of expertise
  • Title or some occupational reference
  • Goals
  • Behaviors
  • Painpoints
  • And perhaps a quote that summarizes the user’s goal, feeling or general outlook about the product or process

Persona advantages

There are many advantages of using personas. Some of these include:

  • They simply provide a “face” for the user story.
  • Provide an emotional link to the person so you can build empathy with that user.
  • Promotes surfacing a real goal, pain points and motivations rather than just making them up as the discussion evolves.
  • When you need to play out a use case, the persona is a true character to use as reference, along with all of her data and behaviors.
  • Keeps the “facts” of the user more concrete. If it’s recorded on paper, traits of the user are less likely to morph and change.
  • Gives the team a focal point of on person to discuss rather than a theory about a group of users. You can specifically reference how “Sally the Student” would use the product so you make sure you are meeting her goals.
  • To focus the design on a “real” user rather than what we “think” is the best solution.

Now that you have a better understanding of personas, I hope that you will use them on your next project. If you are using personas now, please share your process of how you develop them and how you use them with the team.

UX Deliverables: competitive analysis

Jennifer Blatz UX design researches competitive software for the virtual travel sheet.
Performing a competitive analysis can help you in your own design project.

One of the first steps I take in the discovery process of a new project is to get a better feel for what the competition is doing. Why would we care what the compassion is already doing for the same feature or app? Oh there are so many good reasons.

Why do a competitive analysis?

  • So you know how the major competition in your software, product or digital space is handling a similar feature
  • Understand where your product stands in reference to its competition
  • Idea generation on how to solve various usability issues
  • Get an idea of what you can do to gain a competitive edge or make your product better
  • No need to reinvent the wheel. Understand what already exists you you don’t have to start anew.
  • To know what the trends are in your industry and on the web
  • Identify best practices or patterns. Then you can make improvements on what exists.
  • Seeing what already exists can spark new, and even better ideas.

They key benefit of performing a competitve analysis is to identify strengths and areas for improvement. You have to see what already exists out there before you can do this for your own product.

 

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.

UX Deliverables: Ethnographic observation

Jennifer Blatz UX design performs ethnographic research for the virtual travel sheet.
Understanding how users work in their natural environment will provide great insight in to your research.

Simply put, I love ethnographic research. I mean it when I say that this form of user research is probably the most valuable way to gain insight on your users and your product. And, unfortunately, it is far too often overlooked as time consuming or simply viewed as a waste of time. I could not disagree more!

First let’s define the term. According to Wikipedia, ethnography is:

 The systematic study of people and cultures. It is designed to explore cultural phenomena where the researcher observes society from the point of view of the subject of the study.

So how does this apply to UX and research? By observing your users in their natural habitat, you get exceedingly more information and context about their real world.

The benefits of ethnographic research for me include:

  • You see users use your product in a natural way, not in a fabricated lab setting
  • It provides context to their environment
  • You see things that you would never discover with a phone call or what the suer just tells you
  • You discover that what users say they do, and what they really do can often differ greatly
  • You see first hand the pain points that users are not aware that they have
  • You can observe true behaviors
  • You notice the environmental factors, like interruptions from c0-workers, slowness of equipment, and other physical attributes that affect the user
  • You have the opportunity to ask questions, on the spot, as circumstances arise
  • You can record aspects of the environment by taking photographs and video that could not be done remotely
  • You can establish a better rapport with your users
  • You can observe the entire context of the working environment, across rooms, buildings, people and other circumstances
  • It provides impromptu “bitch sessions” that the user would probably not normally share
  • It allows the user to feel like he/she is being heard
  • It allows you to be an “eye” for the other team members who are not able to view the user’s world
  • It gives the UX designer the best opportunity to really empathize with the user, by seeing how their work or life really is

Hopefully my reasons have given you enough understanding and reasoning to do your own ethnographic research. If you have your stories to share about ethnographic research, please do so in the comments.

 

UX Deliverables: Requirements

I am working on a project that enhancing the EMR (electronic medical records) where I work. We are creating a feature that will help doctors quickly build their medical plan and add items to the order (or list of items to charge the client). This feature, called a virtual travel sheet, will greatly increase the doctor’s satisfaction by making data entry easier, faster and will hopefully create a pleasant data entry experience with minimal typing. Doctors are familiar with the concept of a travel sheet. Many of them still use them in their hospitals to this day. Integrating a familiar paradigm in to the computer software used in the hospital should be greeted with delight.

What does a travel sheet look like? See the image below:
Jennifer Blatz UX Design travel sheet research for medical ERM project
Travel sheets may not be the prettiest thing to look at. But they have a strong function in the medical field when assessing patients.

I am writing the requirements and basic understanding of what the Virtual Travel Sheet (VTS) will do so that developers, QA, project managers and any other team players will understand the scope and expectations of the project. This is just a first draft.

Overview

The virtual travel sheet (VTS) will allow users to:

  • Easily enter items in to the plan without having to type in free text (so easy that it is preferable)
  • Easily enter items in to the plan without knowing any codes
  • Transfer/translate the items in my plan to an order
  • Transfer/translate the items in my plan to an estimate
  • See my plan built in real time
  • Create estimates (treatment plans) for items or services for the future
  • Include exams, vaccines, medications, injections, medical services, lab, imaging, etc.
  • Present items based on type of visit (outpatient, inpatient (hospitalized), boarding/grooming and retail products)
  • Filter out codes that don’t apply to the patient by species, age, weight, sex, altered status)
  • Present active, commonly used items (per hospital) as used per species
  • Allow for search
  • Ability to link to concerns
  • Display recent estimates for this patient

Typical users would be

  • Doctors writing their medical note
  • Technicians entering in items for the doctor in to his/her medical plan
  • Technicians entering in charges to the order

Access

  • Small tab to the right of the screen where user can “side open from left to right” the VTS.
  • This allows the user’s work not to be interrupted.
  • They can slide this open, and add items to today’s Medical plan or create an estimate.
  • All actions will be saved automatically.
  • The user can then just “slide” the window closed again and continue working on the lower/bottom/previous screen they were on before the opened the VTS.

Available travel sheets

  • Outpatient
  • Inpatient
  • Surgery
  • Medications
  • Specialty
  • Boarding & Grooming
  • Retail products

Filters applied to the VTS (can be turned off on the patient by the user)

  • Species
  • Sex
  • Age
  • Weight
  • Altered (y/n)
  • CareClub enrollment

The travel sheet will provide the user a condensed listing of codes based on

  • Filters that have automatically been applied
  • Available codes/catalog items for that hospital
  • Most commonly used codes by VCA
  • Most commonly used codes by that hospital
  • User favorites (second iteration)
  • Templates applied to plan

UX deliverables and skills

Jennifer Blatz design UX and UI design clips and work samples

As part of my 2016 professional development, I’ve decided I am going to use my blog to showcase more of my UX skills. A tough decision any designer must make is to only show a select examples of my best UX work. I try to show my diversity of skills, as well as my breadth of design. So since I cannot show all of my clips in my portfolio, I am going to use my blog as my second clips stage.

Feel free to search the word “Showcase” for future examples of my UX work. But until then, examples of my work can still be viewed on my website www.jenniferblatzdesign.com.