Role: UX Designer
Description: Redesigned the Design Museum of Chicago’s website to improve the usability
Duration: March 2019, Alternative Spring Break Project
Tools: Figma & Google Analytics
Client: Design Museum of Chicago
Inspiring, Educating, and Innovating Through Design
Having recently updated their mission to better reflect their community ties, the Design Museum of Chicago sought to improve their website in order to better align their web presence to their mission
A Mission Oriented Experience
Using a cheerful color palette and joyful images to reflect the community driven mission.
Making the sought after information findable
Reorganizing the layout of the site, and improving the information architecture helped to make contents clear and findable. Whether learning more about gallery location, or featured exhibitions, information museum goers would want to know was organized with clear headers and call to actions.
Research & Evaluation
Evaluating the website, the team identified four major usability issues: Information Hierarchy, Content Presentation, Links & User Journey, and Visual Language
Information hierarchy made it to hard to determine the priority elements
Priority content on each page is either missing or not presented in a way that would demonstrate its importance. Each page lacked call to actions
Layout/grid of the website disrupted information hierarchy
Content Presentation was incongruent
Visuals are incongruent with the messaging on each page and does not align with new mission.
All images on the website are displayed in black and white by default, and color versions are revealed on hover.
Links & User Journey were difficult to navigate
Linked content did not always open content as expected.
Various UI elements were used to convey links (arrows, underline, headers) which made it difficult to determine how to navigate through the site.
Visual Language was hard to follow
UI elements were inconsistent which made it hard to determine the function of each element. The style of website did not reflect community values
Why was the Design Museum of Chicago was interested in redesigning their web presence?
Mission was updated to reflect the community values of the organization.
Increasing donations made to the museum
The client was interested in finding a solution to increase the number of donations made through the website.
Multiple gallery locationsThe Design Museum of Chicago has two different gallery locations, and a separate mailing address but this was not clearly indicated
Various shopping merchants required to complete purchase
There are separate distributors for products ordered from the website. Some products are available for purchase through the website while other products are available for a purchase through an external website.
Gaining insight into User Behavior through Data Analysis with Google Analytics
Users are interested in revenue generating pages, but are abandoning their carts
The Shop, Support, and Membership page, all of which could be used to generate income for the museum, had a higher viewership than the Cart page. Individuals are interested in looking at either products sold on the site, or donating to the museum.
Users are interested in learning about the museum & exhibitions
The Home, About, Exhibitions, and Events page are the most viewed pages on the site. Despite its high viewership, users are not engaging with content linked to the About page.
Users are not engaging with content on the about page
Despite its high viewership, users are not engaging with content linked to the About page.
Sketching & Brainstorm
How do other museums reflect their missions/values, request donations, and present their shopping materials?
How do other non-profit organizations represented their mission online?
Wireframe of Revenue Generating Pages
Completed wireframes for the entire website redesign and hi-fidelity mockup of the Home page.
1. Emphasizes the value of donating and becoming a member of the museum.
2. Consolidated the previous support and membership page as it was best practice for museum sites
3. Taking inspiration from Everlane’s transparent pricing, the team used both text and imagery to show how engagement would impact the community.
Previous Support Page & Membership Page
1. The previous Support page had amounts and set donation amounts under each impact statement. With a set amount to donate users may select the amount they donate based on the impact statement and vice versa.
2. In the redesign, an interactive slider was used so that users could determine how much they wanted to donate. Transparency in how the money would be used was based on percentages.
Shop & Product Detail Page
1. Provide users with a clear way of knowing where they could purchase their item from using "for purchase at" indicators and images of the external sites logo.
2. Make it easier for users to locate items from the Shop landing page by adding a feature to filter by price, item type, and purchase option.
3. Users were viewing the Shop page, but were not necessarily going through with the purchase. On the Product detail page, more images were included to show the product at different angles.
Previous Shop & Product Detail Page
1. The buttons under products on the Shop landing page were inconsistent. Some buttons: "add to cart" button was not standardized across all products available for purchase.
Hi-fidelity Mockup Based on Data Insights
The team completed wireframes for the entire website redesign and hi-fidelity mockup of the Home page. The team assessed ways in which this would be ideal based on how other museums presented their content and through data insights about how users engaged with the Exhibitions, Events, and About pages
Client Presentation & Recommendations
Deliverables of this project included: a hi-fi mockup of the Home Page, Wireframes of the Shop, Support, About, Exhibitions, Events, and Rentals page. We also provided the client with a number of other recommendations that could be used to make improviements
Addressing concerns from evaluation the team addressed the concerns to create a more seamless mission-driven user experience.
By reflecting on the goal of each page, the team was able to prioritize the placement of content and indicate clear call to actions
To reflect the emphasis on the community, made sure that the images on each page went along with the goal of each page.
Links & User Journey
Links were standardized to make site navigation clear.
The background of the website was changed to white, and images were displayed in color. We also standardized UI elements, so that users could clearly delineate the information on each page.
Original Home Page
Redesign Home Page