UI Designer
1 Week
Wireframes • High Fidelity Prototype • Landing Page
Upace is the only app that enables recreation centers, gyms and members to view occupancy crowds and reserve group fitness classes and cardio equipment.
Upace is the leading mobile platform to stay engaged and motivated by your recreation center. The customized technology allows any recreation center to control the mobile platform and directly communicate with their members.
For this project mood boards weren’t required but I did as I find it easier to start a style tile from a mood board than starting from scratch. I developed 3 style tiles but before I started gathering images I tried to define the concept by writing a brief description of what the mood board was based on.
The first one was based on the Upace blue and it’s characterized by a turquoise blue going into a deeper blue. The images are minimalist in nature and allude to the use of white space. The few design elements reflect this aesthetic choices and provide a direction to emulate in the design.
Following the concept behind the moodboards I designed the style tile for the upace blue. As such it featured the brand’s blue as a primary color with some darker shades for contrast. The typeface is SF UI and I chose it because it’s legible typeface but also a system one which cuts development time and implementation cost.
The client was really drawn to the images used in this tile specially the Zumba class one. She liked that image featured body-positive examples of woman but it also shows diverse people which harks back to the third design principle, “One size fits all: Everyone should feel like they’re a relevant part of the community.” The simple-line icons gives them a light feeling and are easy to read.
Because of the time frame for this project didn’t allow any UX work. We had to analyze the existing app and use those screens as wireframes and see where we could improve upon.
After a team meeting with the creative director we identified the necessary screens. To develop the interface we chose: the Home screen, Programs, Reservations and Facility Info. These screens carried enough of the app’s weight that we could create a complete enough flow to test on users.
Using the screens above I started working on my wireframes. In the first iteration I put the bar code front and center in the home screen to make it easy to find and use. After the bar code the most prominent items were the occupancy graphs. These let users know how busy the different areas of the gym are. Following the hierarchy we have the three icons above the tab bar. These buttons give access other sections that are not used enough to be in the tab bar.
Then we have the “Programs Screen” here it list the programs, or classes, provided by the facilities. Content is organized by: selected facility or all facilities, by day or the results of user search. The results are then shown to users by date. The third image is the screen showing the reservations a user could make. In this example the user reserved and elliptical machine. The last image is the Facility Info, where users can find the hours, phone numbers and other information relevant to the facility.
Because of the time frame for this project didn’t allow any UX work. We had to analyze the existing app and use those screens as wireframes and see where we could improve upon.
After completing the wireframes I stared putting in the content, brand colors and images. In the Home screen we get to see the bar code rendered and get an idea how it works. The bar code serves to gain entry to YMCA facility. Below we see the graphs for different areas of the facility. Colored circles and numbers represent the percentage of occupancy. Green being the most vacant to red being the most occupied. At the bottom of this screen we see the icons for “facility info”, “other programs” and “invite friends”. The first two are used regularly but the last one has very specific use. Which is when someone actually shares, or invite friends, to use the app. One thing I noticed after exploring the app is that what is usually labeled "settings" here is labeled “more”. Right away I thought this would be confusing to users so I made note of it to find out during user testing.
After testing the first version my presumption was correct. After asking users what they'd expect to find after tapping "more" none of them were correct. Some even noted that this was a "settings" screen after tapping the button. The users had a hard time with the circles indicating occupancy. This was because they were color-coded but didn’t show an increment in occupancy. Some user found the home screen boring. Users also found the calendar atop the Program screen odd noting: “It’s weirdly cut off”. Users also noted that it was kind of difficult to see the highlighted day. For the Facility Info some user noted difficulty reading the header of the card . There was good feedback as well. But the feedback highlighting what users don’t like is what brings change.
Back to the drawing board, literally. I spent the weekend sketching and rethinking solutions for the occupancy graphs. I redesigned the home screen by adding an background image and breaking out the occupancy into sections. I changed the color coding to represent areas instead of occupancy and moved the invite friends feature to settings. Also I changed the way to use the bar code works and turned it into a micro interaction. User tap the bar code button and a screen overlay pops up with the bar code and the brightness turned up so it’s easy to scan.
I changed the way to highlight the calendar day/date by adding a circle around it. In the Reservation screen I added a cancel button. This decreases the necessary steps to cancel a reservations. This change was also applied to added programs. Finally I made the Facility Info card bigger to display more information. Also added a button to call the facility's phone number in case users need to.
Users did not like this version of the home screen. They thought the image with the white overlay looked outdated. They didn’t like the background image. User didn’t understand the occupancy graph, again. When presented to the client she thought there was some wasted space. I agreed with the feedback. Users did liked having the “add” button in the program list view. This eliminates the step of heading into the actual program to add it.
With this feedback in mind I went back to redesigning the home screen this by doing a bit more visual research. Thanks to the Apple Watch more people got used to seeing rings as way to visualize an activity being completed. This has lead to other designers adopting it in their apps and dashboards. I went back to it but this time as a ring that fills with a higher occupancy count. Also colors and percentage to reinforce how full it is. I added icon buttons for each of the areas the facility might have. For the calendar in Programs I changed the circle from outlined to a solid circle. This brings more attention to it and makes clear what day has is selected. I eliminated the circle underneath the "add" and "cancel" buttons. Something the creative director emphasized was that it look Android pattern. This also applied to the segmented controls and the change was made to the final version.
Unfortunately we were at the end of the project and I didn’t get to test this version. But I wasn’t happy with the result of the home screen yet. Which meant very little sleep for me as we only had three days before submitting our work. Along with a marketing site, style guide and a package with the rest of the deliverables. Which then had to be approved before delivering it to the client.
I decided to keep the image used in this version since the client, and I, thought it aligned better with the brand. I thought the visibility of the UI elements was affected in the previous design. Which is why I added a white backdrop with some opacity to separate elements into containers. The opacity allowed user to make out the image. At this point all the app’s card elements that didn’t span the screen had sharp corners. To give them a softer appearance I gave them a noticeable radii. Which was also applied to the similar elements in the home screen. The other change I made was eliminating the search bar. Replacing it with a search icon in the nav bar that when tapped extends into a search bar.
In the Program screen I realized that having the add and cancel buttons in red could be confusing. So I changed “add” to green and the “cancel” button remained red. With no further changes made to the Reservations screen I replace it, here, with an image of a selected program from the Program screen. In this case the child care, which is available for free to YMCA members while they exercise. But it shows how an exercise class would displayed. Here, once a user taps the add button two buttons appear in it’s stead. The “change” and “cancel” buttons in case users need to update the reservation of the class or equipment. I further increased the size of the Facility Info card. This way it can accommodate more information if necessary.
As part of the final deliverables we also had to design the empty and error state screens. For Reservations I use humor with the hope of urging users to reserve equipment which would turn into motivation to exercise. For error state I use a pretty straightforward sad face and a smiley face for no alerts. This eliminates confusion as a empty screen might make user think content is loading.
