Responsive Redesign
The USA Computing Olympiad features a volunteer team of academics that train a team of talented high schoolers for the annual International Olympiad in Informatics (IOI). Though the work they do is crucial in equipping the next generation of programmers, their website’s design is visually unappealing to their younger audience, alongside being unresponsive and difficult to navigate.
Client /
USACO
​
Role /
Visual Designer
Website Implementation
Responsive Redesign
​​
Team /
Myself
​
Tools /
Figma
Github (HTML and CSS)
​
Timeline /
3 weeks, 2024
As a team of one, I was eager to revamp USACO’s site and produce a visual style guide, design mockups, and implement a coded prototype of a new and improved website.
Mission Statements
Memorability
Designing a memorable brand identity with an updated, unified visual design system
Readability
Increase readability and accessibility with an improved layout and text hierarchy
Responsivity
Implement a responsive website that adjusts to desktop, tablet, and phone dimensions.
Process
First, we start with quick sketches, exploring potential layouts and color schemes.
I prioritized a clean and straightforward layout, with an eye-catching header, an easy-to-navigate header system, and a simplified text hierarchy.
After some critique from my peers, I finalized my design through a low-fidelity prototype in Figma. This was a simplified way to communicate my design intentions while allowing me to annotate the changes I implemented and how they'd address the issues of the original USACO website. Even during this initial sketch phase, I consider the layout's responsivity to different screen sizes.
Visual Style Guide
After taking some inspiration from existing competition and tech-focused websites, I build a style guide to create a cohesive design for my high-fidelity prototype. I prioritize a bright and approachable color scheme for USACO’s high school audience, with typography that has a pre-existing association with programming and tech, but isn't distinct enough to be offsetting.
Final Prototype
Final Product
Using the high-fidelity prototype as a guide, I implemented a coded, functional prototype of the website through HTML and CSS and published it through Github Pages. I ensured the layout adjusts to different screen sizes to maintain an easily readable design. ​
.png)