Live
AI-assisted
Web design + dev
HackViolet Web
Accessibility and new-user journey opportunities in an event website.
TIMELINE
3 months
ROLES
Full stack designer
TEAM
2 directors, 1 designer, 1 judging director
SKILLS
Visual identity, AI-coding
Overview
The Website
HackViolet is an annual women-empowerment hackathon at Virginia Tech. Every year they update the event website according to a new visual theme, and provides information like a schedule of the event, FAQs, sponsor contact, and this year, judging insights.
Problems
Many students believe hackathons are for advanced CS students only.
The palette had gotten stale: purple and pink, every year. We added teal-green, violet's complement, for visual exploration.
Solution and Additions
Icon-label pairs for scannability, clarity, and context.
Added a "Looking back" section for returning and new users to get insight on how judges evaluate projects.
Added motion to hero, creating a lively environment for landing.
IDENTIFY
How might we create more visual hierarchy and accessibility so first-time visitors can quickly find what they need without confusion?
Contextual Inquiry
Being an event website, it was hard to dive into UX factors, such as measuring indicators and the user journey. This required becoming the prospective user.
What is their main objective?
Opening a website link means some incentive. For hackathons:
build their software dev portfolio
talk to company sponsors
win prizes and swag
get expedited internship interviews
network with other people
Why are they going?
The user wants to spend their time somewhere exciting while still being productive. Or:
free weekend & want to know how to spend it
friends at Virginia Tech, a good excuse to visit
touring campus
DESIGN
WORKFLOW
Accessibility opportunities, responsiveness
User flows
Initial user flow
The initial user flow was the base website design, to be an info webpage for participant registration.
Secondary user flow
The secondary user flow was to be implemented after confirmed sponsors, prize tracks, and real-time event schedule the day of.
Low-fidelity
SOLUTION
View event branding and merch designs in my studio!
