JTL/HydroMassage

Device Control / App to Enhance the User Experience

PROJECT OVERVIEW

This was an exciting project and the one I was given the moment I walked through the door on my first day. Yay!!!! User Experience Research and Design, UI Design, Interaction Design and Information Architecture all in one super nifty device control interface. I thought I would explode.

The problem: User acceptance of the current device control unit was less than acceptable. Facility staff were struggling to explain it. Users were struggling to use it. Yet the product was on the rise and selling like hotcakes. A pretty perfect place to be if you are a UX'er. Could we improve UX? Could we increase user acceptance? Could we find a way to increase user love of this product even more by knowing the user? Heck yes we can!

On my first day I began gathering requirements from internal stakeholders and looking for solutions, day 1 might I remind you, to the problems I was hearing. It had an immediate effect.



MY ROLE

UX/UI/IxD/IA
User Surveys
Comparative Analysis
Personas
User Flows
Iterative Wireframing
Formative Evaluation
Protoyping
A/B Testing
Interface Design/Icon Design
Visual Design
User Testing






Comparative Analysis

Starting with Heuristic evaluations, which are simply just looking at current solutions and finding out strengths and weaknesses. Heuristic because they might just not be the absolute solution, but one that is currently working. I began to see some alternatives to the way things were being done. I wanted everyone to like me so I decided to solve a huge problem right away. Ha Ha, really I just got lucky in presenting an idea, but it turned out to be one that stuck. This is where the Comparative analysis helped. I gathered elements, designs, objects that connected somehow with this project, presented to the team and from the mire came a solution on my first day, a solution we followed all the way thru and incorporated everything else around it. Now to see how the users feel about it.

Quantitative & Qualitative Research

Before I could sit down with people or do any research, I had to endure a cacophony of user complaints, client confusion and rhetoric that had been building for years., internal stakeholders wanted to be heard. (#worried)

Users were categorized as product users & facility staff (clients). We chose to query facility staff with a casual summative evaluation (quantitative), a sort of usability study of experience since this product had been in use for years and our goal was statistics rather than emotion. Later we would hit the users face to face (quantitative & qualitative) in person.  We setup a survey station at a very popular workout facility. Each member who offered input got a free month of HydroMassage use. Research covered all user types. Survey efforts included probing questions about usage, lifestyle desires and expectations as well as exploratory queries to determine new directions and user goals. On location we were able to investigate any interesting feelings or emotions regarding the product as experienced by those who used it repeatedly (This was not a usability test - no UI test during interview).  

Exploration

The exploratory queries setup were to determine design direction for the future versions of the touchscreen control. I felt like the meat in a sandwhich as surveying really came from two sides, past & future. In many cases of UX research, evaluating user experience is a method of extrapolating personality traits and behavior to determine pain points along a journey. In this case they freely shared their pain while requesting better stuff. Brilliant! The survey used a series of dichotomous questions since we were not looking for levels of measurment but simply a clear cut analytic and ease of questionaire for the user. Later in the survey was a series of contingency questions formulated to dig deeper only where needed and capture statistics in an efficient manner (e.g. "Do you enjoy multimedia content during your massage?" - if "Yes" the interactive would steer towards a priority approach of selection. If "No" we would not bother user with such questioning).

Personas

To meet the needs primarily of the users and secondarily of the staff we developed five overarching principles:

  • Understand a users personal time value and how they want to use it 
  • Understand users point of entry to the unit - each and every time 
  • Understanding why the experience of a relaxation device had to be less stressful 
  • What type of control was really necessary to the user, when and how 
  • What combinations of media or interaction would enhance the experience

When the personas were constructed, a focus was added to structure a mood line through each developed persona. This allowed us to collaborate, illustrate and contend user feedback into an understanding of the users high and low points of a particular day. We could then examine how we could insert and improve solutions to make this product a powereful engagement for the user. When communication to stakeholders and execs came about, this type of persona detail helped us explain the potential of advanced UX measures and the return of initial investment. We were then also able to request additional time & dollars to further the R&D of the project and any crossover dev needed for success. Exciting times were ahead!

Defining Pain Points

Before setting out to create the user journey of pain in a delightful little map illustration, I will sometimes define the points in a simple text chart with insight as to where problems exists in the mix. This can be a collaborative opportunity to discuss pain points with the team, extrapolate from user input and contend these points logically. Two minds are better than one, three are better than two..... The chart gives us something to communicate with others involved without having to send and excel file. 

User Flows

User flows were generated with persona construction in mind based on user observations, goals, motivations, etc. We were able to hypothesize several flows based on potential actions that would solve user dilemma but might live outside of the primary application UI as we saw it. The decision was made to explore several UI modifications or additions based on user research. We realized the solutions to user input would need to be achieved by developing certain internal and external solutions, but client relationship, revenue opportunities and UX solutions were now in scope as we understood more of what users were thinking and dealing with in their lives. We were also able to see the relationship between facility staff, users and the massage beds and could potentially solve several problems with new solutions. I was always told in my life "Theres 10 ways to skin a cat"

---

Imagining on Paper

Aw we explored opportunities to communicate UX on screen, ideas continued to flow in enhancing portions of UI to enhance user control. Sprints were defined in agile fashion to accomodate new ideas. The beauty of this development was in that we controlled 100% of the technology and the UX since we were creating the tech from the gorund up (i.e. circuit boards, wifi comm, bluetooth controllers, etc.) allowing us to achieve a level of control far more promising than previous versions.

Iterative Wireframing

Hi and Lo Fidelity wireframes allowed us to iterate on solutions. My original concepts (pictured here) mimicked the images we collected in the comparative analysis, depicting the human figure in the perspective of the user, laying down. Formative evaluation was issued informally amongst staff to improve usability and feature architecture and flush out initial concerns in an environment where people held back nothing and had zero regret throwing a creative person under the bus. 

Lo Fi Prototypes

We were able to use the wireframes in succession as lo fo prototypes to get feedback quickly. We printed them out and put them on screens to simulate touch capabilities, selections and drag and drop features within the space of the design.

Wire Flow

To determine the flow of the UI, we hit the whiteboard, taking into account what solutions or ideas we may have not yet wireframed, so this gave us an opportunity to solve some additional user informed design considerations.

Hi Fidelity Mock Ups

Once we decided to mock up the UI it began to take on a realistic presence and reveal design patterns that would help determine final visual design efforts. Iterations were done to present more graphical elements into the wireframes, merging the structure with color and visual aesthetic.

Visual Design

The final designs went through several iterations (pretty much like everything else), revising and refining. Options were built in to skin UI with client colors/backgrounds, options were refined, navigation was improved and formative user testing was performed along the way to tweak those little things you can't seem to see even though they are staring you in the face. In end stages we performed usability tests on and off the machine to get user input. Test performed on a MAC were recorded with video image of user and users were asked to comment aloud so we could get feedback. Probing questions in conjunction with anticapatory feedback was captured to qualify activities behind buttons. Usability tests help determine alignment of design thinking with user thinking and see if we have done our job right. Even if we had, we would probably iterate again.

Prototype

Below is the link to the Touchscreen V1. This is a FLASH module and will require the flash plugin be resident. This prototype is not the final product and may contain glitches. This was an essential part of our testing process and attributed to many of the changes made after this revision and much of the communication to stakeholders and investors at this part of the project.

view prototype v1