Hello! This is a continuation of my project work as a student at Juno College for Sweat & Tonic, a boutique fitness club located in Toronto, Ontario. The purpose of this project overall is to redesign or amend an existing UX user flow for an online fitness club. To see the first portion of this project, please send me a message!
In the first project, the goal was to research and analyze Sweat & Tonic’s digital presence, their website and their mobile platform, and their user experience in terms of their online checkout flow when booking a class, and identify areas of improvement. In my research I uncovered a few usability issues with their website.
USABILITY ISSUES
- The phone and website applications are desynchronized server side. I can login on their website just fine, however, I have no such luck logging in to their app on my phone. However, since this is a developer/engineering issue, this problem cannot really be remedied from a design standpoint.
2. Some functions or buttons on their website are a bit ambiguous, such as the settings on the right which includes a class cancellation button and an
“Order Item” button, which doesn’t seem to do anything. In addition, the avatar at the top right is a randomly placed feature that is actually a button for an entire list of account options.
3. Responsive Design Issues — Another problem encountered is the websites lack of support for smaller resolution displays. Resizing their website in a browser window down to a certain size eliminates navigation options for their website.
4. AODA Accessibility Non-Compliant — The colour hues Sweat & Tonic have chosen to use on their website actually fail to meet AODA AA and AAA standards for accessibility. This is detrimental for users who may face visual impairment.
I’ve attempted to resolve some of the existing problems above to the best of my ability, as well as improve their existing processes based on my own user research.
A link to an interactive prototype for their website redesign can be found here!
INITIAL DESIGNS
After uncovering these major issues, I immediately had a few ideas in my head that could be potential solutions to the design problems on their website. Immediately I had thought of ideas such as adding a toggle button for accessibility impaired users which would improve contrast ratio for visibility. I had also considered ways to improve user flow where I could, by either making information less ambiguous or designing processes to be more straightforward. Since Sweat & Tonic’s brand identity, to me, revolves around the themes of luxury, simplicity, cleanliness, and minimalism, I wanted to incorporate these ideas throughout the site and through their user flows.
After drafting up a few ideas via paper wireframes, I went to work right away in terms of developing interactive prototypes. Below are a few samples of the early renditions I had in mind.
I found it easy to create high fidelity prototypes due to their pre-existing layout to be very simple, and I did not want to stray away from those ideas in my mockups.
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.
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.
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:
- Changing all elements to be light-on-dark provides enough contrast ratio for the website to pass AA and AAA accessibility standards (I checked!).
- While the original layout didn’t provide enough contrast, this change requires no effort on the club to sacrifice their brand identity by changing any of their hues, but is rather just a flip in how to utilize the existing colour triad.
- Dark mode is really trendy right now :).
The next issue at hand was to improve the calendar function for the website’s online booking process. The photo above is a mockup of the first iteration. It’s almost a 1:1 rendition of the current calendar function on the live website right now.
The common feedback I had received on the calendar function is the lack of use of the y-axis to indicate data and the overall messiness involved in having the start time for each class in each box. Users found it exceedingly difficult to search for a class because, despite the calendar indicating each class in chronological order, users still had to look through each box in order to find the corresponding time they wanted to choose.
Again, based on the premise that we humans are a taxonomical species, and very much like to categorize things, I made better use of the lack of a y-axis for categorizing information, and used it to display data in an easier manner.
In addition to adding the time on the y-axis of the calendar, an arrow function at the bottom allows users to quickly identify additional timeslots later in the day, and scroll down the calendar.
A number of users also expressed issues with the font weight of some elements such as this booking modal, as well as the weight of fonts on the buy page when replenishing studio credits.
Hearing these concerns was a good reminder for me to be mindful of contrast when it comes to typography, and was definitely a lesson learned in my project. Normally, I’m very wary of contrast when it comes to things such as colour and size of elements on a page. However, learning to reduce contrast in font weight by not having such heavy and light fonts weighted against each other, was a very helpful experience.
FINISHED PRODUCT
Some sample screens are indicated below of the finalized product!
LESSONS LEARNED
Overall, redesigning this webpage has been such an insightful experience for so many reasons. It’s taught me a lot in terms of the scope of what’s involved in designing not only user experiences and visual design, but exploring the thought process of people, how they think, and how significant it plays a role in the design process. Some of the takeaways, aside from any above I may have already outlined, are:
- Usability testing has taught me the range in human thought processes going into website navigation. People use the internet not only for the obvious intention of fulfilling their needs, but the manner in which they get to that point is simply different. Case in point, the difference alone in watching two of the users I had tested interact with my prototype. User 1 would leisurely take her time reading through the content of each page, however each page she clicked on was relevant and brought her closer to fulfilling the task I had laid out for her. User 2, upon being informed of what he had to do, completely ignored most of the webpage content, and looked directly at key website navigators such as the menu icon and footer section in order to direct him to where he needed to go. That being said, he did get lost when his own search method yielded him no results. It is analogous to the difference in two shoppers at a shopping mall, where one strolls through the mall looking generally at apparel that interests her, and the other goes straight to the information kiosk to look for the store in question.
- Effective design doesn’t have to be drastic. The pinnacle purpose of user experience design has always been human/user centric, a very empathetic perspective. Keeping this in mind, it’s important to not get caught up in designing things to “look more aesthetic” (although that did cross my mind a few times). Fulfilling the goal should always be the first and foremost principle, and the visual design aspect of it is complementary (but not insignificant, and definitely not mutually exclusive). I believe the brand identity of the studio that I chose to do this case study on helped to make it easier to a degree, as it supported my own personal taste for simplistic and clean design (although I know it will be important to sometimes avoid having this type of bias).
- Going against the grain is an uphill battle. In my experience, this idea is true in two ways. The first is going against current user thought processes and expectations. For example, most Internet users would probably expect the search bar of a website to be located at the top, or the logo of a company on a website to bring you back to a home page. In part, a lot of this is intentionally done by web developers, trends, principles, and perhaps a dash of science. It’s very much done by design. And it has been interesting to see how going against this expectation triggers surprise by participants because it defies mental models. The second is going against current design trends. I think the idea that design should be innovative can be a very common belief, however, if that’s true, getting to work on something like this has shown me how hard it can be to break that barrier. I can only imagine that the type of good design that breaches new heights must be simple, elegant, innovative, genius, groundbreaking, and a hundred other adjectives all at once.
STYLE GUIDE
CONCLUSION
Overall, this case study has been an extremely fun experience and every moment of it was enjoyable. From learning and applying UX and UI concepts to performing the research and socializing/experimenting with users. In addition, applying critical thinking skills and utilizing it to create insights greater than on-the-surface observations has felt extremely rewarding. I would also just like to give a quick thank you and to the instructors, mentors, and peers at Juno College. Cheers!
