Introduction

PadelSpot (spot, not sport) is a sport association dedicated to padel working in Alto-Vicentino. It was the first to open padel fields in that area of Veneto (Italy).

It has been the first website I developed for a real client.

Problem

Once again, there was no wireframe, mockup or idea of the final website.

I was told the names of a few competitors and to look at their methods.

When I accepted the job, I didn't yet know the technologies I was going to use. This has been an opportunity for me to learn VueJS framework and Google's Firebase suite.

Fun fact: the PadelSport logo was made by my brother!

Development

It soon became obvious that I had to ideate the whole website from start to end.

I looked at other websites (not necessarily padel-related) to find inspiration; then proceeded to work on the interface.

The first photo I shared of the website

I noticed that competitors made a good use of eye-catching colors and animations to empathyze the "sport" and movement feel. I wanted to bring some of those sensations while making it very easy for users to reserve a spot and play.

The process of choosing an available hour slot was really clumsy in some existing platforms, as it was hard to understand which slots were still available. Other than that, many useless details were needed to confirm a reservation.

Solution

Finally, after 2 months of development, I published padelspot.it

Home Page

Home Page scrolled down

The reservation system was made as straightforward as possible: logged users that have paid the PadelSpot membership can reserve a time slot autonomously through the following page.

Reservation page

Users can scroll horizontally for future days and vertically to check other fields' availability:

• RED means that a time slot is fully reserved
• YELLOW is a partially reserved slot (up to 4 players per field)
• GREEN is a reservation made with your account
• WHITE is a free slot

When clicking on a time slot, a popup appears. Users just have to choose the number of players and the skill... then press "reserve"!

Stars (1 to 5) were requested to let people know the skill of players reserving a slot, so that partial reservations would help match players with similar experience.

The same view can be edited by administrators, so that reservations can be arranged for tournaments or for people that call by phone. They can also attach a memo text to a reservation.

Key takeaways

There is no greater barrier than the lack of will to learn new things.

Many difficulties will appear once you get into the details.

Users need things to be clear, or they will not want to engage with your website (or other).