Showround Calendar
Redesigning Weddingdates Showround Calendar
1. How can we switch between different kind of views (months/week/days)
2. How can we show more content
3. How can we show multiple events and make it more visually pleasing?
Objective:
The main functionalities of the current system for this screen are:
-
Switching between different kind of views (months/week/days)
-
Show a context filter and aesthetically display more details
-
To show multiple events and have it fit better (responsive)
Pain points:
The main challenges of the current system for this screen are:
-
No details of events
-
Each calendar tile is not the same size - in order to fit the name of those who are booked i.e. There’s a bigger calendar tile in days with multiple events, unlike the card that has only booked 1 event.
Solution:
The structure is very simple and straightforward. It has a calendar on the right and the list of showrounds scheduled on the left.
Each of these cards are individual showrounds. Since the most important information to the venue client is the time he has to take the lesson, and in some cases how many he has scheduled for that day, I put that out right in front ensuring good information architecture.
-
Show the filter context
The current design shows the name of each person booked behind each calendar tile. Hiding functionalities is, most of the time, not a good idea. Especially when the functionality can influence the current screen-state. Multiple events may be booked and the user would not see it on the screen. The new design gives the user enough context without cluttering the calendar area.
-
(Multiple) Events should fit better in different views
A newly created event pushes everything down on the screen to fit its own height (based on its content). This can be troublesome when having multiple events on a day. A day can be too stretched out on the month-view and the user would lose the overview. To solve this problem, there should be fixed height to each calendar tile. Also, multiple events on a day won’t push other events down, but try to use the horizontal space which results in a better overview of the month/week-view. The info on an event will automatically adjust to fit more information if possible. When a user wants to know more about a day, they can click on it and a side-sheet will slide out.
-
Give more space for event details
The content of an event is user-generated, so the amount of text (and its height) can be unpredictable. The new design should take that into consideration. The sheet gives the event details all the room they need to fill in the content. It allows the user to quickly show more event information without loading new pages, the sheet displays content that complements the screen’s primary content and can be scrollable, making it perfect for unpredictable text-length generated by users.
-
Redesign with accessibility in mind
Lastly, I focused on redesigning the UI elements and kept accessibility in mind. E.g. good typography that's easy on the eyes.
Extra details:
-
Avoid “nd, st or th” on the numbers of the calendar. I.e. Instead of 30th, use only 30
-
Don't write the full name of whoever is booked for a showround that day. Instead, put a number to highlight how many you have booked.
-
Indicate amount of showrounds booked with a number or using icons/ shapes
