Motorola
For the past two years, I have been a part of the Design Team for HackIllinois, designing for our annual hackathon’s website and mobile applications. As the lead UX Designer, I focus on creating an efficient user flow for our participants and engaging graphic elements to make the experience exciting.
MY ROLE 👩🏻🔧
Lead UX DesignerDURATION ⏱
Since August 2021TOOLS 🛠
Figma, Adobe IllustratorProblem
Designing a visually appealing and effective responsive web interface for the University of Illinois at Urbana-Champaign’s annual hackathon.
Solution
Followed a design process to build out the website and collaborated with developers to implement the designs while maintaining a smooth user experience.
During the beginning of the design process, my design team and I establish a theme and found inspiration through mood boards. For 2023’s theme, we went with a boardwalk, summer night theme. Our tagline is making memories.
While researching for inspiration, I took notes of specific icons or styles that work with the theme well and would like to replicate for the website. Some things I took note of were the booths, the huge boardwalk signs, and the ferris wheel.
01. Brainstorming
02. Wireframing
After deciding on what style of graphics we would go with, I focused on building out the wireframes for the website. When creating the wireframes, I kept things simple and straightforward because the website will be more visually focused. I left a lot of negative space and only added text where it was necessary. When making these wireframes, I kept in mind how users would view the page when scrolling.
Wireframe of 2023 website
Final design of 2023 website
03. Sketches
A part of the process is sketching out the main graphics for the website. These graphics are utilized throughout other aspects of our hackathon like in posters or Zoom backgrounds. The sketches below are from the 2022 website. The theme for the 2022 hackathon was a bakery style with a pastel color palette. While drawing these sketches, I took inspiration from Studio Ghibli films and images of cafes.
The design team also established a color palette that was utilized across all our designs for the hackathon like the website, mobile app, and other marketing materials. When creating the palette, we kept in mind accessibility and visual contrast to ensure users have a smooth viewing experience.
The images below are drafts of the landing page and the schedule page.
This is the final version of the landing page. My team and I collaborated through weekly review sessions to make any necessary changes on the colors or font and created this final design.
This is one of the final versions for the website’s schedule page. We utilized specific elements throughout the website to remain cohesive. On this page, it features baked goods that are also on the landing page.
04. Final Designs
From the wireframes and sketches, we combine everything to create our final designs. In the weekly team meetings, I discuss the website designs with our systems team to figure out what is possible to implement and what needs to be changed to make the process more efficient for the developers. I also discuss the website designs with my design team and receive feedback. After finalizing the website designs, I make sure the designs are responsive and look good across multiple platforms.
These are the final screens for the landing, schedule, mentors, and prizes pages. After implementation, there are some slight differences between the designs and the official website due to small technical issues. Check out the 2022 HackIllinois website below:
The image below are the screens for the mobile version of the website. When designing the website, I had to keep in mind what aspects would be too difficult to implement efficiently from desktop to mobile. I had to make sure things were not too complicated so it can transfer smoothly across platforms without losing the designs.
The HackIllinois mobile app below was used during our hackathon by all our attendees and staff members. The app is similar to the website in terms of visual design but it has more features like a leaderboard, a profile, and a QR code scanner.
HackIllinois 2022
HackIllinois 2023
These are the final screens for the landing, schedule, mentors, prizes, and map pages for the HackIllinois 2023 website. Check out the 2023 HackIllinois website below:
Check out the Figma prototype to see the full designs:
Below are the mobile screens of the website. To ensure a smooth responsive design, I tried not to overcomplicated the visuals and focused on what was important, the content.
This is the final design for the HackIllinois 2023 mobile app. The mobile app features similar pages and designs on the website. The app is utilized by staff and attendees during the hackathon for updates, gathering points, food, and more.
Check out the full design flow in the prototype →
HackIllinois has been one of the best parts of my college experience. Being a part of the Design Team helped me grow immensely as a graphic designer and a UX designer. I was able to expand my skills being a team player and my confidence as a designer. As the lead designer for the website, I was able to collaborate with different staff members to create the best hackathon experience for our attendees.
My biggest challenge became my best learning experience from HackIllinois. It was sometimes difficult to make sure my designs were easily understood by our team of developers and could be implemented without much necessary changes. I did not realize until later that I lacked understanding of what the developers needed in terms of screen sizes, files, etc. to transfer the designs from Figma smoothly. We also did not properly communicate expectations which may have contributed to slight hiccups in the final website implementation.
This was a great learning experience and I now better understand the details of communication required to have a successful collaboration between designers and engineers. It is important to also ask the developers more questions to see if they need anything from design to aid in their coding process.
Key Takeaways:
Communication is the driving force for great teamwork and achieving expectations. HackIllinois is a student-run organization and for everything to run smoothly, the entire staff team needed to communicate consistently about every little thing. Everyone was a part of a team and had to work together so without good communication, this hackathon would not have been successful.
Teamwork makes the dream work! Without our developers, the website would not be functioning. Without my design team, more than half of the hackathon’s design assets would be gone.
The hackathon was a 3-day event and staff take shifts working the event until 3 AM. It is an intense but special weekend where we get to bond and share sleep deprived, adrenaline filled nights. The best part is when we have a ton of leftover food and we got to bring home boxes of Potbelly sandwiches or pizza. Thank you HackIllinois! HACK YEAH! :)← That’s my design team and I standing in front of the website landing page design and below is the entire HackIllinois 2023 Staff after the hackathon’s closing ceremony! ↓
