Re-design the UM Interactive Media website
Card Sorting: information architecture
Roles: UX researcher / UI designer
Overview
The University of Miami's Interactive Media Department webpage challenged us to redesign a better way to access crucial information on the website. To address this issue, my team member and I prioritized optimizing the information architecture, adhering to W3C's accessibility standards for the UI, and establishing a consistent visual design to enhance user satisfaction and experience.
OPPORTUNITY STATEMENT
How can we better re-design the information architecture and visual design for the University of Miami's Interactive Media Department website?
Click image to enlarge
Empathize
Procedure
Designing based on data is critical to making worthwhile designs that have an observable impact on the experience of the users. To do this, we used a UX research method called card sorting. We would study participants' grouping of labeled "notecards" in a way that made sense to them. This method uncovers how the target audience's domain knowledge is structured and helps us to create an information architecture that matches users' expectations.
Complete demographic questionnaire
Read instructions aloud and explain the upcoming task
Begin Timer, on the stopwatch app
On a laptop, conduct card sort exercise using Optimal (while taking notes on the phone through Google form)
End Timer, on the stopwatch app
Manually record participant’s sorting answers using screenshots
Have participants rate categories’ importance, record through Google form
Complete post-test questionnaire
De-brief participant
Question and Questionnaire Design (Krosnick & Presser, 2009)
Research Methods
Click image to enlarge
We started with a card sorting exercise to see how users organize website information.
We asked each participant to fill out pre- and post-study questionnaires before and after the card-sorting activity.
Participant Card Sort Data
Each participant was allowed to create a category for content (on the far right side) and a level of importance (color designation of importance green=important, yellow=medium level importance, red=not critical).
Click image to enlarge
Information Architecture Findings
Click image to enlarge
We found the most common information architecture groupings here based on the grouping created by participants.
Define
Key takeaways
Participants showed common categorization of 6 major groups
The menu bar must have 6 tabs representing these groups
3 categories stood out as the most critical
Create buttons on the home page to access those 3 categories quickly
Prototype
Below are images of the old site design, the new site map, and the redesign.
Original Site
Click image to enlarge
Click image to enlarge
redesign
Click image to enlarge
Click image to enlarge
Next Steps / Takeaways
As a designer, I enjoy putting my skill sets to the test, and working in an early-stage startup was an extremely steep learning curve for both of us.
Focus on making sure all user testing is as similar as possible. When working with users, always have a script and read from the script to make sure that all tests are as identical as possible.
Rely on vetted user experience questionaries. At the beginning of the research process, we rewrote questions to account for response bias. We later decided that was not a necessary change when using vetted Likert scales (questionnaires).
The importance of accurate data when making a redesign. Users give designers their recommendations through usability tests and pre- and post-questionnaires. Still, the designer needs to be able to synthesize the information to create an experience that will benefit as many users as possible. We would make a better system for tracking data.
