Home > design > A.S. Graphic Studio Redesign
A.S. Graphic Studio Redesign

A.S. Graphic Studio Redesign

UX Design, Web Design, Web Development

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.

Skills

UX design, web design, web development

Tools

Sketch, HTML, CSS, Sass, Jekyll

Date

Fall 2018

Resources

Github repo

Goals

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.

Website Audit

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:

  • Poor visibility of system status: navigation menu did not communicate the current location and pages did not include headers
  • Navigation menu could also be quicker and more intuitive. Submenus did not seem to be necessary and increased the interaction cost
  • Many different arbitrary text sizes and styles used. Missed opportunity to use text styles to signify function (e.g. discoverability of links)
  • The site was not responsive!

Overall, the website would benefit significantly from a design + grid system that consolidated typography, drove consistency across page layouts, and supported responsive functionality.

Old landing page

Explorations

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.

Photo of office
Initial explorations

Color + Typography

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.

Color palette
Typography

Information Architecture

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:

  • View our work
  • Learn about us
  • Contact us

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.

Old and new navigation menus

Final Design

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!

Close All ✕