Phase 2: Design

Step 1: Create Affinity Models

The first task of our design process was to sit down as a class and create an affinity model for the website. Our instructor had us write down content from some 300 links, and then we had to sort it all out and create an information architecture system that would work for our persona.

“To the untrained eye, an affinity diagram may look very scientific, confusing and messy. But what you are viewing is actually a simple, yet powerful technique used in the early stages of…the design process”. – Jennifer Ridge  (src: http://www.usabilitybok.org/affinity-diagram)

After we had grouped our links into categories, we then had to sort them in a way that would make sense to navigate through. After we finished that we then created main nav titles that would enhance the user experience. One thing that I thought worked well is that we decided to make all our navs verbs.

At first it was a very confusing process, but as we came together we started to make sense of it all. I really liked this process because everyone had some great insight.

photo (2)
Here we are sorting through our model, photo credit: myself

Next our instructor asked us  to get our ideas down in a quick and dirty design. The real wire framing process will come later, but our instructor asked us to create a quick new home page for the site.

nhmu_before
Here is the original website

home-page-wirefram
Here is our new quick and dirty homepage with new information architecture

 

Step 2: Create Wireframes

Cameron Chapman said of wireframing “Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. But if done inefficiently, it can end up costing more time and can even create bigger headaches for both the client and the designer.” (src: http://sixrevisions.com/user-interface/website-wireframing/)

With these words in mind we went off to create some wireframes and this is what we came up with.

 

Here is our wireframe for the new page that will be the gateway to the different types of exhibits

Exhibit_Desktop

 

 

Here is our wireframe for the new page that will contain the menu for the museums cafe

Menu_Desktop

 

Here is our wireframe for the page that will come up when you want to buy tickets

Tickets_Desktop

There is still more to come. I will update this phase week by week until the entire project is done.