One of my first projects as Associated Students Graphic Studio’s new web designer + developer was to redesign and rebuild our 9-year-old website. While maintaining our established brand, I gave the site a visual refresh that improved usability and information architecture, reflected modern design trends, and better showcased our small studio’s spunky personality.
UX design, web design, web development
Sketch, HTML, CSS, Sass, Jekyll
A.S. Graphic Studio is a tight-knit collective of designers and developers who work with UC San Diego students, staff, and faculty to bring their design needs to life. While new designers bring fresh and unique perspectives to the team each year, our website hadn’t been touched in almost a decade. As the face of our studio on the web and our main source of traffic, it was crucial that our site reliably showcased our work, captured our identity, and served as an efficient information and contact portal. Because the site also needed a code refactoring, this was the perfect opportunity to rebuild it from the ground up.
I began by taking a look at our current site and taking note of areas where the visual design or user experience could be improved. Design opportunities I identified included:
Overall, the website would benefit significantly from a design + grid system that consolidated typography, drove consistency across page layouts, and supported responsive functionality.
In my initial explorations, I took inspiration from the Pantone colors that lined the interior of our office. I played around by expanding our color palette and using grid imagery that extended our logomark, but ultimately decided that a cleaner look would be timeless and would lend more emphasis to our work.
To maintain our existing brand identity, I carried over our playful green and our typeface, Century Gothic. Century Gothic’s spacious curves did an excellent job of conveying our approachability and youth, so I decided to play up the classic typeface by employing large, bold headers. The current body font, a harsh black Helvetica, was also replaced by Century Gothic and made soft gray to align with our logo and appear friendlier. To further support this, I additionally chose to style headers using all lowercase instead of uppercase.
The primary business goal of this website was to attract more clients, but the existing navigation structure did not support this well. Potential clients need to be able to:
While it appeared that all these actions were accessible from the menu, the Work and About items included submenus that further organized content. Most of these pages, such as the Mission page, contained very little content and could easily be integrated into other pages. To minimize the interaction cost of accessing this information, I decided to combine smaller pages, place more items on the navigation bar, and dissolve the subnavigation. Reducing the amount of clicks it took to reach our content encouraged users to find out more about who we are, our mission, and what separates us from our competitors. I also created a unique state for the active menu item so that users would always be informed of their current location.
The finishing touch to my final design was a large hero image on the landing page. A signature characteristic of our studio was our floor-to-ceiling glass doors, which were always covered by a seasonal illustration. As our door illustrations rotated, so would the hero image on our landing page. This added more personality to our site and allowed us to showcase the growth of our talented designers. Visit A.S. Graphic Studio!