Plan Fit

UX & UI DESIGN | WEB RESPONSIVE
Role
UI Design | Web Design
Tools
Figma
Time
1 month
Team
Individual
Year
Oct - Nov | 2021
Website
https://www.planfit.es/
About the project
Plan Fit is a web application that relates to individuals with sports professionals, allowing you to book sessions directly from a platform.
Objective
Redesign the landing page and search page, making it clearer for users in order to connect professionals in the sports sector with people that like to train in different sports and create a exercise community.

UX CHALLENGES

Redising landing page & search page
I started an interview with a real stakeholder Leonor of Plan Fit, who is an entrepreneur running her own business in the sports sector.

I set out some questions to find out what were the needs of her business & find out how to make some improvements to have better browsing experience & engagement with new users & trainers to connect with each other, because the actual landing page was confusing and was not clear at all.

Understanding her mission, I started to research in order to solve her problems. (Plan Fit)

RESEARCH & REFERENCES

Reference to build the landing page & search page
I researched on different platforms & websites to redo visuals of the existing landing page of Plan Fit.

When everything was categorized by sections, I started to combine colors, fonts, shapes & photographs that could connect users better with the services that they can find while navigating on the website.

This web application hoped to connect individuals with sports professionals that offered their services to the people who needed & were interested in doing sports.

STYLE GUIDE & DESIGN

Defining for Plan Fit
After defining the needs of the entrepreneur Leonor, I created a style guide that included colors, fonts, components, and other UI elements based on the brand & logo that existed.

DESIGN & CREATING

Creating the visuals design
The before & after of the landing page & search page were very different. As I explained before, the navigation through the landing page was so confusing & was not clear.

That is why I offered a better solution to have clear navigation so users could find easily what they needed.
‍

Hero image

A brief explanation of what Plan Fit offers.

CTA Buttons

Give to the new users a priority to register for the services & give another space for trainers.

Plan Fit Description

Give the user information about who we are and how the web app works.

Categories of sports

Show the different sports that they offer. *some sports that are repeated because Plan Fit group was in the process of defining which other sports they wanted to offer.

Benefits

Build engagement with the users & trainers.

Plans

Offer to the users a basic and premium plan where users can choose what works better for them.

Contact

A form where trainers & users can register to be a part of Plan Fit.

Social Media

Build engagement with the users & trainers.
A search page with no structure & with some unnecessary aspects.

Search bar

Reorganizing the order of searching sports through location, sport, distance & individual or group activity.

Results

After using the filters on the search bar, users can find the number of results of sports they can have according to their needs.

More results

More options of activities they can keep browsing.

Social Media

Build engagement with the users & trainers.

STYLE GUIDE & DESIGN

Learned lessons
Working on a real project with an entrepreneur & helping her business was so rewarding.

I could learn how to manage time, have better communication in order to understand the client's needs & how to improve the visuals and the navigation on the website to give a better experience to clients and trainers.

Creating an attractive web app, with better visual content and hierarchy to find activities and what businesses offer in order to have pleasant browsing experience for all visitors to the website.