Website Design / Front-End /

Rethinking Earth’s Hacker Experience

Rethinking Earth’s Hacker Experience

Rethinking Earth’s Hacker Experience

Earth | Summer 2024

Earth

Earth

Earth is an all-in-one hackathon management platform dedicated to providing a seamless experience for organizers, hackers and judges during in-person and virtual corporate hackathons by facilitating all the necessary information in one place. 

Timeline

July 2024

(4 weeks)

Team

1 Product Manager

1 Designer (Me)

3 Developers

Constraint

Short turnaround time

Limited Resources

Impact

9/10 Average Promoter Score
100% Would use the features

Context

The Challenge — How can we use technology to make the world a better place via gamification?

Earth had finished running 2 corporate hackathons and a bunch of feedback was left from our users. The product manager and I wanted to review the feedback and decide on the next step to take before the next hackathon happen in 1 month.

Goal:

To improve Earth's experience for the organizers and participants based on their feedback

User Persona

User Persona

Earth didn't have preexisting personas. I felt that I could better design if I put myself in the shoes of Earth users, so I built 2 primary persona to think about how I interact with Earth.

Only 39% of participants would recommend Earth to a friend or a future hackathon

Gather & Categorize Feedback

We received primarily qualitative feedback directly from users’ and organizers post-hackathon surveys. I categorized them based on features to identify which features have the most room for improvement or where users are happiest.

A messy (but realistic) view of the categorized feedback

Prioritizing Efforts

Prioritizing Efforts

The product manager and I ranked each feature improvement using the RICE method to evaluate where our resources should be allocated.

'Log-In Flow' was a bug fix and 'Onboarding Flow' was already in development.

'Log-In Flow' was a bug fix and 'Onboarding Flow' was already in development.

We boiled down to 3 main areas to tackle

We boiled down to 3 main areas to tackle

As they are issues that impact both the organizers and participants.

01.

Project Submission Form

Participants — were not able to save their progress which caused immense stress in the last hours of the hackathon.

Organizers — do not have enough resources to provide technical support towards the end of the hackathon.

02.

Joining Live Sessions

Participants — looking to join live sessions on Earth is frustrated when they are redirected to their email for the join link.

Organizers — an estimated 25 hours were spent on sending invites and attendance is low.

03.

Team Formation

Participants — had a hard time finding team members with similar interests.

Organizers — Misaligned teams result in low-quality submissions.

Design Challenge #1

How might we design a smoother project submission process for participants?

One way to improve their experience is through adding the ability to save their submission progress.

We wanted participants:

  • To promptly save and submit the submission
  • To be able to view their submission history and confirmation of submissions

Design Decision

Presentation of Submission Status

Progressive Icon Indicators

Progressive Icon Indicators

Compact and Minimalist: With button and historical submission

Intuitive: Placed where users can expect to submit their project

Delayed Communication: of save progress functionality

Color-Coded Status Banners

Color-Coded Status Banners

Visually Impactful

Clear and Intuitive: With familiar color conventions

Limited Visual Progression: Progression is not communicated

Design Challenge #2

How might we streamline the experience of adding live sessions?

The current experience of joining live sessions is problematic:

  1. Inefficient Management

    • There is no functionality for participants to pre-save sessions onto their calendars.

    • For organizers, manually sending out calendar invites in advance is highly time-consuming and labour-intensive. 

  2. Cognitive Overload

    • For participants, it is hard to stay actively engaged on Earth since the primary action to join live sessions is taken outside of Earth.

  3. Inability to Scale

    • The platform is struggling to expand beyond its current offerings of live sessions since any additional live sessions would require a massive undertaking.

Design Decision

Add Live Session Flow

"Add to Calendar" Button for Each Meeting (Single-Meeting Add)

"Add to Calendar" Button for Each Meeting (Single-Meeting Add)

User Control: Add sessions that interest them without cluttering their calendar

Quick Build: From a developer’s standpoint

Time-Consuming: If participant wants to join multiple sessions

Fragmented Calendar Experience: No batch approach which makes it harder to keep track what is already added

Select Multiple Meetings, Then Click "Add to Calendar" (Multi-Select Add)

Select Multiple Meetings, Then Click "Add to Calendar" (Multi-Select Add)

Efficient for Multiple Adds: Saving time and reducing repetitive actions

Greater Control Over Meeting Selection: Offering a balance between control and convenience

Requires Additional Steps: which could deter some participants

"Add to Calendar" Button for a Subscription to All Meetings (Calendar Subscription)

"Add to Calendar" Button for a Subscription to All Meetings (Calendar Subscription)

Highly Convenient: Removes the need for manual selection, saving time

Automatic Updates: Meeting updates and new meetings are always up-to-date

Lack of Control: Potentially cluttering their calendar with meetings they aren’t interested in.

Commitment Concerns: Participants may be unsure about the frequency or relevance of all the meetings, which could reduce engagement.

'Multi-Select Add' was agreed upon as the ideal solution. However, the developer team's reduced availability and time constraints made us reconsider and move forward with 'Single-Meeting Add' as the most appropriate solution. 

Design Challenge #3

How might we get participants to form more efficient teams?

Participants found it difficult to work with team members in different time zones and misaligned areas of interests.

Insights:

40% of participants worked with people they know
~58% of participants looked up people they wanted to work with

Things that participants want to know:

  • skill level
  • areas of interest
  • personality
  • past hackathon/work experience

Design Decision

Profile Completion

Sign Up and Write Up

Sign Up and Write Up

Higher Profile Completeness: Improves data quality for personalization

Increased Friction: Long signup process, which likely leads to a higher drop-off rate

Lower Flexibility: Users may not understand the importance of profile details, likely lead to lower quality data entry

Completion Later on Their Own in To-Do List

Completion Later on Their Own in To-Do List

Encourages Organic Profile Development: Potentially resulting in more thoughtful, accurate responses

Delayed Personalization

Taking the best of both worlds

Using the "sign up and write up" concept as the base, I brought in elements of the "reminders" that made it more engaging.

Changes Made:

Changes Made:

  • Made questions optional and a button for the user to complete later

  • Reminder on the dashboard is more prevalent

Additionally, a team member suggestion section is added to the dashboard

Presentation of Member Suggestion

Horizontal Scroll

Horizontal Scroll

Familiar to User

Saving Vertical Space: Keeping the main page more compact and focused.

Limited Visibility of Items

Mobile Experience: will likely need customized components

Grid

Grid

Recycling Existing Components

Better for Comparison: based on experience, skill level, area of interest

Not Visually Distinct

Due to budget and time constraints, we decided to prioritize the organizer’s experience, and omitted some features. I tweaked the case study for the prioritized features.

Usability Testing

Usability Testing

I settled on a think-aloud & probing approach for its speed and cost-effectiveness. We tested our new join live session flow and submission banners on a focus group of 5 users through a guided prototype I built in Maze.


I defined 2 questions to centre our usability testing around:

  1. How well does the participant understand our join live session flow? 
  2. How intuitive was the submission status banners?

Testing was a success! Some key feedback pieces we noted for our next iteration were related to automation — ideally the user would like to see auto-save as the default for saving progress.

9/10 Average Promoter Score
100% Would use the features

Result

Small, iterative improvements were made rather than sweeping changes.

Join Live Session Flow

Project Submission

Reflection

Takeaways 🥡 — The good, the bad, and everything in between

You can’t always ship a "perfect" product…

Would I have liked to do more testing? Yes. More iterations? Yes. Fancier designs? Yes. But the value delivered in shipping a product sooner sometimes outweighs refining more details... and we can always ship updates later ;)

Your design for 1 end user influences the experience of another end user

This is my first platform design project, I had to put myself in the perspective of multiple end users to gain a comprehensive view of my design. Sometimes, what would be great for the participants may create more friction for the organizers. Vice versa. It’s the sweetest when my design strikes that perfect balance! 

Sometimes, the small features make a big difference

We received requests for many small features/improvements to be made on Earth. While these features independently may only improve the experience of a small portion of participants, the small things add up and help create an overall better experience for all users. 

Design problems can sometimes be very specific 

Given the encompassing user feedback for this product, I had very specific user problems with very specific solutions. Even so, I approached the problems with an open mind and validated assumptions to ensure the right problem was solved with the right solution.