UX Designer | Mar 2019
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 with their updated mission. Our team redesigned the Design Museum of Chicago’s website to improve the usability and to reflect a more mission-driven user experience. This project was part of a week-long alternative spring break program.
A mission driven user experience on the Design Museum of Chicago website. To achieve this, the team prioritized using vivid imagery that was more representative of the community driven messaging, and reorganizing the layout of the website to help improve navigation on the website.
Having only one week to improve upon the design of the Design Museum of Chicago’s website, the strategy was to focus on research and evaluation at the beginning of the week and to build about a solution around the findings.
Day 1: Discovery Research and Evaluation
The first day was for evaluation and research. The team conducted an audit of the Design Museum of Chicago website independently, and without prior communication with the client. From the audit, the team identified four usability problem areas: information hierarchy, content presentation, links, and styling.
Original Membership Page
Information Hierarchy: The priority content on each page is either not highlighted or presented in a way that would demonstrate its importance. In addition, where the user should focus their attention on each webpage is unclear and call to actions are missing.
Content Presentation: Visual content and imagery is 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, and color images are revealed on hover.
Links: Determining linked content on each page was difficult because different UI elements were used to convey that something was a link. In addition, linked content did not always open content as expected.
Styling: The styling of UI elements was inconsistent which made it hard to determine the function of each element.
Day 2: Why Driven Research and Data Dive
The team met with the client to discover more about why the Design Museum of Chicago was interested in redesigning their web presence. Their mission was recently updated to better reflect the community values of the organization. The client was also interested in finding a solution to increase the number of donations made through the website.
The team presented findings of the four categories from the audit: information hierarchy, content presentation, links, styling and identified additional client needs in developing a solution for the gallery locations and various shopping merchants.
Original Donations Website
Two Separate Galleries
The Design Museum of Chicago has two separate gallery locations for their exhibitions, and a separate mailing address. The original website did not make this clear and relied on users to make this distinction.
Original Home/Exhibitions Page
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.
Original Shops Page
With limited access to users, the team also reviewed Google Analytics to gain insights about user behavior on the website.
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. Comparing the viewerships, the team determined that while people may interested in looking at either products sold on the site, or donating to the museum ultimately they are not going through with the purchase.
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.
Day 3: Strategy and Sketching
Balancing client needs, data, and information from the usability evaluation, the team’s strategy was to prioritize redesigning the Home Page, Support Page, and Shop Page. The plan was to develop a hi-fi mockup of the Home Page, detailed wireframes for the Support and Shop Page, make recommendations for the About and Rental Pages, and to provide the client with a report to include a prioritized list of other items that they should look to address in the near future to improve the usability of the site.
The team began sketching and wireframing ideas for the proposed redesign. Influential to this process, was gleaming insights on how other museums reflect their missions/values, request donations, and present their shopping materials. The team also looked at how non-profit organizations represented their mission online.
Day 4: Content Creation
As a way to compare the old version of the site to the new one, the team created a wire-frame of the basic framework of the old website. The team also completed wireframes for the entire website redesign and hi-fidelity mockup of the home page.
Day 5: Deliverables and Client Presentation
Deliverables of this project included: a hi-fi mockup of the Home Page, Wireframes of the Shop, Support, About, Exhibitions, Events, and Rentals Page.
Mockups of Redesign
Providing the client with a hi-fidelity mock-up of the home page was important as it would be the first page users would see.
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.
The previous site had a separate support and membership page, we combined this in the redesign, as this seemed to be common practice for museum sites. The new support page emphasizes the value of donating and becoming a member of the museum. Taking inspiration from Everlane’s transparent pricing, the team used both text and imagery to show how engagement would impact the community.
The previous support page had amounts and set donation amounts under each impact statement. The team felt that having a set amount to donate may be jarring to users and that because each amount had an impact statement, users may select the amount they donate based on the impact statement and vice versa. To mitigate for this, 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
Due to differences in where products/merchandise are advertised and shipped from, we wanted to provide users with a clear way of knowing where they could purchase their item from the product page site using image and “for purchase at” indicators. A filter was also included as way to allow users to quickly sift through product offerings based on price, type, or purchase option.
Data indicated that users were viewing the shop page, but were not necessarily going through with the purchase. On the product detail page, more imagery was included to show the product at different angles.
Addressing concerns from our initial usability test the team completed the following to unify and create a more seamless mission-driven user experience:
The original site had a black background, which the team believed distracted from the uplifting community mission. The background was changed to white in the redesign. Also, the black and white to color hover effect on the images was removed as it required an unnecessary task for the user in order to view how the product would look in real life.
Both the typography and alignment of the original site, added to the confusion of the information hierarchy. Looking at information hierarchy through a lens of: what is the goal of this page, the team was able to prioritize the placement of content
To reflect the emphasis on the community, the team included vivid imagery and transparencies so that the images were able to stand out. On the previous site all the pages had the same layout which made it hard to decipher which page users were on.
All links were denoted by and underline and >. Buttons were stylized and also used as call to actions.
Prioritizing High-Value Deliverables
Given the quick turnaround for this project, it was important to provide the client with deliverables that would yield the greatest impact. For this project, focusing more on usability and less on styling (color, typography) proved to be key as we could better convey our findings to the client. Also, because we were not responsible for ultimately carrying out the website redesign, we wanted to provide the client with suggestions that could quickly be picked up and considered by web developers.
Presenting to our client revealed the importance of being able to effectively communicate and present our ideas in a way that could be understood. This was one of the first projects that I worked on that showed me how much UX jargon I knew. Jargon can easily become a distraction during a presentation. Even the presentation method of choice could make a difference in how well a client is able to understand proposed solutions. For example, when highlighting results from our initial evaluation we opted for Google Slides, but for the final presentation we used Figma as that would better show the proposed redesign against the original site. Figma also allowed us to drop in comments to serve as addendum.