COACHPALS
A B2C wellness professional network website that helps professionals network to support and guide your wellness journey
OVERVIEW
Finding guidance to help support your health and wellness journey can be tough. CoachPals makes it easier as a Wellness Professional Network designed for both wellness coaches and clients to connect. Whether you're looking for classes or a wellness coach, they've got you covered.
THE CHALLENGE
The founders of CoachPals requested a redesign of a responsive website with a logged-in experience. CoachPals' primary focus was to allow authenticated and non-authenticated users access to the homepage, recommendations, and discover pages. In addition, the client requested we design business/coach profile pages.
THE SOLUTION
For the redesign, the team focused on adding new features instead of completely redesigning the existing UI. We implemented the following:
Combined the homepage and search page to create a new landing page
Developed browsing pages for authenticated and non-authenticated users
Redesigned bottom navigation on mobile to improve visibility
Created new pages for business/coach profiles
Designed event cards with information and call-to-action
PROCESS
Discovery
Ideation
Design
Dev Hand-off
Reflection
ROLE
UX/UI Designer on a team of 5
TOOLS
Figma
Zoom
Slack
DURATION
6 weeks
DISCOVERY
kick-off meeting
The team got together to go over the client's requests for a redesign of their responsive website, implementing a guest mode, and authenticated and non-authenticated user flows. Additionally, the client wanted to update their current homepage adding recommended events and profiles based on the user's activity. During the rest of the meeting, we reviewed client assets and compiled questions to gain a further understanding of the client's needs.
client q & A
The client provided clarification on the questions compiled by the team. Our main takeaways from the client were:
Inspired by Netflix's homepage layout with card images and information
Designed the homepage to be more engaging to the user with professional profiles, events, and recommendations
More organized and cohesive information on professional profile pages
70% of users access the website on mobile devices, what we redesigned should be presented on mobile as well
Changed the landing page so users can browse without logging in
Evaluation
In order to get a better idea of the user experience on CoachPals, I decided to make an account and familiarize myself with the current website.
My experience as a new user navigating the site proved to be somewhat difficult and confusing.
I found it inconvenient for the search to only be accessible on one page. Options to follow, review or connect with a person or business were not easily accessible. The lack of recommendations left me lost on what to look for next.
IDEATION
USER STORIES
The client provided selected user stories that would be the basis for our redesign. As a user I want to:
Search based on specific criteria
See recommendations based on my interests
Access the bottom menu
Create a specific profile
Browse on Guest mode
SITEMAP
We collaborated as a team to create the sitemap to show the navigation of the new pages we would create and redesign.
Medium-Fidelity Wireframes
Now that we had our navigation mapped out through the sitemap, it was time to develop our mid-fi wireframes. The team split up the work individually, I worked on menu overlays as well as the non-authenticated user flow.
Accessible search bar
Instead of having a separate home and search page, we added the search bar to the top navigation for easy and constant access.
Recommendation tab
Users can browse events, community channels, and connections based on their profile, mutual connections, and past activity.
Guest mode
Both authenticated and non-authenticated users have access to the "Recommendations" and "Discover" pages.
DESIGN
STYLE GUIDE
Although a UI redesign was not the primary focus for the client, the team provided font updates and recommendations to the existing style guide.
UI INSPIRATION
The client mentioned how Netflix's home page inspired them. They informed the team they liked how Netflix engaged the user with cards presenting images, information, and recommendations based on the user.
UI ITERATIONS
To give the client a choice for the redesign, the team split up and came up with three UI iterations. We split up into pairs, and I worked on the third iteration. Since the client already had a set style guide, there wasn't too much to deviate from. The biggest difference in our variation was the use of a drop shadow for the event/profile cards.
High-Fidelity Wireframes
With the client's approval for the UI iteration, it was time for the team to split up and design our final hi-fi wireframes. I took on half of the profile pages, focusing on the Connections, Gallery, and Actions screens.
DEV HAND-OFF
DEVELOPER HAND-OFF
To ensure a smooth transition for the developers, the team split up evenly to complete the developer handoff to communicate our design decisions. My annotations consisted of how the flow works, and how icons change once selected, alongside the minimum padding for each component.
REFLECTION
This experience taught me that the role of a UX/UI designer was not solely to cater to the user but to also bring value to the business. Although the goal was to redesign an efficient user experience, the ultimate goal for the client was to create a better product to sell to the consumer. Throughout this process, I learned to express design decisions effectively, listen to the diverse perspectives of my team, and incorporate a higher level of design thinking, becoming more empathic to the user's desires and complaints.
In future iterations, I suggest CoachPals expand its color palette since it was reused from a previous product solely focused on yoga. Although yoga is a significant service offered on CoachPals, the site also has a focus on the business aspect of the wellness industry. If it was within the scope of the project, I would have redesigned the style guide colors into something more vibrant and modern.
In terms of CoachPals' goal to help people on their wellness journey with coaches and events, the redesign has made it easier to use. The user can now browse and view recommended profiles, generating more exposure for coaches and opportunities for clients to connect.