Zeitcaster Event Discovery Experience Design
Zeitcaster event discovery experience design.
CATEGORYFreelance
DURATION 2021.02-07
~ 130 hr
PEOPLE4 Designers
Developer team
ROLEUXUI
Interaction
CONTEXTEvent discovery is never easy
Thousands of events are happening every day, however, none of the event platforms have a near complete list of events. It is challenging for people who need to plan for friends, parents, and kids to find events in Massechussets. they usually need to check multiple websites and this process could be tedious.
ABOUT ZEITCASTERZeitcaster is a location-based curated library of events for people who plan for their friends, parents, and kids.
Events in Zeitcaster are collected by editors living in this community representing different age groups. This strategy makes their events more reliable and relevant. Currently, it provides in-person event information in massechussets and online event information in the US.
How we startedWe started working with Zeitcaster after winning their design challenge hackathon.
Last winter, I attended a UX design Hackathon with a few friends, May, Zhou, and Nora. We won the challenge and also got the opportunity to continue working with Zeitcaster to redesign their product.
My Role:
- Design and deliver the event discovery experience
- Style Guide and pattern library
*All showed in this case study are my contributions.
THE CHALLENGE“Design the header and filter of the event search page to help users understand the context of the events they are looking at.”
- The Client
ResultImpact after launching phase 1:
35.57%↑ Pageviews
5.1%↑ Returning Users
101.69%↑ Average Session Duration
Comments from the client and judges for the hackathon ↓
Solution Quickview
Search
keyword search and location search prominent on global navigation helping users to navigate the site.
Filter
A horizontal filter bar helps save visual space, shows the users the context of their search results and also helps users understand the range of the events Zeitcaster is covering.
Filter - Going With
Some users care about who to go with more than what to do. We provided them the option to filter accordingly.
Interactive details
We added many interactive details, different states, fixed positions and etc to optimize the experience, emphasizing often-used functions and improving clarity.
Process >>>>>>>>
* Understand
Learn from the client
Why is the context so important to users?
The initial Design Challenge: "Redesign the filter of Zeitcaster's main product page to give users a better understanding of the context of the data they are looking at. The solution should work on both desktop and mobile." - Client
Sometimes we assume the landing page is the homepage. We can introduce the services and offerings here so users know what they can do on this site. However, it is not always the case. For Zeitcaster, the client told us that many users actually search on google and land on their search page, which means new users know nothing about Zeitcaster while looking at the search results. Users mostly wondering what they are looking at and how they can navigate the site.
Before Redesign
It is difficult for users to find relevant content.
The filter bar on top is barely usable.
We need to reorganize the filters to improve clarity. Also, it is difficult to translate this filter bar into mobile.
User Interview
What do people care about the most when searching for events?
We first interviewed 9 people in the 24-35 age group (the primary user group) and then organized information into groups to find patterns.
Interview Insights
*Define
How might we?
1/ Nav & Filter: Informative & a sense of control
How might we help new users to learn about what this website is offering and also feel a sense of control and orientation？
2/ Get closer to the desired content
The current searching experience is confusing, how might we design the searching experience to help users find the relevant results?
3/ Responsive in mobile
60% of the users are viewing the website from their phone, how might we design the experience to work both on desktop and mobile.
*HMW1 Nav & Filter: Informative & a sense of control
Filter Bar
Position: Side or Top?
Since the Zeitcaster website contains a large number of events, a filtering system is a must. How can we layout the filter to help users understand the context and also considering how it could transfer to mobile?
We chose the top filter bar instead of the side filter because of the following reasons I collected:
🔸 It keeps the user’s attention in one place
🔸 Users frequently overlook the sidebar.
🔸 It is easier to scan and it can help our users learn about what this website’s offering.
🔸 Also, Baymard’s study shows that a horizontal filter bar significantly outperforms the left-sided one in terms of convenience and efficiency.
Search box
“We don’t have a search feature developed, is it necessary?”
We always consider search the most important feature for the site, yet the function isn’t developed and the client is leaning towards not having it or put it in the less prominent position.
I convinced the client for the following reasons:
🔸 Search is intuitive. It can be the fastest route to discovery.
🔸 Giving users a feeling of breadth or depth of the site's selection
🔸 Supporting users’ ability to return to an event previously found or heard of from friends.
🔸 Search allows us to learn about the users' needs. It tells us what they're looking for and we can optimize the website so that it delivers relevant information to users.
Batch filter vs Interactive filter
“Why not refresh reacting to users’ every selection? It can show them how their actions are impacting the results. “
Batch filtering means that the page refreshes and gives results only after you’ve made some selection and clicked the Apply button. Interactive filtering is when the system reacts to your every choice and refreshes the page every time.
I chose to use an interactive filter for single choice and a batch filter for multiple choice.
The page only refreshes after multiple selections are made; the selection will also reflect on the filter bar and the header on top of the results.
Also, I added a loading refresh state to help users understand that the page is updated with new data.
Breadcrumbs
Sometimes the users land on this event detail page directly from the google search.
Users need breadcrumbs as an important navigational element that supports wayfinding — making users aware of their current location within the hierarchical structure of a website.
*HMW2 Get closer to the desired content
Filter Bar
“I don’t care what to do, I just want to find something we can do together. ” - Chloe
During the interview, we found that sometimes users don’t care much what the event itself but who they are going with. The events can be categorized into events good for family, romantic partners, coworkers, friends, or meet someone new. With this filter, users can quickly filter the results down to the relevant ones.
Location Search:
Dropdown list vs. keyword search?
Dropdown list could be disappointing.
The site before redesign only allows users to select from their location list. It is disappointing for users to not able to find their location, and they will leave the site since they would assume the event information are not relevant. However, Zeitcaster does provide online event information which could be relevant for users anywhere in the world.
Useful No Result Page
What if my location is not covered？
We know that many users could possibly not be able to find anything nearby since the location is not covered yet. However, a useful no result page could keep them staying.
*HMW3 Responsive in mobile
Filter bar
We decided to keep all filters in a horizontal scroll bar and also adding one all filter button for users to view filters in one place.
*Style Guide
Responsive Components
*Learnings
1/ I learned to always prepare plenty to support my idea.
During every design review, the client wants to see all other possibilities and the reasons to choose one over all others. However, this mode isn’t the most efficient one, so I learned to always prepare the versions the client wants and the ones I recommended. If I decide to convince the client, I would always prepare enough resources ranging from user perspectives, case studies of competitors, and usability research articles. It isn't easy to persuade the client, so I always make sure there is plenty of evidence supporting my idea.
2/ Let the users talk
There are times we have different opinions with the client just because there are things we simply haven’t learn from the users yet. While discussing with the client, we never disagree just to disagree, we either both win or both lose. Only users know if it is a win. Every time when we meet a disagreement, we prepare a test or think of ways to collect feedback from the users.
The following is a user test we did while we had a disagreement about adding images to the card or not because currently we didn’t collect images for the events and it would increase the cost to add them. We found all users preferred the one with images because it feels more reliable and attractive.
More testing is planned and ongoing…
More Projects ↓
