VCUarts

Overview Process

I worked with a great team on a complete website redesign for VCUarts, a top rated public art school in the country.

_vcu1

Homepage

The main concept behind the new design — a flexible block structure, allowing a unique layout for each page.

_vcu2

“About” page

 
_vcu3

Current Students section

Each page tells its’ own story to engage prospective students. All of the sections of the site are unique, yet familiar.

_vcu4

Faculty and staff directory

 
vcu-demo

The new site is completely responsive

I was in charge of the design & user interface, along with developing major parts of front-end and back-end structure. We carefully examined the existing site and then re-imagined it with the end user in mind.

_misc

Misc elements

 

We also put together a quick visual guide with an overview of the new design direction for the website.

brand1
 
brand2
 
guide-vcuarts

Check out the live version at arts.vcu.edu or read about the process.

We spent the first two months by carefully examining the existing site.

We identified several problem areas with the existing site:

  • ◦ Slow, outdated, not responsive enough
  • ◦ Not used by current students
  • ◦ Confusing navigation

By using Google Analytics and in-person surveys, we started eliminating features that weren’t used often, such as embedded videos and the alphabetic index. The site was heavily geared towards prospective students, and we wanted to keep that. However, we realized that almost none of the current VCUarts students used the site, so one of our goals was to make it more useful to them.

 
 

vcuarts1

Existing website

 
 

Next, we identified all the involved stakeholders, including prospective students, current students, parents, faculty, and staff. Our goal was to set up a tight delivery schedule, involving regular check-ups with primary stakeholders, especially the deans.

 
 

todolist

Figuring out the delivery schedule

 
 

Working on some initial style tiles for the new website design. Gotham was the primary typeface for most of the promotional materials produced by the Communications office at the time, so I thought we could try to integrate it into the web redesign.

 
 

1initial-styletile

 
 

Some more style tiles — playing around with various font & color combinations.

 
 

2morestyletiles

 
 

Simplifying everything and thinking about the modular approach to the site. Thinking about how the site could be split into flexible blocks, each serving as a pathway into a different section of the site.

 
 

4lets-simplify

 
 

Each box can be used as a content container.

 
 

5boxes

 
 

Thinking of boxes/modular elements serving as links.

 
 

6boxesaslinks

 
 

Putting everything together. A this point, we have a solid layout/typeface direction.

 
 

7pagebeginning

 
 

Adding a background image that serves as a texture and changing colors. What if each website section had its’ own color scheme?

 
 

8add-bg-and-change-colors

 
 

This is getting somewhere.

 
 

9its-getting-somewhere

 
 

Simplifying the navigation menu.

 
 

10nav-is-confusing

 
 

Coding the first prototype. Using SASS/Susy for flexible grid system. From this point, the majority of visual exploration is done through the code.

 
 

11inital-page-html

 
 

“How to Apply” page — this actually made it to production!

 
 

12how-to-apply-section

 
 

Prototyping more block ideas and thinking how this will all work in the back-end.

 
 

13different-block-ideas

 
 

Realizing that the menu does not look great. What if it was some kind of 3d shape? How can we maintain the legibility and yet make it exciting?

 
 

14nav-ugly-lets-try-this

 
 

Making the menu a box to match the rest of the site. Adding a third dimension to make it stand out.

 
 

15lets-make-it-red

 
 

Communications director: “Let’s remove the tertiary nav on top of each page.”

 
 

16lets-remove-tertiary-nav

 
 

Sending everything to the deans and getting feedback.

 
 

dean-feedback

Spending the next two months finalizing everything… and then it’s live.

See the overview of the finished site.

Even after the launch, the site is a constant work in progress. Our goal is to continue gathering feedback from all of our users and keep improving the VCUarts experience.
 
_progress

Credits

Built with

WordPress
jQuery
SASS
AngularJS

Design

Dan Strogiy
Cody Whitby

Development

Cody Whitby
Dan Strogiy
Mark Luetke

Special Thanks to

Casey Ferguson
Teresa Ilnicki
Suzanne Silitch
Brandi Price
Grace Manno
Peyton Sorah

Next Project:   VCU Cinema Program