Category Archives: UX Deliverables and Assets

Sharing survey results keeps your team in the loop

Jennifer Blatz UX Design report survey findings
Creating a report is sometimes one of the “necessary evils” that UX Designers and Researchers must do to keep the team informed.

When you have direct access to users, and can get feedback from them, this is a gift. It really is wonderful to be able to reach out directly to your users and have them tell you how they feel about the product you are redesigning.

You’d better believe that I took advantage of this resource. I have access to some users right in my office. This is great, but it’s not everything. There are several other users located in other offices, in other countries, and they too, are gold mines of information. Since I know my place of employment will not fly me to Europe or Asia, I have to rely on other means to gather information from those remote users.

Though not the ideal form of research, a survey can be a good way to gather a lot of information, from several people, that are co-locted. Again, I would love to visit them in person, but this is not going to happen. They survey was my weapon of choice for gathering information.

The method was simple, I created a Google form, consisting of a few simple questions, and emailed the form to all users of the software. I had a great response, with over 90% giving feedback. So with all of the information gathered, I needed to share the high-level themes with the team.

My report to the team focused on what the users said are the “Worst Part of the Console” or the enterprise software they use to do their job. I think this information is especially important because it can act as a to-do list for improvements. That is what I hope they will do with the major and consistent complaints the users shared in the survey.

You are welcome to read the entire SOC Survey Report which I shared wit the team.

The importance of research is that is is meant to be shared; and research is critical to make informed design decisions. That is why is is so valuable to share your research findings with your team. Moreover, make sure that they actually read the research and make an action plan or updates based on the findings. Don’t go designing blind.

Research results don’t always have to be a work of art

Jennifer Blatz UX Design user journey and deliverable
There are times when just sharing the findings takes priority over high-end design and deliverables.

Q&D is a term I would hear told to reporters from my days working at daily newspaper. It stands for Quick and Dirty. And it’s a type of story that reporters are requested to write quite often. Just turn in a quick story to help fill the pages of the newspaper. It doesn’t have to be in depth; it doesn’t have have to be a Pulitzer-prize winning piece; it just has to be done.

I think we have all heard the request to turn something in ASAP. It’s not only the nature of the business world, but it certainly is the nature of the the UX world.

“We need to just get the results to the group so we can move forward.”

And it’s requests like this that cause UX professionals to produce their own Q&D.

Recently I was researching a very manual process. This process was creating monthly or quarterly reports for customers. One person would have to pull information from a variety of sources: enterprise software, web and customer data. Then they would have to place this information by copying and pasting (sometimes including calculating it manually) into Excel and Word. Then it was cleaned up in Excel and turned in to a PDF to email to the client. Sigh….

You can see how many steps are involved. The funny (or sad, actually) thing is that no one really knew how many steps were involved in this process. Not even the person creating the reports. That is, until I conducted my research and mapped out the process in detail. Wow it is a tedious task!

The reason for mapping out the process is because they want to automate the system. Which I think would be great! But in order to automate the process, they have to know what they are dealing with.

So after several side-by-side observation  sessions and interviews, I had a strong idea of what the report-building process consisted of. I needed to share these findings with my development team – and fast! Enter not pretty results. Wah wah.

Thus, we come to the point of this story: Results don’t always have to be a work of art. There are situations when you don’t don’t have time to create a beautiful journey map. You can’t create a high-fidelity deliverable, spun from a program like InDesign, because you need to share your results fast. So what do you do? Deliver the deliverable that gets the job done.

So what is a gal to do? Create the journey using a spreadsheet like Excel and get that to the team as soon as possible.

There are a few advantages to a Q&D deliverable:

  • Easy to put together.
  • Can be done rather quickly.
  • Can share with members of the team in a format they can easily read.
  • Others can even make edits to the spreadsheet if needed.
  • It’s a living document, and if there are changes that need to be made, they don’t have to be made through you.
  • Getting this deliverable off your plate frees up your time to move on to the next project.

Sure this spreadsheet is not going to be a design portfolio piece. But it does the job. This journey map communicates the process, resources and tools used, as well as time on task. This is all important information. And now it is in the team’s hands as an action item. They are not waiting for me to produce a “pretty” piece of design. In the end, my research is moving the project forward more quickly and accurately. Sometimes you just have to do what you’ve gotta do to get a job done.

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.

Persona feedback session: deck and summary

The personas I worked on for a major financial institution took months of research to create. I wanted to involve the company’s interested stakeholders so that they were involved in the creation process as well. At the very least, I wanted their feedback on what they needed in personas so that I could meet their needs.

When I shared the personas with my colleagues for the first time, I did not want it to be a “Big Reveal.” I wanted to reflect that I had taken the stakeholders’ feedback and suggestions on board. I had researched and built a first draft of the personas. And I wanted my persona presentation to reflect that these were not just “my” personas, but in fact, they belonged to the whole organization.

Some of the Persona Feedback session included:

  • Sharing the stakeholder feedback I had gathered
  • Explaining what a persona is
  • Showing the difference between UX persona and marketing segments
  • Illustrating the persona development journey
  • Showing the first draft of the personas
  • Presenting the components and portions of the personas and describing the purpose of each part

After I explained the process of creating the personas, defining them and sharing them, then I asked the groups to critique them. I wanted feedback on four aspects about the personas:

  • What they liked
  • What they did not like
  • What they needed more information about
  • What they needed less information about

After gathering their feedback, my intension is to roll that feedback in to my next round of qualitative research. I want to make sure I am meeting the users’ needs. In this case that is the stakeholders, including designers, design lads and product managers.

View the entire Persona feedback presentation workshop. I would love your feedback on what I talk about in my slides. Do you agree or disagree?

Service Design and creating a Blueprint

Is your organization doing Service Design?

It seems like it’s one of the hottest new trends in the User/Customer Experience arena. Where I work, not only have we been introduced to the concept, we are being encouraged to carry out the process on our products.

What is a Service Design Blueprint?

Yeah that was my question too when I first heard the term some time back. Does it have to do with architecture? Is it only for the service industry? How does this play in to UX? Yes I had all of these questions and many more.

OK, really, What is Service Design?

According to Wikipedia, Service Design is:

  • Involves the activity of planning and organizing people, infrastructure, communication and material components of a service.
  • To improve its quality and the interaction between the service provider and its customers.
  • May function as a way to inform changes to an existing service or create a new service entirely.
  • The purpose is to establish best practices for designing services according to both the needs of customers and the competencies and capabilities of service providers.
  • The service will be user-friendly and relevant to the customers, while being sustainable and competitive for the service provider.

Ok, this all sounds good right? So how do I get started? I am lucky enough to have attended the Adaptive Path Service Design seminar which gave me a grand introduction to the value and process. I am going to share a great asset they provided to me so that you can share it with your teams. (PDF is attached at the bottom of the article.)

Service Design blueprinting building blocks.

Now that you have a bit of foundation of what it means, I suggest you start creating Service Blueprints for the various products and services that your organization produces. You would be amazed the opportunities and caps you will discover from a Service Design blueprint exercise. Give it a try!

Service Blueprint block Example layout

Persona share out: stakeholder interviews

I know there are many ways to build personas. Sure, you can build them on assumptions and guesses and just throw something together quickly. But actions like that just leave a bad taste I’m my mouth. I want personas to be based on research, not assumptions.

One major project I am working on now is to create personas for vehicle purchasers. Where I work, one of the products we are working on deals with the consumer automobile buying space. One things we don’t have is personas. An even bigger flow of our organization is that we are designing products without having personas to consult for our design validation. I won’t dwell on this aspect too much. Let’s just say our organization is coming to light and recognizing the importance of having personas.

My task is to build kick-ass personas. I am up for the challenge.

One of the first steps I took in building personas is to talk to several stakeholders who would have interest in these personas. I talked to designers, design leads, product managers and researchers to find out one thing:

What information do you need from a persona?

I asked a few other questions as well, but this was my primary goal in this phase of my research.  I am sharing the information about “What do stakeholders need from personas” is in the attached deck.

Persona Jennifer Blatz Stakeholders 2017

How do you stay on top of things?

How do you stay on top of things?

Ahhh the golden interview questions that I am sure every UX designer has heard at least once.

  • Where do you go for resources?
  • What Websites do you visit to learn more?
  • What tutorials or other resources do you use to learn a new software or service?
  • How do you stay on top of the latest trends?
  • What software are you using for (fill in the blank)?
  • What is your “best practice” for (fill in the blank)?

Yes, we have all asked these questions, or heard them asked, or wanted to sleep but could not because these questions are bouncing around in our heads.

So I would like to open this post up for discussion. Because I feel like I am wounding about these types of questions all of the time. I want answers. Can you provide some of the answers to the above questions? Or do you have a resource that might answer them? I know I don’t get a lot of traffic on this blog, but if you do swing by and feel like chatting about this topic, I would be forever grateful.

Now: Let’s talk!

Rapid Prototyping with Tom Chi

Jennifer Blatz UX Design presentation
Sharing with your team when they cannot participate in an event or workshop is a good skill to have in your UX Designer toolbox.

Our office recently had the honor of hosting renowned GoogleX prototyper Tom Chi. He came in to our office to work with Product Managers on learning the value of testing fast and testing now! I had a chance to participate in the session as both a user, working through prototypes, and as part of a team building the prototypes for testing.

I have to admit a lot of what Tom covered was not completely new:

  • Find the quickest path to the experience
  • Test early and test often
  • Don’t guess. Learn
  • Don’t “fail.” Learn
  • Stop talking and start doing
  • Get in front of your users and get their feedback

But there were a couple of concepts that really resonated with me and thought they provided value to the session.

Drive conjectures to experiments. Experiments drive decisions.

Conjectures are the same thing as guesses. In other words, people tend to get stuck in “analysis paralysis” and over talking about the situation. In fact, a lot of these discussions are not reality based and is a process of throwing out personals opinions. It might be driven by the best intentions. But these conversations often go on for too long and are never backed up by actual user research. So encourage your group to stop talking and start doing.

The way we did this in the Tom Chi Prototyping session was to stop talking and we each sketched ideas quietly for 3 minutes. They key here is to sketch individually in silence. There should be no talking during the sketching exercise so that each person is exploring individual ideas without the influence from others. After sketching, the ideas are then shared with the group. One or more idea is selected as the “champion.” And this this rough sketch is what should be tested with users. No need to create a higher fidelity version of the sketch. Just show them the rough sketch and get quick feedback before you are too emotionally and technically invested.

Focus on people’s energy

Whenever there is energy, that means something that matters is happening. This energy can be positive or negative. When a customer gets exciting about something, pay attention to that. And the same is true when they show angry excitement as well. It’s these magic “energy” moments that really improve or ruin an experience. So tweak those energy points to make them awesome. One particular example Tom Chi mentioned was Uber. Most of the Uber experience is just like riding in a cab. It’s the few seconds that are different in that experience is what matters.

Don’t lead the witness

Finally, I want to talk about one lesson I learned by going through these sessions. Most of the people participating in our sessions were not researchers. In fact, there were product managers and designers. These are empathetic people who are excited about getting great feedback from users. But they don’t understand that the way they ask questions can skew the response from the participant. It is better to ask broad, open-ended questions rather than helping the participants by giving them examples. It is these tactics that researchers know how to do, but others might not know. They don’t understand that by providing examples for the person to think about, they might be blocking other examples they could possibly come up with on their own. With a little coaching, I know that product managers, designers and other non researchers can learn effective ways to ask non-leading questions.

Take away

I thought the most valuable aspect of bringing Tom Chi in house was to empower non-designers. I think he gave everyone confidence that they can explore ideas, sketch the ideas, and get quick feedback from customers. I hope this process takes off and continues well in to the future.

To read more of my notes, read the Tom Chi Prototyping Workshop presentation that I shared with my team.

 

Card sorting for more than navigation

I recently had the opportunity to practice a research method that is often used to help organize a website’s navigation. Card sorting is a research method used to help structure a site, product or other system. Card sorting helps you to get better insight in to the user’s mental model, as well as how they expect things to be structured and organized. I have written about my experience using card sorting before in another article titled, “UX Deliverables: Card Sort.”

Today I want to discuss using card sorting as another way of understanding how users organize information. Again, card sorting seems to be primarily used to organize navigation. In this study I used card sorting to have customers prioritize and sort education topics based on their interest in that topic. In other words, I had them show which topics they had an interest in, and those they did not.

“Card sorting is a user-centered design method for increasing a system’s findability. The process involves sorting a series of cards, each labeled with a piece of content or functionality, into groups that make sense to users or participants. http://boxesandarrows.com/card-sorting-a-definitive-guide/

The Reason

A customer is signing up for a new loan account. This is a great opportunity to give them more information about loans and finances. We wanted a better understanding of the types of information a person would want in the onboarding process. And as important, we wanted to know the types of information a new customer did NOT want.

The Method

No need to get all fancy and high tech. The great thing about card sorting is you can do it in the dark – well sort of. You don’t need a computer to gain great insights from your participant. Just use some index cards (or regular paper) with words or phrases typed or written on them. Have a flat surface where the participant can lay out the cards. Have a few extra blank cards and a marker just in case the person wants to create new cards. This happens more than you would expect. Do your best not to provide too much information or any definitions because you want to simulate a natural experience. In the context of her home, she would not have anyone explaining the terms to her. So we need this situation to be as realistic as possible.

The Process

Present these cards – in no particular order – to the participant and have him/her organize them in to categories that make sense to him/her. In this case, the categories were predetermined for the participant, but then he/she could create more if needed. In fact, in this study, one participant did create his/her own category. While the person is sorting out the cards, encourage him/her to talk through the process and explain his/her rationale. It’s this information that is actually much more valuable that the final results in many ways. To get a better understanding why he/she is putting items in to groups helps you to understand his/her mental model. This will help you to create a better structure and design. If you know why people group things together, you can anticipate future groupings if you need to add more choices later. Also, customers tend to organize things much more differently than the business would. It’s better to see the customer’s point of view so that you can make his/her journey successful.

The Results

What I love most about a card sorting is two things that will often surface: the surprises and the trends. Both ends of the spectrum are so wonderful when card sorting. As the administrator of the study, you want to see common themes emerge and bubble up to the surface. This helps you to organize topics cleanly and in a way the customer will enjoy. If multiple people expect things to be grouped in a certain way, that makes your life as an Information Architect easier.

The other side of the coin is items that surprises the research team. This could be especially helpful if you use a term that the participant does not understand. Most likely it’s industry or technical jargon – which should be avoided at all costs! If you do come across terms that confuse the participant in any way, consider changing or modifying it. In fact, you could ask the person what term they would use instead. Again, asking the person for feedback will often enrich your research and aide in creating a better experience.

The End

After the study, share your insights with the team. It’s even better if members of the team are sitting in the research session with you so they can see first-hand what the participant said and did. But if you can’t have those team members who are involved in the product directly observe the card sorting session, sharing a brief, insightful report is the next best thing. The lesson here is to keep the card sorting method in your pocket for potential use in the future. Card sorting does not have to be reserved strictly for determining navigation. It’s a versatile tech-agnostic method that can be used to organize information quickly and easily. Try it out next time you need to organize and structure information.

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.

 

Mid-year: revisiting my personal goals

2016 UX design resolutions for Jennifer Blatz

I am revisiting the goals I set for myself in early 2016. I need to see if I have accomplish any or many of what I set out to do and if I need to reassess my goals based on my new career path. My notes are included in purple after the original list item.

Learn programs

  • Axure Re-learned in Spring but need to practice skills to keep them fresh
  • Sketch No I have not learned this other than watching online tutorials. Not pertinent to my current job, but still would be good to learn.

Improve coding skills

  • Learn javascript, at least the basics No I did not do this. Removing from the list for now to focus efforts on learning more about research methods and best practices.
  • Refresh my knowledge about CSS and HTML No I have not refreshed my knowledge on this. Not pertinent to my current job, but still would be good to learn.

Read books

  • “Information Architecture” aka the Polar Bear book Yes! Accomplished
  • “Design of Everyday Things” No, still want to.
  • “Checklist Manifesto” No, still want to.
  • “How to Get People to do Stuff” In the process of reading
  • I am adding these two books to my list, which I am in the process of reading and are more related to my new job: “Observing the User Experience” and “Research Methods.”
  • Also adding “UX Strategy” since I got it as a going-away gift. Thank you Kristin Kazamaki for the very thoughtful gift. 

Keep learning

  • Start another “100 Days of Learning” journal, but expand it for the entire year. I have partially done one. It’s not as developed as last year. I would prefer to review last years, and this year’s and focus on writing notes as I see some important content.
  • Review the “Learning Stuff” journal from last year I still need to do this. 

Write blog posts

  • I am shooting to post 30 blog posts in 2016 Well I have 23 right now so I am in a good place to meet that goal.

Join a side project

  • I would love to join another project. If you know of any short term projects that need a UX designer, please let me know. I am success at this as I was a UX consultant for Wingspan Arts in NYC. It still needs to go through the redesign, but I helped them organize content and surveyed users and stakeholders to build a better redesign plan. 

Build out portfolio

  • Improve the content of my portfolio by introducing new clips Did this and also acquired a Dribble account to also showcase my designs.
  • Present my acquired knowledge illustrating my software proficiency I have an opportunity to teach an online course in the pipeline, and if it works out, this would help me to meet this goal.  Fingers crossed!

See UX samples on Dribbble

Jennifer Blatz's UX design work can now been seen on dribbble.com
Jennifer Blatz’s UX design work can now been seen on dribbble.com.

My portfolio can only hold so many work samples. I like to edit my work down to a small representative sample so that hiring managers and other UX designers can get a quick taste of some of my UX design capabilities. But there’s so much more to my UX design skills than I can showcase on my website. That is why I love alternative websites like dribbble.com and behance.net so I can show some of my latest works in progress and finished projects.

Dribbble is a great platform for inspiration and sharing your latest work. So I was honored to get an invitation to join the exclusive group. Who knows the true value of sites like Dribbble and Behance? But these sites seem to be an important part of a UX designer’s web presence. So I guess I’d better get in the game as well.

Please take a look at my clips and let me know your thoughts. I always love feedback.

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.

 

Winery App Prototype

Winery App UX prototype by Jennifer Blatz UX Designer
It’s never too late to revisit a project that you have put on hold for awhile. I am inspired to breathe new life in to my Winery App.

This was an old project that I have put on a virtual shelf for a few months. I think It’s time to revisit it and think about doing some user research to assess if there is a need for an app of this nature.

The Temecula Winery App came to me one time when I was wine tasting in the region. I wanted to know which wineries in the area had some of my favorite wines: merlot, viognier, maybe some zinfandel. Now, as a dog owner, I am interested in what wineries are pet friendly. Specifically, I would like to know which wineries allow dogs inside the tasting room, vs. which ones prefer that they stay outside.

When you are cruising through wine country, is not the time when you want to try to search several (often not updated) winery websites, looking for what wines they have for sale. And most of them (if any do) do not mention if they allow dogs.

So I thought this app might be helpful to people visiting the area. But even if I think it would be a good idea, I need to validate my idea with others. I need to do some user research and to see if others think their is a need for the winery app. This is an important step that too many startups, and founders to not take the time to do. They think their idea is in high demand because it’s their idea. Or they ask their friends and family, who ever so politely indulge them and say, “Yes that is a great idea.”

My goal is the next time I go to Temecula, I am going to talk to some other wine tasters and assess if there is even a need for an app like mine. I am sure after visiting a winery or two, approaching strangers and asking questions about this topic will only become easier. ha!

Usability review: talk to your users ASAP

As professional in the User Experience field, we’ve all heard it time and time again:

  • Test early and test often.
  • The only way to find out if it really works is to test it.
  • We do not see things as they are; we see things as we are.
  • The sooner you start to code, the longer the program will take.
  • Just because nobody complains doesn’t mean all parachutes are perfect
  • Don’t guess. Test.
Jennifer Blatz UX Design usability review and testing
If your product has a visual representation, and has not been built, go ahead and get user feedback from the visual mocks.

To get early feedback is easier said than done. I know that it takes time to create the visual mocks. Then things are moving so quickly (2 week sprints!) and it feels like we don’t have time to run our ideas by users. Finally, we feel like we know what it best for the product. We have done some user research. Our ideas have evolved as the project has progressed. We have made some decisions, that we think are for the better.

The earlier you test your site designs, the sooner you can find any problems and fix them.

But it’s this type of thought process that you need to take pause and stop in your tracks. Just when you think you are doing the right thing, that is the moment that your assumptions and biases are likely to creep in. So, this is a great point to take a break and get user feedback before you proceed down the rabbit hole any further.

To start with, we sent the wireframes to the visual designer to mock up our concept with more visual reality. We made sure that the flow we wanted to show the users was visually represented enough through our mocks.

Once the mocks were in a state we felt we could share with the user, we needed to figure out what type of information we wanted to gain from our usability review. Next, I came up with a brief list of topics and content we wanted to focus on.

Jennifer Blatz UX Design usability review
Have a script close at hand whenever you are conducting an interview so that you don’t forget key questions and concerns.

I wanted to first focus on the overall presentation and design, as well as have them look at the navigation and taxonomy that we were presenting. Then after getting their feedback on the overall design, I wanted to take them through a specific work flow, and see if it made sense to the user.

I think that a common error in usability testing is giving the person too much information as soon as they see your prototype. Don’t jump the gun!! Take this opportunity to get initial reaction feedback. Let the person participating in the usability review take a moment to take in the design, layout and wording. Let them get acquainted with the page and get that “first few seconds” feedback. Please don’t miss the opportunity.

Jennifer Blatz UX design usability test
Even if you only have wireframes, and not accurate visual mocks, share whatever design you have with your users to gather that valuable feedback on what you have started.

Then after taking a few minutes to talk to the user about the overall design, you can then take a deeper dive in to a work flow. I found that in this instance, the first half of the conversation focused on the website’s design, terminology and assessing if the user understood how to get started on some general tasks. In other words, I wanted to see if the navigation choices made sense. Also, I wanted to see if they had any cognitive dissonance with any of the terms we had used. Next, we asked the users how they would perform a specific task. In this case, it was how they would start to place an order. Along their usability journey, they brought up a lot of good questions and educated us on how they do this process now. It was all very insightful, and helpful to find out what we had done right, and what we needed to improve. That, my dear friends, is the whole goal of performing this usability review.

Want to watch the entire usability review live in the flesh? Please feel free to watch the video. If you have specific feedback on my approach or any aspect of my session, please share your thoughts in the comments. Just like designing a website or software, my research methods are always in a state of improvement and iteration. Please help me make my product, in this case ME, even better.

 

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.

Prototyping tips: What you should know after a session

User Testing recently published a handy guide on prototyping called “Getting out of the office: Testing mobile app prototypes with user”.

Here are a few pointers of what you should know after prototyping your project.

When you’re finished testing at this stage, you should be able to answer these questions to validate your concept before moving forward to a higher fidelity prototype:

  1. What problem does your idea solve?
  2. How are users solving this problem currently?
  3. Can your target market think of another product that does something similar?
  4. How have previous solutions failed?
  5. Do users understand what this product or service does?
  6. How do users feel about the product or service?
  7. Who is your competition?
  8. What is the app for? What can users do with it?
  9. Does your target market actually have a need for this product?
  10. What devices do users imagine themselves using when they interact with this product?
  11. What scenarios can they picture themselves using it in?

User Interface Elements

  • Dropdown list vs. listbox
  • Buttons vs. radio buttons

Sometimes you just forget what each UI term really is called. And it’s good to have the terminology correct, especially when you are talking with stakeholders.

Usability.gov is a great resource when you want to quickly remember the names of those pesky UI elements.

User Interface Elements

When designing your interface, try to be consistent and predictable in your choice of interface elements. Whether they are aware of it or not, users have become familiar with elements acting in a certain way, so choosing to adopt those elements when appropriate will help with task completion, efficiency, and satisfaction.

Interface elements include but are not limited to:

  • Input Controls: checkboxes, radio buttons, dropdown lists, list boxes, buttons, toggles, text fields, date field
  • Navigational Components: breadcrumb, slider, search field, pagination, slider, tags, icons
  • Informational Components: tooltips, icons, progress bar, notifications, message boxes, modal windows
  • Containers: accordion

Input Controls

Description Examples
Checkboxes

Checkboxes allow the user to select one or more options from a set.  It is usually best to present checkboxes in a vertical list. More than one column is acceptable as well if the list is long enough that it might require scrolling or if comparison of terms might be necessary.

Example of checkboxes
Radio buttons

Radio buttons are used to allow users to select one item at a time.

Example of radio buttons
Dropdown lists

Dropdown lists allow users to select one item at a time, similarly to radio buttons, but are more compact allowing you to save space. Consider adding text to the field, such as ‘Select one’ to help the user recognize the necessary action.

Example of a dropdown
List boxes

List boxes, like checkboxes, allow users to select a multiple items at a time,but are more compact and can support a longer list of options if needed.

Example of a list box
Buttons

A button indicates an action upon touch and is typically labeled using text, an icon, or both.

Example of buttons
Dropdown Button

The dropdown button consists of a button that when clicked displays a drop-down list of mutually exclusive items.

Example of dropdown button
Toggles

A toggle button allows the user to change a setting between two states. They are most effective when the on/off states are visually distinct.

Example of toggles
Text fields

Text fields allow users to enter text.  It can allow either a single line or multiple lines of text.

Example of text field
Date and time pickers

A date picker allows users to select a date and/or time.  By using the picker, the information is consistently formatted and input into the system.

Examples of date and time pickers

Navigational Components

Description Examples
Search Field

A search box allows users to enter a keyword or phrase (query) and submit it to search the index with the intention of getting back the most relevant results. Typically search fields are single-line text boxes and are often accompanied by a search button.

Example of search boxes with various functions
Breadcrumb

Breadcrumbs allow users to identify their current location within the system by providing a clickable trail of proceeding pages to navigate by.

Example of breadcrumb
Pagination

Pagination divides content up between pages, and allows users to skip between pages or go in order through the content.

Examples of pagination
Tags

Tags allow users to find content in the same category.  Some tagging systems also allow users to apply their own tags to content by entering them into the system.

Example of tags
Sliders

A slider, also known as a track bar, allows users to set or adjust a value.  When the user changes the value, it does not change the format of the interface or other info on the screen.

Example of sliders
Icons

An icon is a simplified image serving as an intuitive symbol that is used to help users to navigate the system.  Typically, icons are hyperlinked.

Examples of icons
Image Carousel

Image carousels allow users to browse through a set of items and make a selection of one if they so choose. Typically, the images are hyperlinked.

Example of an image carousel

Information Components

Description Examples
Notifications

A notification is an update message that announces something new for the user to see. Notifications are typically used to indicate items such as, the successful completion of a task, or an error or warning message.

Example of a notification
Progress Bars

A progress bar indicates where a user is as they advance through a series of steps in a process. Typically, progress bars are not clickable.

Examples of progress bars
Tool Tips

A tooltip allows a user to see hints when they hover over an item indicating the name or purpose of the item.

Examples of tool tips
Message Boxes

A message box is a small window that provides information to users and requires them to take an action before they can move forward.

Example of message boxes
Modal Window (pop-up)

A modal window requires users to interact with it in some way before they can return to the system.

Example of a modal window

Containers

 

Description Examples
Accordion

An accordion is a vertically stacked list of items that utilizes show/ hide functionality.  When a label is clicked, it expands the section showing the content within. There can have one or more items showing at a time and may have default states that reveal one or more sections without the user clicking

Example of an accordion

User research: measuring information

User research measuring quantity vs. quality Jennifer Blatz UX design
Author/Copyright holder: Nielsen Norman Group.

When conducting user research, there are a variety of methods to acquire valuable data. This chart, courtesy of the Nielson Norman Group, illustrates the ranges that your research can measure.

Let’s break this down to the extreme ranges of this chart.

Behavioral

Ethnographic research is a fine example of behavioral research. This is where the researcher goes in to the user’s natural environment and observes the user in the user’s normal and regular context.

Attitudinal

Surveys and Interviews are some ways to see what the user says they would or would not do something. Often users will give answers they think the research wants to hear or what they think is the “correct” answer. The key here is that the user might actually believe what they are saying is true. But in fact, when the researcher actually observes the behavior, what the user has said might not be accurate.

Qualitative

One-on-one interviews and ethnographic research are a couple of great ways to get qualitative research information. The researcher can devote individual time to the user, and really get deep information about them. This takes time, and therefore can be difficult to accomplish in mass quantities. But submersing yourself in the users world will provide much more in-depth information than more quantitative research methods.

Quantitative

Surveys accomplish quantitative research very well. Especially with the plethora of online survey tools (many of them are free), one can easily send out a survey to hundreds, if not thousands of participants and gather a large amount of data. This data can then be accumulated to show trends, make charts and post results of several people. However, this research method does not provide individual insight and appreciation that a more qualitative research will provide.

All in all, there are many research methods that a UX researcher has at his or her disposal. They key is to know which research method is best for the type of information he or she is seeking. Also, many of research methods fall within the middle ranges of this chart, and not at the extremes. I encourage you to use a variety of research methods in your next UX project.

 

Gather user feedback: There’s more than one way (to skin a cat)

For all P.C. (politically correct) purposes, I am not promoting skinning a cat. I work for a veterinary company, I am certainly not going to condone harming animals in any way.

Designing a text messaging app within enterprise software should be tested by the users. Jennifer Blatz UX UI Design.
Getting user feedback by using a visual representation of your UI design is a great step in the design process.

But the headline did get your attention. ha ha

For the feature I am currently designing, pictured above, I used a variety of research methods to gather user feedback.

  • Interview users about how they use the smartphone app.
  • Observe users on how they operate the smarphone app.
  • Mock up an interface, and ask users questions about the design.
  • Create a clickable prototype to see if users understand how to operate the feature.
  • Observe QA to see technical of UI issues that arise in testing environment.
  • Be prepared to iterate once the feature has been released to make improvements.

User feedback is key. Don’t design in a bubble and assume you understand your user’s mental model. After talking to several users, and observing their behavior, I learned a lot of the assumptions I had were wrong. So talking to users early helped me to build a better product early, before it got too far in to the code. I encourage you to always run your design ideas by at least one person, very early in the process.

Community Coalition’s website relaunch

Jennifer Blatz UX design community coalition website redesignAfter nearly a year on the project, Community Coalition has launched the new design for their website. I am happy that I had the opportunity to participate in this process. Despite the longer than expected timeline to complete the project, I gained valuable experience and learned a lot of things on my journey as the team’s UX and graphic designer.

Lessons learned
  • People come from different backgrounds and have different experience to bring to the table. Take advantage of this diversity.
  • When working with people, things can take longer than expected. But…
  • Be patient and enjoy the ride.
  • The organization knows their users best, or at least assume that they do, so trust what they tell you.
  • Be empathetic, even if you don’t think you can completely relate to the user.
  • Working together helps the overall understanding.
UX deliverables created
  • Wireframes
  • Personas
  • Interviewing stakeholders
  • Competitive analysis
  • High fidelity mockups
  • Process and user flows
  • Content inventory, analysis and strategy
  • Information architecture and taxonomy
Takeaways
  • You get out of it what you put in. If you put in more, you can get very valuable assets.
  • Be willing to learn from others. You learn more by keeping your ears open and mouth shut.
  • Keep technology in mind. Not all users are on a high speed device with quick internet access.
  • Do you best to get the organization to clean up items that are not being used on the site. Analytics is a great tool to validate this cause.
  • Try to tell the organization’s story. The more you learn about them, the easier this is to do.
  • Have fun and enjoy giving back to the community.

 

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.

Card Sorting for the Enterprise Interface

 

Card sorting for enterprise software Jennifer Blatz UX Design
Card sorting is a process one can use to create an orderly system. It is being used here to organize a portion of medical enterprise software.

Card sorting can be used for much more than just organizing a website’s navigation. In fact, that is why information architecture is such a broad term. And one tool for helping people organizing and creating a structure is a card sort.

So what exactly is card sorting? According to the Wikipedia entry for card sorting: “Card sorting is a simple technique in user experience design where a group of subject experts or “users,” however inexperienced with design, are guided to generate a category tree or folksonomy. It is a useful approach for designing information architecture, workflows, menu structure, or web site navigation paths.”

Now that we know what it means, how do we use it? Or in other words, why do we use it? In my case, I wanted to test a few of the doctors who use my company’s enterprise software. We have a portion of the software that is Electronic Medical Records, aka EMR. I wanted to see how different participants thought the information should be structured in the patient’s EMR.

  • Should each entry be strictly entered chronologically?
  • And if that is the case, is the oldest entry first or newest entry first?
  • Should the most important information be surfaced to the top somehow?
  • Is there a way to create bundles of information or sub groups?
  • What does the user think the best way this information should be organized?

All of these questions could prompt hours and hours of discussion and speculation. So instead of endlessly talking about it, let’s get direct feedback from the users.

I know that many UX Designers use post-it notes on a wall to organize thoughts and create a taxonomy. However, what do you do if you don’t have a wall? And what if you do if your tester is not located in the same room as you? In other words, you need to perform the card sorting remotely.

I looked high and low for online and electronic resources to perform a card sort. I found that most of the online options were either too expensive or simply did not offer the functionality I was looking for. In the end, I settled on the free Mac program called XSort. This great little program (though visually very outdated) had the basic features I needed to perform a card sort. It allowed me to have more than 10 cards, it had the ability for the user to create subgroups within groups, and the cards would not automatically “snap” in to place like some services would. The users could place the cards wherever they wanted to on the screen.

So far, we have performed a few pilot tests with a handful of doctors to work out some bugs. The main lesson we are learning is that what the user is saying as he/she is going through the card sort is actually more valuable than the actual results. So instead of “throwing the test over the wall,” or in the online word, just sending out a card sort link and viewing the results, it is actually better to have the user talk you through their thought process. What is also valuable is that being able to moderate the card sort, and to answer technical or clarifying questions probably produces more accurate results. If a user is confused about a term or abbreviation, he or she might categorize that differently, and thus throwing off the card sort, than if the tester clearly understands the term. Finally one more valuable gem that I realized while performing cards sorts: Keep your mouth shut! Let the tester talk you through the awkward silences. If you must speak, ask probing and clarifying questions. But do your best to try not to suggest ANY way that a tester could group items. They tester will struggle at first. But that is OK. Just let them absorb all the cards and try to make sense out of them the best way that they can. You will get great user feedback if you actually let the user provide you that unbiased feedback.

The bottom line lesson here: Yes kids, card sorting can be used for more than just organizing navigation of a website. Try it out!

Researching new topics: Medical travel sheet

Travel sheet UX research and discovery by Jennifer Blatz
Master lists like this can help people remember conditions they might otherwise forget in a medical examination.

Travel sheets are a traditional medical document used by doctors as a sort of a check list of conditions. It’s a quick way to mark items that a patient may or may not have.

What do I know about medical exam travel sheets? Absolutely nothing! But that is a great start for any UX Designer. You don’t have to be an expert on your subject so start researching. In fact, the less you know can work to your advantage. Approaching a topic from a completely new and innocent perspective allows you to empathize how someone else who is new to the subject will be introduced. You have fresh eyes, less bias and a lack of knowledge to jump ahead of yourself.

So if you don’t know a lot about a topic then get started on learning. Use the web to research what others have said on the same topic. I don’t have to tell you the wealth of resources there are online. Also, talk to your stakeholders and clients to learn from they. they know their subject, and they should not be afraid to share this valuable information with you.

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.

Creating Wireframes for Dashboard Development

Jennifer Blatz Design UX

 

Wireframes are not for everyone. I understand there might not be time to create wireframes. Some people don’t see the value of this middle step. “Just sketch out some ideas. Once you like something just code it up.” Others may not have it in the budget to create some deliverables.

Wireframes and deliverables by Jennifer Blatz UX
Wireframes can be created in a variety of programs. I chose Adobe Illustrator to create these first drafts of the dashboard.

I have to admit, I am guilty of not always creating wireframes. To me, they can be a luxury. There are times I don’t really have the time or the patience to go beyond sketches (if I have even created those) to going to the middle step of creating wireframes.

I strongly suggest that if you do have the time, and the budget, that you should make the effort to create some static wireframes. Here are a few advantages of creating wireframes:

  • Get the concepts out of your head and on to a page/layout
  • Visualize how your designs might work
  • Get early feedback on your designs before it goes in to code
  • Allow for quick changes before too committed to design
  • Facilitate discussion across the team and with stakeholders
  • Provides clarity for communication
  • For developers to understand the functionality of the site
  • To show the information architecture and navigation structure of websites
  • Cost-effective level of fidelity for quick changes
  • Print

Create UX Deliverables to Build up your Portfolio

There are many people trying to figure out how to make the jump in to the UX field. I too, not too long ago, was trying to transition (or to use the buzz word “pivot”) in to the field of UX.  Thankfully, I made the transition and I am now a UI Designer. However, it took a lot of hard work, networking, self discipline, education and pushing myself to learn more about UX every day.

Jennifer Blatz UX design deliverables
Use all levels of fidelity to show your progress through the UX design process.

One way I went about getting experience about UX was to learn as much as I could about the deliverables in the UX field. I would hear a term like “personas” or “wireframes” and decide that I was not only going to learn as much as I could about these topics, but I was also going to put it in to practice.

UX deliverables like performing a competitive analysis can show progress in a project.
UX deliverables like performing a competitive analysis can show steps in a project.

Here’s an example. Say you are a web designer for a flower shop. Sure, you could just design the website per the shop owner’s request. But why not take it a step further? Why not do a bit of discovery and research before starting the design project? You could interview the owners and customers to find out what the business goals and customer goals are. You could do a bit of ethnographic research by observing people shopping for flowers or employees performing a transaction. Sketch our a few concepts before diving in to the code.

Jennifer Blatz design UX deliverables
Creating a mood board helps set the tone of a project and informs you of what designs already exist in the same arena.

If you are trying to get experience in UX, and want to build up your portfolio, use some or many of these methods to show that you are so much more than a visual designer or developer. Show off your analytical skills and how they are applicable to a career in UX.

Here is a brief list of UX deliverables to get you started:

  • User Stories
  • Personas
  • Competitive Audit
  • Sketching
  • Stakeholders Interviews
  • Brainstorming Sessions
  • Moodboard
  • Prototypes
  • Annotated Wireframes
  • Storyboard
  • Information Architecture (Taxonomy)
  • Task Analysis
  • Interviews
  • Ethnographic Observation
  • Heuristic Evaluation
  • Examine Business Goals
  • Examine Customer Goals
  • Content Audit
  • Sitemap Creation
  • User Flow
  • Usability Testing
  • A/B Testing
  • Card Sorting
  • Pattern Libraries
  • Site Map and Architecture
  • Whiteboard and Sticky Notes
  • Functional Specifications
  • Interactive Mockups
  • Style Guide
  • Surveys
  • Market Research
  • SWOT Analysis
  • Use Case Scenario
  • Creative Brief
  • Diary Study
  • Navigation Model
  • Web Analytics
  • Persona Empathy Map
  • Affinity Diagrams
  • Ideation Workshop
  • Task Model
  • Cognitive Walk Through

Now take all of these deliverables and practice creating them. Then,  use the most important UX skill of all: Tell us Your Story.

Ethnographic research – getting to know the environment

Jennifer Blatz Design user research UX UI
Members of hospital staff are working in their natural environment. In this case, a dog is getting prepared for a procedure a technician reviews X-rays on a computer.

One way to really understand how your users work on your product is to view them in their natural environment. That puts their working circumstances and environment in perspective. By observing people, you see things they would not normally tell you. Maybe because it’s so routine they don’t realize they are performing such actions. Maybe because they do not think it is relevant. If you just observe a person in their work situation, then you can decide what actions they take are related to the software or product you are working on.

Here are some questions to keep in when when you are performing an ethnographic research study:

  • Is the work place quiet and calm?
  • Do the users get interrupted a lot?
  • What other tasks do they do while working on your software or product?
  • How is the work station set up? Is it on a desk?  A counter? Shared by several users?
  • What real world objects do they use instead of using the computer? (like post-it notes and pens)

You can learn a lot by acting as a “fly on the wall” and getting a feel for how the workplace is run and how the software interacts in that work flow.

Jennifer Blatz UX User experience interface design ethnographic research
The doctor shows me how her files are situated on a wall so that she knows what items need her attention.

 Value of Ethnographic Research

I cannot express enough how important it is to get out of the office and get in to the user’s real world. In the photo above, had I not visited this doctor in her office, I doubt she would have told me about her paper files organization. It’s just as useful to understand a person’s physical environment as it is to understand their electronic or software environment. That way, you can figure out how you can make the two world meet seamlessly.

Plus, you get to see things like these cutie pies.

Jennifer Blatz UX research User interface puppies software

Exploring options in UX design

I think it is always good to try out different ideas when working on a project. I know that time does not always allow for exploration of several options. But I often find that by playing with a few different ideas, a good concept emerges that you did not expect.

If you are tied too strongly to one design, this expansion of ideas in to something better might not happen. So I encourage you to take some time to always try out different design ideas and layouts and see where the journey takes you. It is often surprising that the first idea you come up with, and the one that you thought was “perfect,” might not actually be the best. Play around with design a bit. That’s what makes it fun!

Here are some examples of me trying out different ideas of a page on a mobile website. Though they have the same content, the execution of the design varies quite a bit. Which design do you think is the most effective? How would you improve them? I am always happy to receive constructive and helpful feedback.

Exploring design option for a mobile website Jennifer Blatz User Experience UX Design
Exploring design options for a mobile website.

The discovery phase in a new UI project

Jennifer Blatz design research and discovery UX
Looking at design examples of dashboards that already exist helps me to get in the right mindset of designing something similar, and hopefully better.

I find that the best best place for me to start on a new  project is to see what’s already out there in the world. I like to do a bit of research, and see what items exist that are similar in design and purpose. It helps me to think about possibilities, what I like and what I don’t like.

I am currently in the process of designing a Dashboard that will be used in several veterinary hospitals. Having never designed a dashboard before, I thought I would scour the internet to see what visual examples I could use as inspiration on helping me get started.

After viewing various dashboard examples, I figure out what traits apply to my design concept, and what do not. Even though I might not have a pie chart in my concept does not mean I would discard a design completely. It’s often useful to pull pieces from several designs and combine them in to one.

As you can see from the collage of Dashboards above, they have a variety of components. Some work within my design and some do not. As the project progresses, we will see if any of these designs or pieces of the design end up in the final product.

Creating wireframes for CoCo Website

We are getting so close to implementing actual design. I created a few drafts of a wireframe for an upcoming client meeting. Wireframes are a great way to communicate.

I love that wireframe can be used as a discussion point for so many things:

  • Take your sketch to the next level
  • In some instances, ad branding color and logo
  • Show basic flow of page
  • See if you and your client are on the same page
  • Illustrate some design ideas, and discuss interactivity or animation potential
  • Allow the client to modify concepts because you are both looking at the same thing
  • Working together in person to come up with a better solution

wireframe as a UX deliverable

 

Email design in the UX World of mylife.com

As a UX Visual Designer at mylife.com, I design simple and innovative solutions to complex User Interface problems. Create multiple iterations and concepts for the final online product for desktop and responsive mobile formats. Actively participate in a fully integrated agile/scrum team with product managers, developers, engineers, QA and others. Recommend and implement copy and design changes to improve customer conversion and engagement.

CC-Fail-ID-Premium-Email-3v1-10-14 Onboarding-Welcome-ID-Prem-email-4v4-10-14 Privacy-Meter-email-Cheetah-9-14

Visual designer for my life.com

I will soon have some work samples on the regular website in my portfolio, but I wanted to share some of the projects I’ve been working on as the UX Visual Designer at mylife.com.

As a UX Visual Designer, I design simple and innovative solutions to complex User Interface problems. Create multiple iterations and concepts for the final online product for desktop and responsive mobile formats. Actively participate in a fully integrated agile/scrum team with product managers, developers, engineers, QA and others. Recommend and implement copy and design changes to improve customer conversion and engagement.

User Experience Visual Designer at my life.com
User Experience Visual Designer at my life.com

CC-Fail-PRR-Email-10-14

Website Evolution: Sketches

It’s great to get some ideas out of your head and on to some paper. I know it may seem strange. But sketching is a great way to brainstorm and to visualize how things actually fit together on the page or screen. Plus sketching is a great communication tool. Want to have a discussion about some of the ideas you have? Sketch them out and use them as talking points to move the project forward.

I used skating and the first phase to exploring some ideas for a history page I was working on for a website redesign.

Use sketching as a communication tool to get the ideas out of your head and on to paper.
Use sketching as a communication tool to get the ideas out of your head and on to paper.

Website Evolution: Wireframes

After sketching a few ideas, one can take these rough sketches to the next level with wireframes. This is a great way to explore more ideas, yet not commit yourself to a high-fidelity design. I created this wireframe in Adobe InDesign because that program is quick and easy to use (for me) and has all the functionality one needs to create a wireframe.

Wireframes are a good middle step between touch sketched and a high-fidelity mock up.
Wireframes are a good middle step between touch sketched and a high-fidelity mock up.

How to do a Content Audit

Is your company thinking of updating their website and you need to figure out what content already exists on your site?

AND what new content they want to include?

AND what old content should be carried over in to the new site?

Then is sounds like you need to do a content audit.

What is a content audit?

According to Wikipedia a content audit is the process of evaluating content elements and information assets on some part or all of a website. 

In a related term, content inventory, is a quantitative analysis of a website. It simply logs what is on a website. A content inventory will answer the question: “What is there?” and can be the start of a website review. A content audit will answer the question: “Is it any good?”

Specifically, Slater states that the content audit can answer five questions:

  • What content do we already have?
  • Who is making this content?
  • How do people find it?
  • How is it performing?
  • Is the content current (accurate) or outdated?

I came across a great, and very in-depth resource to assist you with your content analysis. On The Moz Blog there’s a great article called “How To Do a Content Audit – Step-by-Step” and it chock full of great resources to help you get started.

Here is a breakdown of some of the topics covered:

A step-by-step example of our process

  • Step 1: Assess the situation and choose a scenario
  • Step 2: Scan the site
  • Step 3: Import the URLs and start the tool
  • Step 4: Import the tool output into the dashboard
  • Step 5: Import GWT data
  • Step 6: Perform keyword research
  • Step 7: Tying the keyword data together
  • Step 8: Time to analyze and make some decisions!
  • Step 9: Content gap analysis and other value-adds
  • Step 10: Writing up the content audit strategy document

Enjoy and good luck!

 

The difference between UX and UI

I find that User Experience and User Interface are often used interchangeably. I was not even sure that I understood what the difference was. So I decided to do a bit of research on the internets and compiled a brief list describing each discipline. I know these are long lists. If you have some comments, please share with the group.

User Experience

  • UX is the overall experience one has with a product or service, which can include a UI.
  • User Experience is how they feel when they look at the site, aka the broad scope.
  • The interaction itself
  • Includes interfaces
  • Addresses all aspects of a thing as perceived by a person
  • UX architecture intelligently provides for the user’s interactive experience via features and functionality of a software-based product or service.
  • UX-er is known as the primary user-advocate on a team
  • UX informs creative
  • Developers are building what UX is architecting, and creative provides the visual look-and-feel based on UX architecture and brand requirements
  • UX design is all the methodological steps that lead you to the conclusion on how to design the UI. They are responsible for how they feel when interacting with the interface or product.
  • Generally start by conducting user research and interviews. The goal with this is to understand exactly what the users’ needs are.
  • The wireframes are essentially the blueprints of what the UI designer will use to create the interface that the user interacts with.
  • One who designs the user experience for applications after doing user and workflow analysis, producing user-centered design artifacts such as personas, site maps, taxonomies, and wireframes. A UX Designer may also conduct usability testing on prototypes or finished products to assess the quality of a user experience.

User Interface

  • UI is typically a combination of visual design (the look and feel) and the interaction design (how it works).
  • User Interface design is the part of the product that faces the user when he looks at the site.
  • A tool
  • A point of interaction
  • A means of communicating between a person and a system
  • UI (aka ‘GUI’) visual design is the graphical user interface of a software product/service
  • The GUI is the visual layer informed by the UX architecture, but based on branding/style guide and visual design principles.
  • The design of a GUI should be heavily informed and guided by the problems that were solved during UX process.
  • GUI deliverables include mood boards, sketches, mockups, visual toolkits, final art assets and even CSS specs.
  • Interaction Design is the grey area between UX and GUI design.
  • Interaction, in our vernacular today, refers to the motion between states of controls and states of an interface.
  • Innately understand and prioritize what is best for the user and also understand the mechanics of physics and motion design; they also understand the capabilities of current dev tools such as CSS3 and HTML5
  • User Interface (UI) Design generally refers to the user facing side of any type of physical interface
  • A UI designer is responsible for everything that a user will see on the interface.
  • UI designer’s responsibility to understand what the users’ needs are. They must be able to arrange the interface in a simple way that allows for the best user experience.
  • One who builds user interfaces that support the exchange of information between an application’s users and its back-end processes and databases.
  • UI Developer’s output is functional, testable, shippable code that lets users accomplish their goals when using an application. The UI Developer is also responsible for documentation that allows others to maintain their code.
  • A UI designer may have the ability to create interactive designs, icons, colors, text, and affect a number of other elements that solve problems dealing with direct interactions to the user. Those elements are fantastic tools to affect user experience but they are only part of the equation.
  • The very minimum:
  • Learn HTML & CSS. Learn Photoshop. Learn basic typography.  Learn basic color theory.  Learn about layout.  Get a feeling for producing UX deliverables.  Learn about usability evaluation methods.  Learn the best practices for web design. Understand the difference between designing web sites, web applications, mobile applications, desktop applications and experiences.

Story board for Gluten in Beer App

GluteninBeer app story board
GluteninBeer app story board to illustrate a scenario of a use case.

As part of my GluteninBeer app development, I wanted to create a story board. Please don’t judge me on my drawing ability! As I child, I was a pretty good illustrator. Now, as you can see, I am complete crap. Oh well….

But illustrating some ideas, in other words, getting them out on paper, is always a good idea. So I thought creating a story board would be a good step in the UX process.

I drew this by hand, first in pencil, then reinforced it in sharpie. The I scanned it in to Photoshop to clean it up a bit. I also added the color highlights in Photoshop. This will be part of a portfolio piece for the GluteninBeer app development