Summary
Project Goals
Our main goals for this project were as follows:
Improve information layout.
Provide ease of navigation for users.
Ensure broken/missing links were updated in our redesign concept.
Provide a thorough wireframe outlining our proposed structure.
Methods and Results
Overall we were able to complete our project goals and redesigned an effective and understandable layout for this website redesign. In order to ensure our success we used the following methods to keep our design user-focused:
An open card sort to understand how users sort information
Tree tests to assess our navigation ideas based on the card sort
A sitemap to outline the navigational ideas indicated from the tree test results
User Testing
Card Sort
Our group created an open card sort which allowed participants to create labels and sort the web content into them.
These groupings from the users allowed us to understand where participants grouped items together.
A similarity matrix was then used to organize the data based on how often certain information was placed together.
This allowed us to create labels and their content, which was then to be tested through our tree tests.
Tree Tests
We completed a total of two tree tests for this project.
Our first tree test showed some major flaws in our original layout, having high error rates. Seeing where people went astray, we were able to develop our second tree test which had a significant improvement in task error rates.
Sitemap
Using what we learned through both our card sort and tree tests, we created a sitemap to layout the navigational structure within the website. This shows which information is connected and how the user can access every part of the site.
The sitemap allows us to view how users would move through every level of the website information.
This structured the layout for our next step, and allowed us to then move forward on to the final wireframe design.
Wireframe
We created our wireframe using Adobe XD. The wireframe took the outline provided by the sitemap and created detailed information pages as to how the website could look. This highlighted all of the information that each page would contain and how users would navigate the new website.
This wireframe allowed us to communicate our new design idea with the client in a way that is easy to visually understand. From here they would be able to move forward with the website development, following this design outline.
What I Learned
Throughout this project I feel like I learned a lot about the steps an information architect would go through when redesigning a website.
Card sorting and tree testing were both methods of user testing that I had not used before. These are helpful skills to be able to understand user mental models and how they sort information. This allowed for users’ needs to remain the centre focus to our design and ensure the new layout was one that made sense to them.
After completing all the steps in this assignment, I feel that I could confidently create improved website design layouts while focusing on results from user testing.