Zeitcaster Winner - Help people navigate thousands of events to find the ones relevant to them.
DURATION
2021.02-current
around 130 hr
CATEGORY
Design Challenge
Turned into Freelance
ROLE
UX Design
UI Design
TEAM
May Zhou, Zhou Xia,
Nora Zhang, Qingyi Li
*Overview
Last winter, I participated in the UX Result Hackathon with a few friends, May, Nora, and Elijah.
We won the Zeitcaster Design Challenge and then got the opportunity to continue working with Zeitcaster to redesign their product.
ABOUT ZEITCASTER
Zeitcaster is a location-based curated library of events for people who plan for their friends, parents, and kids.
Zeitcaster provides a comprehensive list of events collected by editors living in this community representing different age groups. Currently, it provides in-person event information in massechussets and online event information in the US.
ROLE
After the hackathon, I was mainly responsible for the Event discovery experience.
- UXUI/Interaction
- Interactive prototype
- Initiated the style guide and the pattern library.
*Phase 1 was launched and the rest are still in development.
Impact
5.1%β
Returning Users
101.69%β
Average Session Duration
35.57%β
Pageviews
Problem Before Redesign
Zeitcaster offers thousands of events, yet users cannot find the event they are interested in.
Solution Quickview
Users can use the keyword search to find what they have in mind, filter down their options, browse events using the map, and view more events from the same organizer and same category around.
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.
Map
While hovering on the card, the pin on the map will highlight the location.
While clicking on the pin, a thumbnail of the event will pop up.
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
Business Metrics
The client wanted to improve user engagement. Since there are more new users than returning users now, our priorities are activation and retention. The metrics we are looking at are Page Views, Average Session Duration, and Returning Users.
User Research
Different methods for different goals. Synthesize to uncover the real storyβ
Synthesize
Key User Journey
*Define
How might we?
1/ How to help to return users come back to their last discovery?
2/ How to design a filter bar that helps users understand what kind of events are collected here?
3/ How to design for users who need to select many filters?
4/ How to design a friendly and useful no result page?
*Ideation
We ideated around the How might we and also voted on ideas based on business value, user value and development cost.
Quick Sketches to explore different possibilities
*Key Decisions
1/ Feature: Do users need a Keyword search field?
2/ Layout: Top filter vs. Side filter?
3/ Interaction: Batch Filters vs. Interactive Filters?
4/ Edge Cases: What if there is no resultοΌ
Design Decision 01
Feature: Do users need a Keyword search?
β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:
For Users:
1/ First click test finding: Search is intuitive. It can be the fastest route to discovery.
2/ Usability test finding: Supporting usersβ ability to return to an event previously found or heard of from friends.
3/ Survey: Half of the users think search is the most important feature.
For Business:
4/ Improve the siteβs trustworthiness because the search field gives users a feeling of breadth or depth of the site's selection
5/ 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.
Design Decision 02
Layout: Top filter vs. Side filter?
How can we layout the filter to help users understand the context and also considering how it could transfer to mobile?
Traditionally filters are positioned on the left. During benchmark research, we found most sites with similar functions have left-sided filters. However, widely used design patterns arenβt necessarily the best pattern for all products.
I 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.
Design Decision 03
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 Skeleton Screens to provide feedback about what is to come and help the time to fly by a bit more quickly.
Design Decision 04
Edge Cases: What if there is no resultοΌ
When people are selecting events, there are many deal breakers, including date, event category, distance and age group. Therefore, users are very likely to select many filters and ended up in a no result page.
Different message for different input.
Whatβs More
Responsive Design
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
01/ Preparation makes perfect | Always prepare plenty to support my idea.
03/ Teamwork is everything | Communication and collaboration are more than 50% of the work.
02/ Constantly testing | There isnβt a stage too late to do user research.
04/ Initiate to take responsibilities | The more initiatives I take, the more responsibilities I take, the more I learn through the process.
More Projects β
