Overview

This app was created as a portfolio project in a graduate level HCI course. Adapted from the website http://splendidbarre.com/, this app allows users to learn about the fitness studio classes, purchase memberships/class passes, and register for classes. The design for the application utilized Nielsen's Heuristics, GenderMag, and a usability study to improve its usability. More details are below.

Design Process

I originally chose this concept based on my own experiences with the fitness studio website. While I do not think it is a bad site, I wished it was available as a more convinient app and was more suited for mobile use (less clutters, larger buttons, easy menu, account management, etc). 

Paper Prototype (Design Principles and Usability Testing): The paper prototype of the design began with much influence from the original website. The processes for purchasing passes and registering for classes was very similar, but formatted for mobile. Additionally, I designed a new homepage and landing pages for the app. This paper prototype implemented a few design principles such as having internal consistency with the styles of buttons and text. I conducted a usability test with a participant and determined that I had a few blindspots in the design; namely lack of a few back buttons and some cluttered text.

Revised Paper Prototype (GenderMag Evaluation): After the usability test, I revised the prototype based on the feedback from my user. I also redesign some elements that were cluttered or redundant. I then evaluated the second version of the prototype (with a classmate) using the GenderMag Method with the Abi persona. The findings revealed that while it was likely that the persona would be able to complete the selected use case. However, 41% of the questions answered in the evaluation resulted in gender inclusivity bugs. For example, there were a few places where the persona lacked information such as not specifying the requirements for the user's account password.  There was also some inconsistency in the labeling of the pages. 

Functional Prototype: After fixing the issues found in the GenderMag evaluation and redesigning a few elements, I began to create a functional prototype in Figma. Having used Figma before, I was fairly comfortable with the designing and prototyping workflow. Working in Figma also allowed me to tinker with the appearance of elements like overlays.