We participated in the UX Hackathon 2020, designed a solution within a 24 hours sprint, and won the Zeitcaster challenge, then we got an opportunity to continue working with Zeitcaster to keep designing their event searching website.
Zeitbyte Digital Media
UX Hackthon 2020 Winner & Finalist
01/2021 - 06/2021
Zeitcaster is a location-based library of events for all ages and interests that helps people find events surrounding them.
“I was tired of endlessly scrolling through social media, looking for somewhere fun to take my kids,“ said the founder of Zeitcaster, “Or worse, picking up handfuls of local newspapers, magazines and flyers trying to find something to do with my parents.”
Zeitcaster was born to solve this issue, which gathered the most accurate and comprehensive events from all sources and publishes them to users for planning events for their family and friends.
Although Zeitcaster provides valuable information, most visitors came to the website and left soon, few users registered an account. The client wanted us to redesign the experience of the website, to help people find the information they need, and be more willing to register as Zeitcaster users.
We summarized the redesign goals, who is the target users and some highlight features that the client wanted to retain in the new design as below.
Based on the challenge and the stakeholder insights, we defined the project scope to help us focus on the design of the most important experience first, so that we can launch the MVP as soon as possible.
01 Qualitative interview
From the stakeholder interview we already knew that our target users are people who plan events for their family, kids, parents, and friends, mostly in the 24-35 age group. So we interviewed 9 people from the 24-35 age group who always plan events for people around them, to better understand their needs, behaviors, and motivations. We asked these questions:
- Where and how you find events?
- What kind of events do you go?
- Under what situation do you need to plan to go an event?
- What considerations do you have when seeking events?
- What device do you use when seeking events?
We collected all the answers together to find user insights.
02 Quantitive survey
From the interviews with potential users, we collected a lot of needs and pain points people have when looking for events. Next step, in order to figure out whether these needs and pain points are common among people and value for people, we designed a survey to gain quantitive data. In total, we collected 75 sheets from our target users.
We firstly use a screening question to make sure the respondents are our target users.
Then we asked a series of questions to help us define users’ common needs.
Based on the insights we found in user research, we build the persona Sharon and her story.
How might we help an user like Sharon to easily find an event for her son among thousands of events in our library?
How might we encourage an user like Sharon to create an account in Zeitcaster, so next time when she needs to plan another event, she will return to our website?
The existing design was made by the product owner himself, who is an experienced developer but doesn’t have much design knowledge.
By carefully inspecting the current design, we tried to understand how it worked, and how current design prevents an user like Sharon from accomplishing her goal.
We brainstormed and sketched a lot of solutions, used sketches and lo-fi prototype to communicate with the team, and decided best solutions.
We offer this option, but user don't have to.
Well-designed filter bar helps users narrow down thousands events.
A list of events we found for users.
Map visually tells the user where is the event and the distance between them.
Below, I listed some important decision makings in our ideation phase.
Decision making #1: Filters
We decided the filters based on the following 3 considerations.
Firstly, I mapped the top 9 considering factors from users when they look for events.
“Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know.” - Jakob Nielsen
Last but not least, this order conforms to the user's thinking logic.
Decision making #2:
When to ask to sign up
Be kindly, respectful, and timely.
Click the Save button on an event card means the user has an interest in this event, and they want to return our website to see it in the future. So it’s a good time to kindly ask them to register.
Tell them the event was already saved to the user’s Saved folder after they complete the sign up process. We want to let the user know where to find the event in the future and give them positive feedback after registration.
Click Saved means they are curious about the content inside it. Although they haven’t have a saved folder before creating an account, we still want to tell them what is waiting for them once they sign up.
If the user has browsed some events, they are possible to be interested in the contents we offer. So it’s a good time to remind them to create an account. In stead of a sudden Pop-up window, we interspersed registration ads in the middle of the list, which will not intrrupt user’s experience.
We also designed different looks of the banner.
Decision making #3: Sign Up pop-up vs new page
Why did we decide to use a pop-up window for registration?
We delivered hi-fidelity prototype with interaction to the developer team.
When we designed the desktop interface, we always kept the responsive design in mind. We created a design that scales across different screen sizes and devices. Below is what we created for mobile phones.
Design is always evolving. Below is how we iterated the event card.