DEVHUB

UX-UI 2023

TIMELINE

36 hours (revised)

TEAM

Arlene Chen
Cresen Jake Hunos

ROLE

UX-UI Designer

TOOLS

Figma

Project Overview

Enriching the hackathon experience through a mobile application that empowers participants to access schedules, receive announcements, and collaborate in team formation.

View Prototype →

The Problem

Hackathons frequently face the challenge of disorganization, resulting in certain individuals not fully maximizing their experience. Moreover, the utilization of multiple communication platforms in most hackathons can overwhelm participants, leading them to miss out on significant opportunities like mentorship, workshops, and other activities.

CHALLENGE STATEMENT

"How might we design a seamless and user-friendly mobile application that enhances the overall hackathon experience for participants?"

The Solution

DEVHUB serves as a one-stop shop for all your hackathon needs. Users have the ability to view their schedule, form teams, and secure a place on the leaderboard.

Personalization

Access your schedule, stay updated with announcements, and conveniently collect points by scanning your QR code.

Team Formation

Form connections with fellow hackathon participants, facilitating the opportunity to form teams together.

Leaderboard

Climb to the top of the leaderboard by accumulating points through participation in workshops, activities, and meals.

RESEARCH

Competitor Analysis

By conducting a thorough competitor analysis on existing platforms, the team gained valuable insights into the potential risks and opportunities linked to DEVHUB. This informed decision-making process enabled us to determine the specific features we wanted to incorporate.


Discord

Pros:

Provides a variety of text and voice chat channels, making it easy for participants, mentors, and organizers to collaborate and communicate.Cons:
Chat channels can be lively and active, which may result in a higher volume of messages and potential distractions.


Microsoft Teams

Pros:
Offers a structured way to organize discussions and information. Channels can be created for different topics, projects, or teams.Cons:
Performance issues, such as slow loading times or occasional outages. These issues can impact the hackathon's productivity and communication flow.


Skype

Pros:
Provides high-quality video and voice calls for real-time communication during hackathons, facilitating face-to-face discussions, collaboration, and remote mentorship.Cons:
Lacks the community-building features found in other platforms, such as dedicated community channels or server-based structures


Slack

Pros:
Provides customizable notifications and reminders, ensuring participants stay informed about important updates, deadlines, or announcements related to the hackathon.Cons:
Can become overwhelming, particularly if there are numerous channels and active discussions happening simultaneously.

User Pain Points

Taking the 36 hour hackathon time constraint into consideration, the team incorporated pain points derived from our personal experiences in hackathons. As a result, we successfully identified three significant problems.

01

Connecting and forming teams with fellow students can be a challenging task frequently encountered by participants.

02

Workshop attendance tends to be low due to participants being unaware of the timing and locations.

03

Hackathons often lack incentives to keep participants motivated until the end.

Persona

Based on our research findings and the identified pain points, the team created a persona that embodies our target demographic – a student who frequently participates in hackathons.

Design

Key App Features

Upon completion of the research process, we identified four key features that would be included in the application and offer the most significant benefits for users.


Leaderboard
Participants are incentivized to attend all workshops, activities, and meals by offering the opportunity to earn a rank on the leaderboard and potentially win other
enticing prizes.


Announcements

Dedicated announcements are provided to keep users informed about various events and activities taking place throughout the hackathon.


Notifications

Participants can personalize their notifications to receive timely updates about meal times, workshops, and activities, ensuring they stay informed and engaged throughout the hackathon.


Team Formation Hub
The platform enables users to connect with potential hackers, form teams, and conveniently filter through individuals who share similar interests.

Low Fidelity Wireframes

To gain a comprehensive understanding of our visual direction and app functions, we initially focused on developing low-fidelity wireframes.

Branding & Style Tile

DEVHUB's design was inspired by DEVPOST's design standards, as we aimed to capture the aesthetics and atmosphere of the popular hackathon site.

High Fidelity Wireframes

Once we established our style guide, we proceeded to design high-fidelity wireframes while keeping DEVPOST's design standards in mind.

reflection

Design Revisions

The team collectively acknowledged that there were certain areas in the app that could be improved, leading to several revisions being made.

What I Learned

Upon concluding this project, I gained a valuable understanding of the significance of user-centricity and empathy in problem-solving.

I take pride in our achievement of designing a mobile app within a 36-hour timeframe, while successfully adhering to DEVPOST's design standards.

Additionally, I acquired valuable technical skills in Figma, such as creating components and style guides, which I have since been applying to my other projects.