This is the second post in a two-part series on our work with Washington University in St. Louis’ Office of Undergraduate Admissions to redesign their website, the university’s primary gateway for prospective undergraduate students. In this post, we discuss the design and development aspects of the project. To learn more about the project goals, how we identified users and mapped out their needs, check out Part I here, or have a look at the project case study:
Visit the Project Case Study:
Washington University in St. Louis Undergraduate Admissions Website
Design it out
With our user personas in mind, we identified important content types and explored different modules for delivery throughout the website. All of the website’s features and tools were designed to encourage exploration, provide clarity around complex processes (like those pesky applications!) and most importantly, help prospective students see themselves at WashU.
Prototype it
To better simulate the real website experience, we built a working prototype. We use inVision, a prototyping app that allows our clients and target users to evaluate the navigation menu systems, drop downs, hover states, and other elements that can be difficult to understand when looking at a static comp.
Here’s a screencast of an early version:
Jumpstart the content
While our design team worked through the prototype, we mapped out the content and began harvesting/creating it. Wrangling content is one of the most difficult parts of any project, and we prefer not to leave it to the end! 
Let’s build the damn thing already!
As we finalized sections of our prototype, we began coding the templates. Our team was responsible for the front end development, which means a couple of things. Technically, it included writing all the HTML/CSS/jQuery, but really what this process is about is ensuring we create a delightful experience across all browsers and devices. Not surprising, the target users weren’t gathering around the family PC to check out the website, so it needed to work just as well for mobile and tablet users. We also worked along side the WashU accessibility team to make sure the site met accessibility guidelines, and coordinated with the back end development team to address any issues as they integrated our templates into the CMS.
And then there was a website.
If you’d like to learn more about the project, check out the case study. Do you have a complex project and need a collaborative team to help you figure it out? Give us a shout!