DallasHacks

Hacking an Experience

January 2024

3 months

Role: UX Lead

CONTEXT

Code, create, collaborate

DallasHacks is a local hackathon that brings students and aspiring developers together for a weekend of building, learning, and collaboration. The original website struggled with unclear registration, missing event details, and low engagement. As Lead UX Designer, I created a streamlined, informative, and visually engaging experience for participants.

DallasHacks is a local hackathon that brings students and aspiring developers together for a weekend of building, learning, and collaboration. The original website struggled with unclear registration, missing event details, and low engagement. As Lead UX Designer, I created a streamlined, informative, and visually engaging experience to support organizers and participants.

RESEARCH

The challenge

Event sites are often frustrating—clunky sign-ups, vague details, and poor navigation. Hackathon websites are no exception, with messy layouts and missing info that hurt engagement. To fix this, I redesigned the DallasHacks site with three clear goals in mind.

Easy Registration — Smooth and painless sign-up process increasing turnout and engagement for the event.

Smooth and painless sign-up process increasing turnout and engagement for the event.

Easy Registration

Enhanced Discoverability — Ensure that users can find essential information about the event such as the date, location, speakers, registration, etc.

Ensure that users can find essential information about the event such as the date, location, speakers, registration, etc.

Enhanced Discoverability

Improved Accessibility

Improved Accessibility — Design a website that is seamless from desktop to mobile and inclusive to all users.

Design a website that is seamless from desktop to mobile and inclusive to all users.

Meeting user needs

My research began with developing user personas to better understand the goals and pain points of my target audience. By identifying common behaviors and motivations, we were able to shape a more focused design approach. This set the foundation for our user journey and competitive research, ensuring that my solutions addressed real user challenges.

After defining personas, I mapped out the attendee journey from sign-up to post-event follow-up to understand their goals, emotions, and challenges. This revealed common pain points like unclear event info, limited networking, and hard-to-access materials, highlighting opportunities to improve clarity, accessibility, and engagement.

Key Insights

Clarity and Preparation

Users want clear event details before signing up including location, date & times, and the schedule of event and speakers.

Networking Challenges

Attendees find it hard to remember names and make connections, suggesting a need for name tags along with ice breakers before each event.

Post-Event Engagement

Event sessions should be recorded and post-event materials made more accessible allowing attendees to easily relocate and revisit material from the event.

I analyzed existing hackathon websites to spot design trends and gaps. Common features included bold visuals and clear CTAs, but many lacked accessibility, structure, or support for new attendees and beginners.

DEVELOPMENT

Color

The neutral tones keep the interface clean and uncluttered, enhancing readability and accessibility while allowing accent colors to stand out. The accent colors — red, blue, and yellow — are bold, vibrant, and energizing, forming a triadic color scheme that evokes a sense of energy, innovation, and creativity.

Typography

For the DallasHacks website, I used a type scale based on minor thirds to create a clean and consistent hierarchy. The scale ranges from large headers to small subtext, making it easy for users to scan content and understand what’s most important.

Wireframes

To visualize the site structure and user flow, I created low-fidelity wireframes for both desktop and mobile. These wireframes showcase five key pages—Home, Schedule, Judges, FAQ, and Register—highlighting consistent layout, clear navigation, and responsive design across devices.

FINAL DESIGN

High Fidelity Prototype

Building on the wireframes, I developed a high-fidelity prototype to bring the visual design and interactions to life. This version incorporates the final color scheme, typography, imagery, and layout. It demonstrates how users will navigate the site and interact with key features.

TESTING

Prototyping and usability

To evaluate the effectiveness of the design, I conducted a usability test with a practice user to observe how they navigated the site and completed key tasks. This process revealed strengths in the overall user experience, as well as areas where further refinement could enhance clarity, efficiency, and engagement.

Clear Event Information: Users can easily find key details about the hackathon without getting lost or overwhelmed.

Smooth Registration Process: Clear call to action, well-organized forms, and an intuitive process overall.

Responsive Design: The website works on both desktop and mobile, ensuring accessibility and usability on various platforms.

Improving Navigation: Adding a search bar could help users find exactly what they're looking for.

Overwhelming Graphics: Flashy visuals can distract from essential content, making the site harder to scan and navigate.

Registration Save States: Adding a progress indicator through the registration form allowing potential attendees to start, stop, and complete the form at their own pace.

LOOKING AHEAD

Final notes

Moving forward, I plan to make several key updates to improve the overall user experience. These include adding a search bar for quicker navigation, simplifying graphics to reduce visual clutter, and incorporating a progress indicator in the registration form to guide users more clearly. I would then follow up with additional usability testing to ensure the updates effectively resolve pain points and enhance the site's clarity, accessibility, and flow.