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.
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.
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
Here is our wireframe for the new page that will contain the menu for the museums cafe
Here is our wireframe for the page that will come up when you want to buy tickets
There is still more to come. I will update this phase week by week until the entire project is done.