Team
1 Designer
Duration
June - Sept 2023
4 months
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 is to create a website that matches the theme of the second annual UGA Makeathon: ocean conservation, while keeping the visuals and information organization consistent across the UGA Makeathon 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 French bulldog graphic to the background assets.
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 would like the website to flow easily and stay relatively simplistic and consistent in regards to the information presented on it.
I began the design process by looking at the past UGA Makeathon website, as well as other Makeathon 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.
