icon User Experience

Tool – Experience Journey Map

UX

Here is an example of an experience journey that I have tried to emulate for my projects. I like so many things about it. It has an easy to use layout with consistent keys and symbolism. It has guiding principles. It has the thinking-doing-feeling perspectives to keep it a user-centered process. It also has opportunities listed per phase. Actions can be taken on these opportunities in multiple ways. It is also easy for a team to set up minimally viable improvements along the way without having specific items prescribed. (Note: Items are blurred to protect any possible proprietary info.)

Training icon

Sample website – CAS

UX

The College of Arts & Sciences website was my baby for over a decade. There is a lot of my DNA embedded into this site. It was for this site, the 16 department sites, the 20 center and specialized sites, and the over 700 faculty sites that we set up a usability and training facility to incubate and share the use of technology for teaching, administration, and marketing.

Check out the College of Arts & Sciences at Illinois State University

College of Arts & Sciences at Illinois State University

Some elements of the site

  • Utilizes a web-based CMS
  • New feed from WordPress multisite also tied to email RSS feed
  • Custom filtered feed per 16 departments within the college
  • Courses listing tied to database and filtered per department
  • Applications tied to database and filtered per department
  • Faculty productivity system, Digital Measures, with data feeds both to the college site as well as individual faculty sites
  • SharePoint intranets for committee work, job searches, shared documents, internal forms, annual reviews, workflows, and grant submissions.
  • SharePoint custom web templates created for faculty website CMS system
Icon responsive

Tool – Adobe XD for prototyping

UX

I saw this marvelous demo from AirBNB about going directly from a sketch to an interactive prototype. It was what LEAN UX folks dream of! There is such a tight design language and asset library that it is easy to adjust sections to their responsive locations.

The bulk of the sites I have designed in my career have been in Adobe DreamWeaver. The corporate sites I have interacted with have utilized Adobe Enterprise Manager (AEM). Most of my small consulting sites (and my lazy portfolio) have used WordPress.

The concept of being able to easily go from a concept in Photoshop/InDesign/Illustrator to a coded system such as DreamWeaver/AEM seemed to have been addressed in the Adobe family by XD. When I started working with it around 2016 it was not very robust. It was still more of a visual representation and it still required front-end and back-end programmers and graphic artists to create web versions of the concepts. They have come a LONG way since then and are more quickly approaching that seamless transition from concept to code.

Example AdobeXD

Learn more about Adobe XD

Icon online

Tools – Online usability tests

UX

There are a LOT of great tools out there.

Usability Hub

I love using Usability Hub because I can set up a test at the beginning of a meeting and have the results by the end of the meeting. I used it mostly for preference testing between two alternatives or for first click testing to see if people would know where to start a process. I would most often pick a sample size of 50.

Learn more about Usability Hub

UserTesting.com

I used this tool both in corporate life and in teaching. It allows for a webiste to be provided, questions presented one at a time, and the ability to record the participant going through the site and answering the questions. I would use it for unmoderated user tests.

For example, one could ask someone to fill out an online application and make comments throughout the process. Also, one could ask what someone would EXPECT to see on a page, click on that page, and then indicate their reaction on what they saw compared to what they expected.

For students I would have them run 3 rounds of tests.

Round 1: For the first round I would introduce them to the tool, we would use the existing website as the baseline model, I would give them the questions to enter, and I would walk them through how to analyze and present the results.

Round 2: For the second round, they would provide their own updated website, they would use comparator questions from the baseline site, and I would help them create additional questions. Guidance was given on how to report the changes from baseline to updated site.

Round 3: For the third round, the students provided the questions, the updated site, the updated questions, and presented their results.

Learn more about User Testing

UserZoom

I liked using UserZoom for moderated online tests where I would want to select a panel of people and administer questions to them directly. One of the benefits of using this model is that we would not have the logistic issue of bringing people into a lab setting. It also allowed for us to do deeper dives or explore different emergent flows.

Learn more about UserZoom

Icon responsive

Method – Atomic Design and Design Language Systems

UX

Atomic Design

My coworker, Ryan Johnston, turned me on to Atomic Design as we were working on the digital library for corporate projects. I had been familiar with brand guidelines and reusable code but this took it to the next level. It truly took the individual pieces such as font and then scaled them up to form elements to banners to pages to sites.

Atomic Design by Brad Frost

Design Language System

Airbnb has this down to a super lean process where their design language system is so tight that they can take a sketch and convert it to code across devices. Check it out!

Learn more about Design Language Systems with AdobeXD

Design Language System. Working in the design industry for the… | by Swetha Suresh | UX Planet

Icon checklist

Tool – Nielsen’s Heuristics

UX

What is it?

  • Developed by Jakob Nielsen
  • Helps find usability problems in a UI design
  • Small set (3-5) of evaluators examine UI
    • independently check for compliance with usability principles (“heuristics”)
    • different evaluators will find different problems –evaluators only communicate afterwards
    • findings are then aggregated
  • Can perform on working UI or on sketches
  • I like to use it for baselines

Phases of Heuristic Evaluation

  1. Pre-evaluation training –give evaluators needed domain knowledge and information on the scenarios
  2. Evaluation –individuals evaluate –aggregate results
  3. Severity rating –determine how severe each problem is (priority) –Possible solution
  4. Debriefing –discuss the outcome with design team

Heuristics

H1: Visibility of system status

H2: Match between system and real world

H3: User control and freedom

H4: Consistency and standards

H5: Error prevention

H6: Recognition rather than recall

H7: Flexibility and efficiency of use

H8: Aesthetic and minimalist design

H9: Help users recognize, diagnose, and recover from errors

H10: Help and documentation

How to Perform

At least two passes for each evaluator

  • first to get feel for flow and scope of system
  • second to focus on specific elements

Assistance from implementers/domain experts

  • If system is walk-up-and-use or evaluators are domain experts, then no assistance needed
  • Otherwise might supply evaluators with scenarios and have implementers standing by

Where problems may be found

  • single location in UI
  • two or more locations that need to be compared
  • problem with overall structure of UI
  • something that is missing

Example Problem Descriptions

Example 1: Can’t copy info from one window to another

Violates “Recognition rather than recall” (H6)

The Fix: allow copying

Example 2: Typography uses mix of upper/lower case formats and fonts

Violates “Consistency and standards” (H4)

The Fix: pick a single format for entire interface

Severity Ratings

  • Used to allocate resources to fix problems
  • Estimates of need for more usability efforts
  • Combination of –frequency –impact –persistence (one time or repeating)
  • Should be calculated after all evaluations are done
  • Should be done independently by all evaluators

0 – don’t agree that this is a usability problem

1 – cosmetic problem

2 – minor usability problem

3 – major usability problem; important to fix

4 – usability catastrophe; imperative to fix

Debriefing

  • Conduct with evaluators, observers, and development team members
  • Discuss general characteristics of UI
  • Suggest potential improvements to address major usability problems
  • Dev. team rates how hard things are to fix
  • Make it a brainstorming session

Results of Using HE

  • Single evaluator achieves poor results –only finds 35% of usability problems
  • 5 evaluators find ~ 75% of usability problems
  • why not more evaluators? 10? 20?
  • adding evaluators costs more
  • adding more evaluators doesn’t increase the number of unique problems found

Decreasing Returns

Note from Nielsen: These graphs are for a specific example

Learn more:

Nielsen Norman Group: UX Training, Consulting, & Research (nngroup.com)

pic chart

Tools – Analytics and Data Visualization

UX

Google Analytics

This is the capstone of web analytics tools. I have used this for YEARS and it keeps getting better. One of my favorite visualizations is the user flow.

Sample Google Analytics flow showing shopping cart loop

Learn more about Google Analytics

SiteCat now Adobe Analytics

Omniture Site Catalyst was bought out by Adobe and is now called Adobe Analytics. I worked with a REALLY talented SEO guy who showed me a lot of powerful things that SiteCat could do! As a UX or Marketing person, it is great to be able to baseline and then compare after a site layout or process is changed. It also would help validate items that were screen clutter and NOT being used on a page or section.

Learn more about Adobe Analytics

Qualtrics

At the University I was the survey administrator and used a tool called Select Survey. I had trained 100s of faculty to use it so I was reluctant to switch to a new tool. A few professors in the Marketing Department in the College of Business really wanted to use Qualtrics. I set up a 50 user license to test it out. It blew me away with how easy it was to use. I also had the opportunity to use this a bit with our primary research gathering in a corporate setting.

Learn more about Qualtrics

Clarabridge

I did not administrate Clarabridge but used it for client experience dashboards and insights. I worked with a GREAT team that would build customer dashboards and do monthly reports and breakout analysis sessions with my quality assurance team.

Learn more about Clarabridge

Tableau

I wish I would have had more time to play with Tableau. It seems I would get a basic dashboard set up and not get the time to make it even more robust. My basic usage was to have data fed into an Excel sheet or a SharePoint list and then feeding it to a dashboard and displaying it in a usable manner. The tool can certainly do a LOT more than what I used it for.

Learn more about Tableau

PowerBI

This tool is super cool! I have done only the most basic processes. I have a colleague who was able to create a connection from her Forms item, have that put an alert on a Teams channel, have it add an intake item on her Planner board, and assign the task to people based on the fields selected in the form. Wow! She shared her flow with me but I am still looking for the time to perfect it for my needs.

Learn more about Power BI

Social Media Analytics

My talented colleagues at Illinois State University set up the Social Media Analytics Command Center (SMACC). Very few universities have a facility set up like this. I brought multiple tours from my existing teams in my corporate roles to see this HIGHLY useful tool and to give kudos to this center as an educational experience.

Here is an excerpt from their website: “Students, faculty, and researchers use the SMACC to identify public conversation from major social media platforms such as Facebook, Twitter, and Instagram, popular discussion forums, major blogs, and online news sources. Using specialized software they can then analyze these conversations for key data such as top influencers, trending keywords and concepts, audience metrics, geographic location of posts, user sentiment, and share of voice in the social web.”

Learn more about the SMACC

How it works

Tool – TechSmith Morae

UX

Techsmith Morae is a data analytics software that can be used for testing the usability and market satisfaction level of a product. Users get to understand their customer’s experiences and thought processes related to a particular product in real-time and make relevant changes. The software captures all the minute details of its user’s product testing sessions and offers hard and vivid data, consisting of real-life usability problems.

I used this tool at my IT facility at Illinois State University, for teaching my classes to run live subject usability studies, and as part of the UX team in my corporate roles. It has the ability for the facilitator to speak to the participant outside of the testing room, the ability to tag behaviors, the ability for remote observers to watch live testing, and the generation of video clips.

Techsmith Morae Picture in Picture

I read that Techsmith stopped selling Morae in 2020. I have seen a similar tool in use called Observer by Noldus but haven’t run a study with it myself.

Many moons ago I did some qualitative research with NVivo and Qualrus but haven’t used them since I had adopted Morae.

Learn more about Morae