Category Archives: UX

UX, UX Deliverables and Assets

Journey map to understand the flow

Leave a comment
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.

UX, UX Deliverables and Assets

Card Sorting for the Enterprise Interface

Leave a comment

 

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!

Education, UX

Information architecture heuristics by Abby_the_IA

Leave a comment

Abby Covert Information Architecture Heuristics

Findable – Able to be located

Is it Findable?  Can users easily locate that which they are seeking?  How is findability affected across channels and devices? Are there multiple ways available to access things? How do external and internal search engines “see” what is provided?  Is information formatted with results in mind?  What is provided to make the delivered results more useful?

Accessible – Easily approached and/or entered

Is it Accessible? Can it be used via all expected Be aware that upwards of 20% or more of the channels and devices?! worldʼs population has. How resilient and consistent is it a disability. when used via “other” channels?  The internet is a public place. Does it meet the levels of place. Itʼs like building a ramp to your building, or accessibility compliance to be refusing to be  considerate of those users with disabilities.

Clear – Easily perceptible

Is it Clear?  Is it easy to understand? Is the target demographicsʼ grade and reading level being considered? Is the path to task completion obvious and free of distraction? Would a user find it easy to describe?

TOP 3 Clarity Offenses

•  Corporate underpants: When you are obviously making a navigational decision based on your organizational structure, not user decision paths.

•  Inside Baseball: When you are calling something a term that is unclear to anyone that doesnʼt work for your company.

•  Weasel Words: When you are being purposefully unclear in language to avoid making a promise or decision about process or commitment to a user.

Communicative – Talkative. informing, timely

Is it communicative?  Is the status, location and permissions of the user obvious? How is messaging used throughout? Is messaging effective for the tasks and contexts being supported? Does the navigation and messaging help establish a sense of place that is consistent and orienting across channels, contexts and tasks?

Useful – Capable of producing the desired or intended result

Is it Useful?  Is it usable? Are users able to complete the tasks that they set out to without massive frustration or abandon?  Does it serve new users as well as loyal users in ways that satisfy their needs uniquely?  Are there a few navigation options that lead where users may want to go next? Are they clearly labeled?

Credible – Worthy of confidence, reliable

Is it Credible? Is the design appropriate to the context of use and audience? Is your content updated in a timely manner? Do you use restraint with promotional content?  Is it easy to contact a real person? Is it easy to verify your credentials?  Do you have help/support content where it is needed? Especially important when asking for sensitive personal data.

Controllable – Able to adjust to a requirement

Is it Controllable? Are tasks and information a user would reasonably want to accomplish available? How well are errors anticipated and eliminated? When errors do occur, how easily can a user recover? Are features offered to allow the user to tailor information or functionality to their context? Are exits and other important controls clearly marked?

Valuable– Of great use, service and importance

Is it Valuable? Is it desirable to the target user? Does it maintain conformity with expectations throughout the interaction across channels? Can a user easily describe the value? How is success being measured? Does it contribute to the bottom line? Does it improve customer satisfaction?

Learnable – To fix in the mind, in the memory

Is it Learnable? Can it be grasped quickly? What is offered to ease the more complicated processes? Is it memorable? Is it easy to recount? Does it behave consistently enough to be predictable?!

Delightful– Greatly pleasing

Is it Delightful? What are your differentiators from other similar experiences or competitors? What cross channel ties can be explored that delight?  How are user expectations not just met but exceeded? What are you providing that is unexpected? What can you take that is now ordinary and make extraordinary?

These heuristics are provided by @Abby_The_IA

You can view the IA Heuristics by Abby Covert Slideshare deck of the presentaiton.

UX, UX Deliverables and Assets

Creating Wireframes for Dashboard Development

Leave a comment
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
UX, Web Design

The Practical Psychology of Conversion

Leave a comment
Jennifer Blatz Design UX color theory in buttons and design
Keeping in mind ideas about color theory can help you in your design.

I recently came across an article titled, “The Practical Psychology of Conversion” and I thought it had some great points to remember when designing a web page. Here are a few highlights.

In design and implementation of a call to action, everything from contrast, clickability and placement to directional cues affect buyer behavior.

Some of the recommended action copy to use to convert:

  • “Get” something vs. “Buy” or “Download” or “submit”
    • one of my favorites: “Get the thing” (this was the button text to buy Louis C.K. tickets on his website)
  • “Add to cart” vs. “Buy Now”
  • Start
  • Begin
  • Find
  • Become
  • Learn
  • Receive
  • Launch
  • Achieve
  • and of course, a healthy use of Free

In fact, the 5 most persuasive words in the English language are:

  • You
  • Free
  • Because
  • Instantly
  • New

 

UX, UX Deliverables and Assets

Create UX Deliverables to Build up your Portfolio

Leave a comment

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.

UX, UX Deliverables and Assets

Ethnographic research – getting to know the environment

Leave a comment
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

UX, UX Deliverables and Assets, visual design

Exploring options in UX design

Leave a comment

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.
UX, UX Deliverables and Assets

The discovery phase in a new UI project

Leave a comment
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.