Nonprofit Website Redesign
UX/UI Design Project Case Study
Jump To:
Overview
This was the second group project in my UX/UI bootcamp at Denver University. We were given the option to work alone on this project and I took it. I wanted to have full control and oversight over the development and design so I could produce a portfolio project I was 100% behind. For this project we were tasked with selecting a nonprofit with an out-of-date website. The nonprofit I selected was the Telluride Historical Museum. Over the course of 3 weeks I redesigned their website from the ground up to suit responsive web design standards. The end product is a website redesign that I am very proud of.
Problem
Looking through local Colorado nonprofits I came across the Telluride Historical Museum. I saw that their current website was lacking proper responsive web design, which makes it difficult to navigate and find information across desktop, mobile & tablet devices.
Solution
A responsive website redesign creating a more enticing and streamlined way to deliver information to website visitors hopefully turning them into museum visitors.
Tools Used
Figma
Invision
Miro
Google Docs, Sheets, Slides, etc.
Role
UX Researcher
UX Designer
UI Designer
Timeline
This project was completed over the course of three weeks.
Phase 1: Empathize & Research
Heuristic Evaluation
To kick things off I conducted a heuristic evaluation of the museum's current website. While the website served the purpose of relaying museum information it was not a pleasing site to use. It lacked proper formatting at times and a proper use of white space as well. The websites overall layout was not user friendly and did not create a space people would want to spend a lot of time in. The first thing I thought of when visiting the website was that it turned me off of wanting to visit the museum. I knew from that point that I wanted my redesign to turn website visitors into museum visitors.
The screenshots above is what their homepage looks like and what their top nav looks like as you go further into the site. The top nav bar is oddly formatted and the logo is very large compared to the rest of the nav bar. Diving further into the site there are pages where text overlapped, several pages were also outdated and showcasing events that happened years ago. In my overall opinion, the site is not properly formatted and needs an aesthetic update.
Stakeholder Contact
After examining the website's design and navigation I came up with questions and gathered 5 willing participants to be interviewed. I also reached out to employees of the museum via email to see if any of them would answer a few questions for me. Molly Daniel, the Director of Exhibits and Programs responded to me. The main takeaways from her responses were:
Outdated
"The website, in my opinion, serves its purpose, but could definitely use an update."
Formatting
"The present formatting is limiting as far as more interesting design layouts and interfacing."
Limited
"It being a Wordpress site, and an old one at that, it requires a lot of plugins for additional features such as commerce."
Boring
"The design is straightforward, but from my perspective, pretty plain."
User Interviews
With my user interviews I wanted to discover what my participants enjoyed about museums, their visitation habits, what they look for on a museum's website and their opinions on poorly formatted, outdated websites. The main takeaways from those interviews were:
Need-to-Know Info
100% expect to see hours, exhibits, prices, etc. clearly listed on the hompage.
Bad Sites
"100% aren't eager to visit a place if it has a poorly designed website."
Formatting Frustration
"100% quickly lose patience for poorly formatted, hard to use websites."
Affinity Diagram & Empathy Map
After contacted a stakeholder and conducting user interviews I gathered the data and developed an affinity diagram. This was important to do in order to discover the connections and similarities between the users I interviewed. Discovering these similarities helped me move forward in developing my User Persona and gave me a better understanding of how users might want and need to interact with a museum's website. To develop this a little further I also made an empathy map. This made it much easier to pull a persona out of the interview data.
Here you can see key takeaways from my user interviews categorized into groups based on relationship and similarity.
Here you can see further development of my interview takeaways. This along with my proto persona were used to develop a fully-fleshed out user persona.
User Persona
Phase 2: Definition & Ideation
Storyboard
With a user persona solidified I moved on to develop a storyboard. The story below showcases Janet's problems with the current website and how my redesign would solve those problems.
User Insight
With an idea defined and a persona created I moved forward to develop my user insights and problem statement. In my user insight I included some business insight as well. The museum is are selling an experience and their website promotes it. It is important that their website pushes visitors to visit the brick-and-mortar establishment in Telluride.
Janet Snakehole needs to be able to access and easily view museum information quickly because this makes it more likely that they will take the time to visit the museum when they are in Telluride. Out-of-date, unformatted websites create frustration for users and leads them to leave the site sooner than they would have liked thus making them less eager and likely to visit the museum in person.
Problem Statement
How might we update the websites design while improving its RWD and functionality in order to create a more digestible and streamlined way to deliver information in hopes of creating more visitors to the museum?
The Telluride Historical Museum website was designed to relay museum relevant information and services to potential visitors. We have observed that the website is lacking proper responsive web design, which makes it difficult to navigate and find information across desktop, mobile & tablet devices. How might we update the websites design while improving its RWD across devices in order to create a more digestible and streamlined way to deliver information to potential visitors.
Value Proposition
I then moved on to develop a value proposition for the redesign: "I will be redesigning the Telluride Historical Museum’s website to help potential visitors easily find and view information relevant to their decision-making process on whether to visit the museum or not." This along with value proposition canvas clarifies how this redesign will help visitors to the website.
Phase 3: Prototyping & Testing
Sitemap
Now that I had an idea of what I wanted the new website to fulfill for its users I began to build a structure for what that might look like. I started with card sorting, taking the existing navigation structure, breaking it down and rebuilding it into something that was easier to use. It also got rid of duplicate pages, dead pages, and links to pages for events that happened five years ago, etc.
This new site structure shaved off a lot of unnecessary pathways and unnecessary pages making the users time on the site spent researching the museum, its attractions, and their prices, guidelines etc. instead of spent trying to find these things. This along with a new aesthetic would represent the museum in a much more serious and professional light.
Task & User Flows
With the new website's structure down I began to build out some user and task flows for how the site may be interacted with by the user. This helped me progress towards developing my lo-fi sketches and mid-fidelity prototype. In the gallery above you'll see three user flows and three small task flows.
Mid-Fidelity Prototypes
 |
|---|
 |
 |
 |
 |
 |
Early inspiration for this redesign was found from other larger museum's websites. Museums like the MoMA, Denver Art Museum, and the Portland Art Museum were big inspirations for the site's new aesthetic. I wanted something that was eye-catching, informative, and would be taken seriously by users. My inspiration board can be viewed in full here.
While developing the mid-fidelity prototype I knew I wanted to capture the user's interest right when they enter the site. Upon entering the site would be a large image of the San Juan Mountain Range that Telluride calls home. This with a brief phrase, "Discover the Geological Wonder of the San Juans", overlayed would pique the users interest and welcome them to explore more of the website asking themselves 'what else does this museum have to offer?'. My desktop prototype can be explored here and the mobile here.
Style Guide and Inspirations
The color palette for this redesign came to while I was exploring the website. Looking through the museum's current exhibits I noticed one exhibit showcasing 'The Telluride Blanket'.
The history of the blanket fascinated me, it had ben carbon dated to have been made sometime between 1041-1272 C.E. by the Ancestral Puebloan peoples. Its colors were beautiful and its history was rich. Right when I saw it I knew it needed to be incorporated into the redesign so it's colors became the driving colors behind the sites new aesthetic.Having this color palette down helped pull together the rest of the style guide. The new logo featured the colors and patterns of the blanket. I kept the text simple with one Sans-Serif font, Roboto. The text was crisp and clean, easy to view at any size.
It also helped give the website a more elevated and modern look. In the gallery you can see the finalized style guide that includes the 25 elements of the UI style system.
High Fidelity Prototype
After completing my mid-fidelity prototypes, while I was working on finishing my style guide, I also conducted some usability tests. These tests showed me what was working and what wasn't with my site. I made necessary iterations to the navigation and overall aesthetic of the site before moving forward. Once testing and the style guide were finished I worked completing on high-fidelity desktop and mobile prototypes. This really brought the project to life as I integrated the colors and style into the mid-fidelity structures.
The finished product you see here on the left is quite the drastic change from the museum's original website. I feel that this updated redesign better represents the museum and what they have to offer to their visitors. It is clean, simple, and modern. It doesn't have any bells and whistles, it presents the necessary information to visitors and does so with a straightforward and simple navigation and updated clean aesthetic.
In choosing to do this group project by myself I gave myself a much larger workload than my classmates who chose to work in a group. There were times where I wasn't unsure if I'd have enough time to complete this project but I was able to wrap everything up and present a finished project to my class. I am incredibly proud of the work I did on this project and it is my favorite work out of everything I produced over the six month bootcamp course. The final desktop prototype can be viewed here and the mobile here.