Sweat & Tonic UX Redesign: Project 2
Tags: UX Design, UX Research, UX, UI Design

USER TESTING

I followed up into putting these mockups into action right away by piecing them together in InVision. Afterwards, through the help of peers and friends, I had tested out my designs with five different users, performing usability testing and acquiring information and feedback.

Sample transcript with one interviewee, courtesy of otter.ai!

The overall experience of interviewing five different people provided very rich details and feedback. Positively, the trends that I noticed were that most found the website very simple and intuitive to use, as well as noting the sites sleekness and elegance. This reaffirmed to me that I had managed to maintain the overall brand identity of the website. In terms of constructive feedback, most of the opinions I had received were:

The placement of the accessibility button is awkward, as it’s not really in a position where most people would expect it to be.

The button itself is both conspicuous and transparent. It is conspicuous because the user was not familiar with what an “eye” icon would do, yet it was transparent because it was unique compared to other elements on the page.

The calendar function for booking a class is a messy experience, and could be organized more.

Certain fonts on some pages were too weighted and blaring out at the user, while fonts on other pages were too light, contrasted too heavily, and were more difficult to see

All of this data turned out to be exceptionally helpful, and would influence me in making a number of changes that I went back to the drawing board for, by creating new wireframes based on popular feedback.

IDEATIONAL PIVOTS

The first change I proposed to make right away was the placement of the accessibility button and change the icon. Based on the feedback I had received, I knew it was important to place the button somewhere more in line with user expectations. I tried to think from the perspective from a user, and just based on general, anthropological patterns. That being said, I looked into concepts such as existing website architecture, the concept of “normal flow” in web design, and the notion that humans tend to see things in patterns. Therefore, my existing idea was out of symmetry and it was important to place it within symmetry. I had thought about placing it within the menu, however, I didn’t want there to be too much effort involved on the user to go searching for it. This led me to place icon in two places.

Placement in the top left of the page keeps it in line with other navbar icons, keeping symmetry.

Additional placement in the footer to appeal to most users expectations who also looked at the bottom of the page for accessibility, since most footers contain an index for the site.

Replacing the icon was the next change involved in regards to the accessibility element. My initial thought process behind an eye as an icon was that it represented a “visual” effect in some sort of way. However, most users are not going to be familiar with this line of thinking. As such, using the universal icon for accessibility as indicated here on the left brings expectations in line with most users. The usage of this icon would already be obvious to those who are reliant on web accessibility, and fulfill a specific user need.

Accessibility Mode: ON

Turning on accessibility mode changes the website from a dark-on-light overlay to a light-on-dark overlay. While this change is essentially dark mode in a nutshell, I think this change cleverly addresses 3 issues: