Redesigning a Website for a Nonprofit Museum Across All Devices
Project Details
Sector: Nonprofit
Challenge: To redesign the website of a chosen nonprofit from scratch
My Role: Visual Designer, Interaction Designer, Prototyping
Responsibilities: wireframing, user research, designing, prototyping, testing
Project Time: 4 weeks - (Feb - March 2021)
Project Overview
This project was part of a web design course (ARST 245 Web Design), which I took during my tenure at Bucknell University. We were tasked with redesigning the website of a nonprofit organization of our choosing in the Central Pennsylvania region. The goal of the assignment was to understand and apply the principles of interactive and web design in order to produce an efficient, aesthetically pleasing, and engaging design solutions. The project was broken down into 2 assignments. Assignment 1 focused on creating the rough sketches and wireframes, and we dove into visual design and protoyping mockups in assignment 2. I chose to redesign the Piper Aviation Museum in Central PA.
Website Reference: Piper Aviation Museum
Analysis
I chose the Piper Aviation Museum because after I went through the list of nonprofits that the professor provided for the course, I concluded that the Piper Aviation Museum's website was in need of improvement the most. For example, the colors of the text and background clash with the rest of the site. The use of small black text and a small call to action (CTA) on the home page makes it difficult for website visitors to understand important information. The lack of consistency in text size throws off the visual hierarchy of the entire site.
On the events page, there's only one image on the entire page. The rest of the events page is just hypertext links to each event subpage. I wish there were image previews of each event that show at least when and where the event will be held with a strong CTA to register or RSVP for the event. This would immensely improve the experience of finding out what events are coming up for potential visitors because they can get a quick overview of upcoming events without having to dig through a long list of links.
In summary, most of my criticisms about the Piper Aviation Museum website stems from its lack of cohesive color combinations, visual hierarchy, and layouts of webpage elements.
Assignment 1: Sketches & Wireframes
Taking into account the lack of cohesive color combinations, visual hierarchy, and layouts of webpage elements of the Piper Aviation Museum, I decided that these were the main aspects of the website that I would focus on for my redesign.
Synopsis of Classmate and Professor Feedback
The proposed wireframes provide more clarity over the original site. Content is more accessible and clearer to read. Much improved organization. The main suggestion is using the Feature Story section as the hero banner, with sliders, rather than Book Tour. There could be "Book Tour" lower in the page, or perhaps as a menu item. Regarding the menu, We would suggest re-organizing some of the top level items: are articles and videos that important? Stick to Exhibits, Tours, Gift Shop, About, and News (combine articles/videos). Very clear use of sectioning. Overall, you have good consistency. For greater cohesion, make the Phone version more similar in content and styling as the tablet/web versions.
Assignment 2: Visual Design & Prototype Design
Considering the feedback of my classmates and professors, I chose to restructure the hero banner and CTA on the homepage for my redesign. I made this change because I thought that it was better to introduce the museum a bit before prompting them to book a tour immediate as the first thing they see when they enter the site.
Color Scheme
Prototypes
Synopsis of Classmate and Professor Feedback 2
The feedback I received from classmates and the Professor was that they liked the monochromatic color scheme, there was a much clearer visual hierarchy of webpage elements, and that the website flow has been greatly improved overall. However, the overall design looks a bit bland. There needs to be another accent color to make CTAs and other visual elements 'pop' a bit more. Also, the black gradients on some of the webpage elements don't quite flow as well together. Perhaps, a darker color on the same monochromatic scale would create a more cohesive digital experience.
Final Designs
Feedback and Next Steps
The overall feedback I received from the class was positive. The goal of the course was to apply the principles of web design to redesign the website of a nonprofit organization improving their website design. I examined the web elements of the Piper Aviation Museum's website and took note of what could be changed about it to create a more cohesive and useful experience for visitors online. I then created sketches, wireframes, prototypes, and mockups to improve the over experience of people visiting the site. For assignments 1 and 2, I received a grade of 95% and 97%, respectively. I've tried reaching out to the Piper Aviation Museum a few times to try to pitch my designs but to no avail. Overall, I'd say that this experience has been awe-inspriring. As one of my first design projects, I really did a good job of incorporating feedback into my designs and creating a very clear visual hierarchy of webpage elements so that the overall flow of the website is cohesive and practical.
