Community Center for the Arts
A design exercise to rebrand a nonprofit’s website and create a working prototype on Adobe XD.
About the Project
The Community Center for the Arts is a small music school located in downtown Urbana, Illinois. Their website has obviously not been updated in years, not only in content but design. In addition, the user flow was nonexistant; it was difficult to discover information about classes, registration, and donations because of the excessive number of menu items and pages.
Design Goals
This website needed a redesign for both branding and user flow. My goal was to redo the branding to something more artistic, bold, and unique. I also wanted to make sure users would be easily drawn into the site to learn more about the community center for the arts, and be able to easily learn about classes and be easily guided through registration.
Benchmark analysis
Just from my own experience exploring the site, I found the navigation menu overwhelming, and found it frustrating that a lot of information was broken between a multitude of similar looking pages that didn’t seem to connect to each other in a consistent way. Additionally, there was often repeating or conflicting information.
Studying other similar websites gave me inspiration for how to organize this one. A bold header image was almost always used, and interactive buttons, graphics, or images led the user further into the site. Menus included more broad categories such as “what we offer” or “our programs.” Dropdown menus were a good way to organize excess information.
The site also had a noticable lack of any branding - most fonts were default, and the primary color scheme was also inconsistent. There was nothing unique about this site.
Through it all, I could tell that this organization had a lot to offer, and seemed like a genuinely welcoming community center. I wanted their site to reflect this.
Information architecture
I asked users to navigate through a few tasks on the old C4A website. Through mapping their experience, I found that one of the most frustrating processes was registration. There wasn’t a page dedicated to it, and links to informataion about it were hidden on various pages in different sections.
From there, I also sorted the pages in the form of digital cards to create a more friendly and accessible menu layout.
Wireframes and moodboard
I knew color would be important. I modified the primary color palette to include a contrast of deep blue with glowing golds and reds, almost reminiscent of brass and wood intruments on the magical lighting of a stage. I wanted it to remind the user of music and have a design that would appear fun to kids but also serious for adults.
I started designing my pages with a simple wireframe, using more interactive elements and very visual buttons. I made sure to keep the registration button visible on all pages.
All that was left for my final site was to apply the moodboard to my wireframe.
Final Website
Final Mobile Site
