Karen Peterson Dancers
Website redesign for non-profit arts organization
Project Duration: Four Weeks, 80 hours | Role: Solo UX/UI Designer | Tools: Figma, Whimsical
Background
Karen Peterson Dancers (KPD) is a non-profit dance organization based in South Florida. KPD is a physically integrated company and features choreography performed by dancers both with and without disabilities. The company has been in operation for over 30 years and is a fixture of the local cultural ecosystem.
For this project, I worked with KPD to help redesign their existing website.
Challenge
KPD’s current website has a number of issues. Its navigation is confusing and various items are mislabeled. Its visual layout is also inconsistent and hindered by an oversized header and large sections of small text that are difficult to read. In general, the user experience is poor and there is room for a great deal of improvement.
KPD has a long history of providing groundbreaking work, however its website does not accurately reflect the quality or professional nature of the company’s work. At best, the current incarnation of the KPD website does nothing to attract any new potential interested patrons.
Goals
The principal goal of this project was to redesign the website and improve its user experience, with a specific focus on:
Reorganizing structure and layout to improve navigation and core functions, including ticket purchase.
Creating a more cohesive and consistent visual identity.
Adjusting the current website’s copy and content to align with current standards.
Research
The research stage of the redesign consisted of various methods that served to inform design choices made later in the process. A research plan was created to outline high-level goals and methodologies, and as a first step, a review of KPD’s current website was conducted to ascertain its key features and content, potential pain points and overall structure.
A competitor analysis was also performed. Websites for similar arts organizations were reviewed for specific UX and UI patterns and best practices.
Stakeholder Interview
A stakeholder interview was also conducted. KPD acknowledged that it had received poor feedback in the past about its website from concertgoers and supporters, and users had communicated that it was difficult to find what they needed. A review of the website was performed via Zoom and various priority items related to content, pain points and visual style were agreed on. Following the interview, a list of potential changes was compiled, which later developed into a feature roadmap.
Usability Testing
In order to uncover pain points and gain insight around what users expected to see when visiting the KPD site, several usability tests were run. Participants were asked to share their screens, complete a series of tasks and provide overall impressions.
This testing resulted in several key takeaways :
Participants were unanimously intrigued by the company’s inclusive nature, though it was not always clear to them exactly what the company’s purpose was.
Several participants wanted to see more videos to help them form a better understanding of the company’s work.
All participants experienced or commented on navigation issues within the site.
One participant who had less experience attending live or virtual performances struggled to understand the nature and mission of the company.
“I would love it if the navigation was just really straightforward, like home, about, upcoming performances, video, media. It would be much clearer to navigate.”
“I have some questions about who the owner is or who the founder is, more about dancers. I can see that there's information here, but I guess I'm finding it a little difficult to parse, how it's written.”
Sitemap
At this point, research insights provided a strong foundation with which to start mapping out the redesigned site’s information architecture. Because of the navigation issues on KPD’s existing website, particular attention was paid to simplifying the sitemap, and making it more intuitive and logical for users. View the full sitemap on Whimsical here.
Changes to the website’s organization included the removal of certain items from the navigation bar, the consolidation of various existing sections into larger, more comprehensive areas, and the relocation of content to make the site layout more intuitive and logical. Though relatively simple in structure, the sitemap underwent several iterations throughout the design process as adjustments were made to the website based on user feedback.
User Flow
A user flow was created to visualize and empathize with the journey a potentially interested ticket buyer might take when visiting the website. Given feedback obtained during usability testing, it seemed clear that users wanted more information about the company and it’s work before deciding to buy a ticket, and this insight was incorporated into the user flow. View on Whimsical here.
Sketches and Wireframes
The visual design process began with low fidelity sketches of the Homepage and Upcoming Performance page. Sketches allowed me to quickly visualize a number of different layouts, and helped establish a visual hierarchy. I knew that after the Homepage hero image, a section displaying upcoming performances would be necessary, as viewing information about upcoming performances and purchasing tickets was the most important task that users traveling to the website would need to accomplish. This is reflected in my initial sketches.
Initial layout experiments were then iterated on in Whimsical as mid-fidelity wireframes. These helped establish the layout for both desktop and mobile devices, and provided an opportunity to experiment with various types of section arrangements. Finally, responsive desktop and mobile wireframes were created in Figma for the Homepage, Upcoming Performances, and History and Mission pages. By this point, the layout had been iterated on several times and for the most part was solidified.
UI Kit and Logo
To build the UI kit, typographic and color schemes were established, and components such as grids, buttons, navigation bars and links were created. Various cards and subsections of the homepage were also developed, along with a new logo for the company.
At KPD’s request, their main red brand color was retained. However this bold color was reserved for CTA buttons and other areas of visual interest, and I introduced various additional shades of red and grey, as well as a complementary secondary brand color. A dark background was also chosen to provide strong contrast between sections.
High Fidelity Prototype
Working off the UI kit and available photos, a high fidelity version of the homepage was created in Figma. Various draft versions were considered before a final layout was decided on. The new homepage design features large color photographs of both able-bodied and disabled dancers, a quote section emphasizing the positive media coverage KPD has received over the years, and clearly labeled sections linking to other important areas of the site. Ultimately, responsive designs were created for the Homepage, Upcoming Performances, About, Virtual 30 and Gallery pages.
Desktop and mobile versions of the redesigned homepage.
Additional pages of the redesigned website.
Upcoming KPD performances.
Usability Testing and Design Revisions
At this point, a second round of usability testing was performed on the redesigned site with a new set of participants. Using a Figma prototype, participants were again asked to provide their impressions and complete a series of navigation-based tasks. The results of this testing were then compiled in an affinity map.
Participants praised the visual design of the site and successfully completed the navigation tasks. Overall, the redesigned site proved to be much easier to navigate, and gave users a better understanding of the company and it’s mission. However, several issues emerged from the testing, and revisions to the design were implemented in order to provide users with a better understanding of the available content. Changes included the addition of labels to certain areas of the homepage and renaming the “Media” navigation bar item to “Gallery” to avoid confusion.
Conclusion
Ultimately, a good deal of work remains in order to build out the remaining pages of the site. Additional sections and further revisions will be required. However, the research and UI components already in place should go a long way to making this process as smooth as possible.
This website redesign project emphasized the importance of creating a positive initial impression on users, and projecting a feeling of authenticity and professionalism. In particular when designing for an arts organization, it is important to give users a sense of what to expect should they attend a performance, viewing, etc. I learned a great deal about how this can be accomplished by communicating an arts company’s mission beyond a written mission statement, by effectively using the visual language toolkit of color, typography, layout and photography.