Background

This company helps sports venues showcase their offerings through a timetable template featuring activity cards, allowing customers to book activities they’re interested in.

However, due to increasing complexity of a ever-growing calendar, customers are finding it difficult to complete the intended actions.

Current table evaluation

An initial exploration was made to understand what was the current state of the whole user flow, following the steps:

1. User searches for the right classes;
2. User clicks on the chosen class' card;
3. User reads the activity details;
4. User presses the CTA to book.

Different sport facilities' websites containing the template were visited to understand the different possibilities.

1. User searches for the right class

Widget size:
The partner's page already has the possibility to scroll.
The experience is not ideal when the widget also has information that needs to be scrolled.
Is there a way to avoid the scrolling on the widget, technically speaking? (i.e. when you change the classes for prices, the widget adapts its size.

Top bar:
1. It takes a lot of vertical space, and still, lots of white space without information.
2. This could be sticky, to assist customers to find their preferred classes. When it's not, it's hard to know what day it is, or remember the activated filters.

Filters:
1. This cannot be considered a filter, and there are better ways to navigate between weeks.
2. Lack of visual cue and titles to identify. It's hard to understand what was chosen, once you selected options.
3. As an example of the lack of visual cue: What is sweat? An effect? What is HIIT? A class or a sport? Adinda... is it a place or a person?

Calendar layout:
1. How do I know what day is today, without looking to the date on the calendar, and what day is today? Avoidable cognitive load.
2. The whole calendar is divided in days, and in some places, by ”morning, afternoon, evening”, what about time? How can we display more on the layout, taking out the amount of information of the cards?

Besides that, would be cards the only way of showing the timetable, or maybe list would also help?

Card organization:
Different sizes, similar colors, too much text, bad contrast, no breathing between cards.I understand the need of saving space, but it feels very confusing and overwhelming.

2. User clicks on the chosen class’ card

Card overall design:
1. Is the duration more important than to know what time it ends?
2. No visual cues to understand what is each information. Also, is all this information needed, or is it in the right order?
3. This takes a lot of extra space, just for an icon.
4. Color contrast can be very intense, when we let the customer personalize.

Card's different status:
We should aim for a more consistent way of showing different status on cards.

3. User reads the activity details

Activity details pop-up:
1. There is a lot of space on the horizontal, why is this preview in a vertical?
2. Does the image needs to be that big?
3. The information hierarchy feels a bit weird, with free spots and the level at the end of the card.

4. User clicks on the CTA to register

Registration CTA:
Sports Venue always refer to this process as ”booking”, wouldn't it be better to have “Book now”, instead of register?

CTA consistency:
On different options than to register (like unavailable workout), there is a lack of consistency on the layout that may confuse users.

Design principles application, secondary research and redesign proposals.

Applying design principles ("laws of UX", "Interaction Design fundamental principals", "Nielsen's Heuristics", etc), I listed the changing needs on the touchpoints, describing the rational behind it.

At the same time, I made a secondary research to get more insights on the improvement opportunities, through best practices research on timetables, information visualization, and filtering, public customer reviews on the service, competitor analysis, etc.

The redesign proposals were all initially made with Wireframes and notes, explaining the reasons to change the way I designed it. The areas with the biggest changes were:
• Top bar & filters;
• Calendar layout;
• Cards layout;
• Activity details pop-up.

Redesign proposals (1/3)

Top bar & filters:
1. The logo must have a pixel limit, to keep the whole top bar small, saving lots of space;
2. The filters now have a title on top. With that, the user can filter and understand what did they choose, after selecting a filter. Also, the "filter” of the week was removed and it will be displayed in another way.
3. Highlight on the selected link, in that case, classes.


4. Instead of the name of the person, a space to put the picture. When the user clicks, it opens the previous dropdown.
5. A new filter is added, with the possibility of display the activities in cards (weekly view), and in list (daily).
6. When the user is not logged in, instead of a text link, a more prominent CTA helps visualizing the need to login / register.

Calendar layout:
‍1. There will be always a small highlight on the current day, to help the users to identify it.
2. Instead of the previous "filter”, now the users can change weeks on the top of the days, through prominent arrows.
3. The times of the day will be displayed on the left side of the timetable, with hourly breaks between them and visual division, to help users identify the time.


4. In this card display, their size will vary with the time slot they take, and will visually respect the gap of time between activities.

Redesign proposals (2/3)

New list display:
1. This is the new way of displaying the activities with more details, in a list view.
2. Instead of weekly view, this list will show just the specific day chosen.
3. The activities will be shown one after another, showing the starting and ending times, picture, title, brief description, location, level, availability and teacher.

Cards layout:
‍The first thing that changes is the information hierarchy, putting "activity name" in front of "time". Depending on the size, less information is shown (i.e. 30min activity, it doesn't show the teacher). The overwhelming colors are now changed by white cards, with a colored vertical line on the left, to differentiate the class types. Icons and pills were added to add personalization to each type of information shown.

Besides that, It was detected some patterns of available spots, from "more than 5 spots available" to "sold out". For each case, pills were developed, to compact the information, that will be adapted, depending on the available size on the card.

For online classes, the icon was just placed in a better way, to maintain the highlight, and not steal any space, and for canceled classes, depending on the size of the card, the effect will be the same of the previous card, or there will be an extra pill explaining that the class was cancelled.

Redesign proposals (3/3)

Activity details popup:
1. The popup was organized in a way to use the horizontal space available.
2. Smaller picture, with the possibility of expansion, depending on the layout (see number 7)
3. The specifications of the class got a better hierarchy, and got better icons.
4. Copy change to ”Book now”.
5. Name and description of the teacher got a better highlight, also using the space a bit better.
6. How the “waiting list” status works in this new pop-up proposal.
7. How the image adapts to the size of the right block of information + CTA
8. Better highlight and consistency when the registration period is over, following a similar pattern of CTAs.

Layouts and Prototype

New layout proposals were made for the timetable, including a new list display, for the activity details pop-up, changing the vertical view to a horizontal view, and the different status were given a better consistency.

A fully interactive prototype was developed to test the interaction with the client and to assist them to test with customers.