Designer
BostonHacks
Design Team
Figma
Adobe Illustrator
FigJam
UI Design
Graphic Design
Art Direction
Visual Design
ROLE
TEAM
TOOLS
SKILLS
Frontier-Tech: Transforming the Hacker Experience
Resharping the UI and interactive elements for the theme, "Frontier of Technology"
BOSTONHACKS
Every year, the design team at BostonHacks is responsible for…
Project Overview
Establishing a visual aesthetic that fits
Designing mobile and desktop wireframes and prototypes
Creating eye-catching social media graphics, stickers, and merchandise designs
For this semester-long project, I led the initial art direction and worked with six other designers in the team.
The Design team members individually created a color palette and mood board to present and pitch their vision.
Color & Mood Board
In the development phase, I crafted several boards tailored to this year's theme, "Frontier of Technology." My aim was to align the board designs with my vision of how the theme embodies innovation and advancement.
After an internal team presentation and voting process, my color palette and mood board were selected to be the visual theme.
This project was unique because the information laid out on the website is very similar (if not the same with a few tweaks) every year. Our team was also working over the summer when a lot of us were busy with other work as well, so our design head at the time decided to skip the low-fidelity wireframe and jump to high-fidelity.
Adapting to the Fast-Paced Design Process:
Each member then created assets that fit the mood board and jump-started to high-fidelity mobile wireframe of the landing page. Some members took an approach to a dark mode version of the initial color palette (e.g. light blue to dark blue). After a voting process, we chose one wireframe design we liked and decided to make revisions to the design.
Assets & High-Fidelity Wireframe
High-Fidelity Wireframe
Selected design
After the round of voting, we left positive comments and constructive criticism on every designer’s design and decided to implement some good design ideas from the wireframes that weren’t selected.
Iterations, iterations, iterations…
Two designers were then paired up to work on improving the chosen design, resulting in a total of three versions of the wireframe. We provided feedback to each other again and finalized what elements to include and what elements to eliminate.
For Hackathons, getting sponsors is one of the most important steps because we need monetary support from our sponsors to make the event come to life.
Designing for Hackers Sponsors
Therefore, the second page we designed has a different target audience–from hackers to potential sponsors. We laid out all the information provided by the Sponsorship team at BostonHacks and implemented different interactive elements to make the information look (1) visually appealing and (2) easy to understand.
The number #1 priority and purpose of this page is to convince the sponsors to sponsor us. In order to make that process as easy as possible for them, we used redundancy of information by including the “Sponsor Us” button twice (one on top and one on the bottom of the page) and including our contact information in the middle of the frame as well.
Who we are
Testimonial from previous sponsor
Contact information
Sponsorship opportunities
& Various track options
Statistics
Reviews of BostonHacks from
previous sponsors
"Sponsor Us" button
Countdown
Below is the recording of the website wireframe!
The Final Product
In addition to the mobile and desktop wireframes, I also designed social media graphics and other marketing materials to promote and use during the Hackathon.
Marketing the Hackathon
The 1:1 graphics were used for Instagram and other social media posts and the two rectangular ones on the right were used as an additional interactive element for the hackers during the hackathon.