HackIllinois
Check out the website
Crafted responsive interfaces for the University of Illinois at Urbana-Champaign's annual student led hackathon website and mobile platforms
Visual Design
Event
Cross-Functional
OVERVIEW
HackIllinois is the premier student-run hackathon at the University of Illinois at Urbana-Champaign. Each spring, HackIllinois hosts 1000+ students who work together for a weekend to learn new skills and technologies to create innovative hacks. The whole HackIllinois team consists of about 40 members to create this immersive experience, consisting of Outreach, Experience, and Marketing in addition to Systems and Design.
Role
UI/UX Designer
Team
6 UI/UX Designers
5 API developers
8 Mobile developers
4 Web developers
Skills
Graphic Design
User Flows
Interaction Design
Responsive Design
Tools
Figma
Notion
Slack
Timeline
June 2023 - February 2024
THE GOAL
As a designer on the 2024 staff, I had the opportunity to design interfaces for that year's theme, Hack n' Slash, a Dungeons and Dragons inspired theme. A plethora of new features were implemented to the event that year, requiring new interfaces to bring them to life within the theme. I was tasked with the following:
Design registration process for HackKnights
Implement new application status tracker for attendees
or simply put,
How might we…
recreate the application process so it's clear, straightforward, and immersive for general attendees and newly introduced advanced attendees?
UNDERSTAND
Introducing the 2024 theme: Dungeons and Dragons!
For the first time, students can apply as a HackKnight - a track for experienced hackers
In past years, students can register for the hackathon as general attendees. The registration process consisted of a form asking for general information, financial needs, accommodation, food preferences, and transportation. However, with the introduction of a new attendee experience, the application process needed to be refined to accommodate both kinds of applicants.
Previous User Flow (General Attendees only)
New User Flow
This new flow allows for a student to try their hand at HackKnight through a coding challenge. If they don't succeed, they have the option to try again or continue to register as a general attendee. If they do succeed, they get to register as a HackKnight. This flow maintains simplicity, making it easy for students to follow.
DESIGN
Ideate
With a user flow defined, I was able to mock up some low/mid-fidelity designs. The preliminary focus was on defining page content and formatting.
Feedback
Weekly cross-functional feedback sessions with both the Systems and Design teams provided me with direction and constructive criticism to achieve the team's vision. The main areas to focus on were to:
Integrate the theme effectively to make for an engaging storyline
Ensure readability for coding challenge instructions
FINAL PROTOTYPE
With feedback from the design and systems team, I was able to create simple and fun interfaces to engage students in the application process. Accessibility on all kinds of devices was a high priority so as designs were finalized, I created mobile versions for each web page to promote responsive behavior.
1
Applicants looking to be HackKnight attendees are prompted with a coding challenge
Dark background and Montserrat font with increased letter spacing to increase readability
Text is embedded into the scene
Theme characters imply an applicant is a character in this fictional world
2
Upon completing the challenge, the applicant is presented with one of two screens outlining next steps.
If applicant did not pass…
Immediate call to action
Text is embedded into the scene
Feels like the character is providing instructions
Maintain encouraging language
If applicant did pass…
Character celebrates with the applicant
3
After completing registration, an applicant is able to view the status of their application where it will eventually be accepted, deferred, or rejected. From there, the applicant is able to RSVP accordingly.
Pending
Deferred
Rejected
Accepted
Check out some of my design side quests !
IMPACT
500+
users applied for the HackKnight track
1000+
students used the HackIllinois mobile application
Overall, it was fulfilling to see the designs I made brought to life and contribute to streamlining the application process and 3 day event.
TAKEAWAYS
Being on the HackIllinois staff was such an enriching experience because of the sheer passion that every single person puts into the event. I came in with little to no graphic design experience and walked out with the ability to make illustrations in Figma.
Cross-Functional Collaboration
Collaboration with the Systems team, specifically web developers and iOS/Android developers, helped me create designs in the desirability, viability, and feasibility sweet spot. Clearly labelling designs in Figma and leaving a plethora of comments allowed for effective asynchronous collaboration. Often times, developers offered ideas for features that opened my eyes to what is feasible. Open lines of communication through Slack and in person meetings was key in consistently pushing out interfaces from the teams.
Shoutout to the amazingly talented design team that I learned so much from <3
And of course the entire HackIllinois team! Check them out here