BostonHacks UI Revamp
Redesigning the UI and interactive elements for the theme, "Frontier of Technology"
ROLE
Designer
TIMELINE
June - November 2022
TOOLS
Figma
FigJam
Adobe Illustrator
SKILLS
UI Design
Graphic Design
Art Direction
TEAM
BostonHacks Design Team
PROJECT OVERVIEW
BostonHacks is a 36-hour hackathon where students create innovative projects, expand their skills, and network with top recruiters.
Each year, the BostonHacks design team is responsible for:
Establishing a fitting visual aesthetic
Designing mobile and desktop wireframes and prototypes
Creating eye-catching social media graphics, stickers, and merchandise designs
Color & Mood Board
Assets & High-Fidelity Wireframe
This project was unique as the website's content is mostly consistent each year, with minor updates. Working over the summer, our design lead chose to skip low-fidelity wireframes and go straight to high-fidelity.
Each member created assets based on the mood board and developed mobile wireframes, with some exploring a dark mode color palette. After voting, we selected our favorite wireframe for revisions.
More Iterations.. ✏️
Inspired by the theme "Frontier of Technology," our team explored concepts like futuristic, advanced, sci-fi, and space.
After an internal team discussion, this was the final visual theme.
High-Fidelity Wireframe
High-Fidelity Wireframe
After voting, we provided positive comments and constructive feedback on each design and chose to incorporate strong ideas from the unselected wireframes. We then improved the chosen design, offering feedback to finalize which elements to include or eliminate.
Designing for ✨ Sponsors ✨
The Final Product
Securing sponsors is crucial for hackathons as their monetary support brings the event to life.
The second page we designed targets potential sponsors rather than hackers. We organized information provided by the Sponsorship team and added interactive elements to make it visually appealing and easy to understand.
The main goal of this page is to convince sponsors to support us. To simplify this process, we included a "Sponsor Us" button at the top and bottom of the page and added contact information in the middle.
— Close Ups —
Below is the recording of the website wireframe! 💻
Marketing the Hackathon
← NEXT PROJECT: AUTHENTICA
——— The selected designs ———
In addition to the mobile and desktop wireframes, our team also designed social media graphics and other marketing materials to promote and use during the Hackathon.
