To start off my design process, I interviewed students about their experiences with the current app.
The most important part of this redesign for me was addressing the pain points that me and many other students had while using this app. In order to identify the most common problems, I interviewed fellow students and asked them about their routines and experiences to see what they liked and didn't like.
Zoom in to check out our interview process!
The main problem users faced was that they could not access the barcode easily.
In order to access the gym facilities on campus, students must first load up the Aztec Rec app and scan a barcode. This was the most used function by far with many users opening the app every day just to do this. However, many users reported that they experienced annoyance or difficulty when accessing the barcode due to long load times and unintuitive navigation.
This was due to faulty design decisions that buried the location of the barcode.
In the old app, you would have to load into the home screen, click on the barcode button, load into a different screen, and then click on a button to load the barcode. Due to the sheer amount of content on the home screen, it made loading take from 5 to 15 seconds. It also made so finding whatever button you were looking for a nightmare.
To correct this, I focused on designing the barcode to be more accessible.
Flow Map
After creating personas for potential users, I created a flow map that charts out how users would navigate the app. This was so I could pinpoint how long it would take users to access the features that they use the most. This allowed me to make sure that the user's experience was very intuitive and made them feel comfortable and familiar with app.
Wireframe
Based off of the flow map, my grayscale wireframe was a way for me to plan out how I was going to design the content onto my screens. This allowed me to workshop the most important flows that users followed and plan where I would put the barcode to make it as accessible as possible.
Zoom in to check it out!
Initial Prototype
After working on the wireframe, I fully fleshed out the first prototype for this project. I added content, colors, and made it possible to navigate. From here I tested the prototype on students and asked them to click through it and provide feedback.
I specifically asked if they felt that accessing the barcode felt easier and if they could intuitively understand how to access and use content on the app. The feedback was mostly positive, but a common sentiment was that they wanted even easier access to the barcode.
Final Product
Focusing on Barcode Accessibility
I put access to the barcode on the home screen as a big red button. This made it so that whenever someone opened the app the barcode would be right in front of their face, making accessing it easy and intuitive. I also severely decreased the amount of content on the home screen and spread it out more evenly across different sections of the app. This makes it so that loading into the app takes less time, making the user experience smoother.
Final Prototype
