LISA ZANGERL
PRODUCT DESIGNER & MANAGER
Classes Tab on Explore
(Peerfit.com)
Peerfit is a digital health platform that connects employers and carriers with fitness experiences. It also allows users to book fitness classes and purchase gym memberships using credits. This project focused on the addition of a feature that gave users the ability to see all the fitness classes available on the platform for the upcoming week. Whereas before a user would have to select a studio and go to its detail page in order to see the available classes for that specific studio.
The team had already implemented a way for users to search by classes on the website. However, the app architecture was different from the web so I was tasked with finding a way to integrate the "search by classes" feature into our current app.
Platform: iOS & Android
Role: Lead Product Designer
Evaluation of Current UX/UI
The first step was to evaluate our current architecture/UX on the native app's "Find" screen to identify ways to optimize the experience as well as add the "search by classes" feature.
The image on left was the current "Find" screen on the app at the time. The screen had a search bar at the top and secondary navigation at the bottom. The "Sort" link opened up a new screen with filters. The "Map" link switched to a map view showing pins for the various studio locations.
When the user clicked on the "Map" link, the label would change to say "Studios" while the "Sort" link would grey out and become disabled.
UI Mocks
As I moved on to mocks: I focused on adjusting what was not working, optimized what was working, and using UX patterns to improve the experience.
The final mocks included: moving the "Sort" link to the search bar and then enhancing it with a filter icon. This enhancement places all the search functionality in one area.
Next, I sectioned off Studios into its own tab and then added a Classes tab. I also created a floating “Map view” button for users when they were on the Studio tab. When users initiate the “Map view” from the Studio tab, the floating button will switch to “List view” and the screen will show a map with pins for the studios.
Production/Implementation
I worked closely with the app development team to identify edge cases and ensure UX/UI would work for both Android and iOS. I then documented the interaction flows for the dev team to use when they implemented the changes.