Team
2 Designers
Duration
Role
Graphic Design
Website Design
Tools
Overview
UGAHacks is a non-profit event hosting committee at the University of Georgia. The members of this organization participate in volunteer activities around the city of Athens. UGAHacks hosts 2 flagship events, Makeathon and Hackathon, each academic year.
Problem/Goal
UGAHacks creates a new website is each year to reorganize the information following the theming of that year's event.
The goal was to create a website that matches the theme of the 9th annual UGA hackathon, superheroes, while keeping the visuals and information organization consistent across the UGAHacks brand.
I was given free reign over the design which allowed me to express my creativity during the process. I also illustrated every asset on the site, from the main banner to the home page buttons.
- Research and Ideation -
Setting expectations and doing market research and analysis.
The design team—my partner and myself—were brought onto the project 1 week before the developer of the website was. During this time, we participated in data collection, established a roadmap and discussed with our direct supervisor (Marketing Team Director) about the expectations and deadlines of the product.
I first met with the directors in charge to get an idea of what is expected of the design.
The directors decided that they wanted a fresh, new look to this year's website that catered towards college students and hackathon enthusiasts.
Therefore, I began the design process by looking at the past UGAHacks websites.
All of the websites had the same information organized into different layouts to match the event theme. I used this to create the draft sketches.
Ideation sketches were created using the insights and issues gained during the research process.
I created a full page site, where the navigation buttons redirect the users by scrolling down to each section.
I also created a redirect site, where the navigation buttons redirect the user to to a different page.
Wireframing
Challenges
While most of the ideation process was smooth sailing, there were a couple of challenges I faced.
Personal Challenges
Collaboration - Unfortunately my teammate left this project to me after the wireframing portion was finished. This meant I was to proceed with prototyping and designing by myself.
Communication - Because I did not attend UGA anymore after I transferred to Georgia Tech, I was not able to attend the in person team meetings and had to join virtually. It was difficult to get feedback quickly, meaning that there were delays in proceeding from sketches to wireframes.
- Prototyping -
Using the wireframes that were approved by the directors, we continued into prototyping.
Design Process
Design Components
Add into page
Review design with the team and stakeholders
I focused on brighter, comic book-like colors to give an energetic feel while also matching with the event's theme.
I illustrated the flying byte banner as the centerpiece artwork for the home page using a combination of Adobe Photoshop and Clip Studio Paint.
I edited the mascot logo and designed comic book cover styled buttons for the FAQ and Our Team buttons. The About and Sponsors buttons were created by another team member.
Final Design
Reflection
What I learned
A new concept of web-design: The concept of single-page redirect sites was new to me, as scrolling on a website is a very typical interaction. This was definitely a learning experience in terms of formatting and page design.
Keeping consistent: Working to keep the pages within the comic book aesthetic while also having the information organized was definitely a challenge too.
Figma features: Working in Figma to shape the panels for each page was definitely fun. I played around a lot with clipping masks and components for this project and putting in the dotted screen tone aesthetic was a nice challenge.
Areas for Improvement
Usability Testing: If I had more time or could change the circumstances, I would want to do some user testing from those outside of the UGAHacks organization. While I am super proud of this website, I would have liked to do some user testing to see if this design is truly usable for the target audiences.
