Matching

WEB DESIGN & BRANDING - UOC Masters Project

Project

Matching Polideportivos is a website that allows users to book sports courts in different sports centers in different towns, mainly for tennis players. The platform also has information about local events and competitions.

This project was created for my Masters's degree in UX/UI Design at UOC.

Date

2022

My role

Branding & logo creation
UI Design

Team & contributors

Project mentor:
Professor Martin S. Juan Ramon

The challenge was to create an appealing platform with a modern brand.

I refined this mood board to simplify it and encourage usability.

Branding

During the exploration of concepts for the brand, I created a mood board with textures, pictures, and colors that inspired the logo. For the logo, I wanted to reflect the movement of sports, I achieved that by including a ball figure with a shape that also recalls the "m" of matching For the type, I kept lower cases to make it fun and modern.

The platform & users

With several iterations, the main functionalities of the website were explored. The key was to make it as simple as possible, as our users are people that want to save time and have many activities during the day.

Flows

Several user flows were created to try to figure out which elements can be useful for each step of the reservations.

The prototyping
process begins!

Wireframes were provided for some of the pages.

Concept

Prof.Martin had a structure in mind for some of the pages. A calendar and cards were the main elements that were requested.
I created the rest of the wireframes for the other pages after I also sketched them on paper.

UI Design

I designed the high fidelity prototype with Figma, creating components in order to keep consistency during all the visual and interactive elements of the website.
The color palette was adapted to include several shades that allow the user to differentiate the elements in a very harmonic way.
I created a UI Kit to implement the main aspects of the brand including mobile and desktop elements.

UI KIT SAMPLES

Results

You can take a look at one of the reservation flows on this prototype that was created with Figma.

Next steps

The next steps for this project are user testing rounds in order to get usability feedback in order to improve the overall platform. We expect to conduct this study in the next months to come.