I put together the following as an example of how I would approach the redesign of a customer-facing website for large museum in Washington DC. I’ve redacted some information, since this was only a hypothetical exercise.
Let’s say I am working on the new template for the Learn About the [Event] Landing page. Here’s how I’d go about it:
Since this is the landing page for an entire section, we need to make sure it properly reflects the content in that section. So first, if it doesn’t yet exist, I’d create a sitemap of the Learn section (including other sections of site we plan to move into Learn) to better understand the disparate resources and sections of the site. We’d need to decide if there are resources that belong in other sections (for example, [Exhibit] is included in the Information for Students > Online Activities section, but it seems to be more appropriate for researchers, and might not belong in the student section unless it could be given a more student-appropriate lens).
I’d look at analytics to see which elements/resources are most popular, and which are under-used. We may need to work with content subject matter experts if we think we may need to revise, rename, combine, or otherwise reformulate any of the resources.
With a good sense of the content that will remain in the redesigned Learn section, I’d propose some card-sorting exercises. We would want to gather data from younger students (if permissible), older students/adult learners, teachers, parents, and Museum visitors. It may be that grouping resources into one section for “students” isn’t enough. We may want to consider organizing by age groups (middle, high school age; adult learners).
Next I’d consider what to do with the topical content and features currently on the page. For example, the carousel is serving as a focal point and spot of visual interest. Let’s look at metrics to see if people are using the arrows to page past the first article (Nielsen Norman research suggests people often scroll past carousels). Perhaps we might consider an alternative of a hero image that sets the tone, visually, for the page, and better aligns it with the other recently redesigned pages.
After considering analytics from the current site and data from card sorting (and other existing research), we’d want to try organizing the page and the features in an intuitive way. Without any data, aside from the points made in the assignment details, I’ve made a rough sketch of a possible way to organize the site:
We could test prototypes like these (well, perhaps a higher fidelity set) with our audiences by using a “first-click” test. This is especially useful for a landing page, since we want to make sure people set off in the right direction. For other parts of the section, we’d want to consider other ways to test the IA, such as a treejack test.
Based the feedback from the first-click test (do people click in the “right” places in order to achieve their particular goals?), the next step is to revise. I’d like to have tested more than one prototype, so that we can try to determine which design and IA elements work better than others. A revised version might include elements from several different initial prototypes.
At this point we continue to test, gather feedback, and revise until we’re pretty happy with the interface. Time to work with the development team and designers to build out a properly functioning page and roll it out so that we can collect metrics on usage. Based on what we learn from that data, we’ll want to make small revisions and push them to production. At this point we may wish to consider running some A/B or multivariate tests on particular elements or features.
Bonus point time! I made some high-fi prototypes of one of the subpages in the Learn section. I did this, in part, to help familiarize myself with content in this section, and also to think more about within-page UI without worrying about the overall navigation architecture. In these prototypes, I’ve done the following:
- Reduced visual clutter and elements competing for attention
- Minimized sidebars; used one-column format
- Grouped page actions together
- Moved one image to top as a hero image to give the page visual interest and to give context for page content, and then grouped all non-textual elements together in their own sections
- In large-screen format, added jump links to different sections, as well as counters to show how many elements are in a given section
- Used an accordion on initial page load for the small-screen format in lieu of jump links
- Used a fluid grid for photos so they can float to one-column on small screen if necessary
- Minimized some content elements (ex. eliminated biographical details in Personal Histories section)