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.

Client

Zeitbyte Digital Media

what we won

UX Hackthon 2020
Winner & Finalist

My Role

UX/UI Design

Tool

Figma

Team

May Zhou / Elijah Xia /
Qingyi Li / Nora Zhang

Timeline

01/2021 - 06/2021

About
Zeitcaster

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.

Challenge

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.

Stakeholder Interview

Stakeholder Insights

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.

Project
Scope

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.

User
Research

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.

03 Persona

Based on the insights we found in user research, we build the persona Sharon and her story.

Problem
Statement

Core problem

How might we help an user like Sharon to easily find an event for her son among thousands of events in our library?

Other problem

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?

Deconstruct
Existing Design

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.

Ideation

We brainstormed and sketched a lot of solutions, used sketches and lo-fi prototype to communicate with the team, and decided best solutions.

Keyword Search

+

Filter Bar

+

Results List

+

Map

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.

Ideation

Decision making #1: Filters

We decided the filters based on the following 3 considerations.

1. Mapping value & changing possibility

Firstly, I mapped the top 9 considering factors from users when they look for events.

2. Reduce the learning cost of users

“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

3. Conform to the user’s logic of thinking

Last but not least, this order conforms to the user's thinking logic.

Ideation

Be kindly, respectful, and timely.

Before redesign

1. When a new user wants to save an event.

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.

2. When a new user click Saved

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.

3. When a new user has browsed several events

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.

Ideation

Why did we decide to use a pop-up window for registration?

Hi-fidelity
Prototype

We delivered hi-fidelity prototype with interaction to the developer team.

Responsive Design

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.

Iteration

Event Card

Design is always evolving. Below is how we iterated the event card.

Results
Next Project
Leaven