Website Redesign Process for Rejoice! Diaspora Dance Theater

Mockups of the Rejoice Diaspora dance theater website on mobile and desktop

Background

Rejoice! Diaspora Dance Theater is an 8 year old non-profit dance theater company that has gown exponentially. The existing website was patched together over time as new programs and aspects of the company developed. The site was created originally by the company’s ambitious founder, without design or development know-how, using Weebly’s free platform. Though it functioned well enough for its time, the website no longer accurately represented Rejoice’s aesthetic or professionalism.

Rejoice Website Goals:
‍

centralize information
archive repertory
serve as a connection point for potential collaborators, funders, volunteers, etc

Objective

Redesign the existing company website and utilize a new CMS to provide a better user experience via more distilled content and clearer information architecture. Also, enhance the look and feel to better match the quality of the company’s work (and better compete with others in the industry).

Process

Content Audit

Created a high-level document outlining the sections and content of each page on the existing website
Duplicated that document, this time filling in the sections with the actual copy from the existing site
Edited the copy, removing redundancy, and designing information hierarchy

Competitor Research & Analysis

Identified competitors/peers in the industry with model websites and similar breadth of programming
Created a FigJam board to dump screen shots of the competitor websites
Analyzed the UI and IA patterns, noting intuitive, useful and pleasing patterns

Repository of research screenshots and analysis

Research Repository & Analysis

Information Architecture

Combining information and insights from both the content audit and the competitor analysis enabled me to design a first iteration site map, honing in on the information architecture of the website.

Design

Designed lo-fi wireframes for the new website, focusing on navigation, layout, and information architecture
Presented the lo-fi wireframes to stakeholders for feedback and consensus to move forward
Designed hi-fi mockups and a clickable prototype of the new website. The prototype included as much real copy and images as possible.
Submitted the hi-fi prototype for feedback
Applied feedback, mostly making copy and image edits

screenshot of Figma high fidelity prototype

High fidelity Figma prototype

Development

Built version 1 using Web Flow. I chose Webflow because of the granular control it provides over the website design, staying closer to code than other no-code platforms. It also is fast and doesn’t require any dependencies for this company site. In addition, Webflow provides a great interface for creating database collections and binding those to UI elements. This allows me to make sections of the website easily editable by editors with no development skills.
Flexbox CSS was employed often for easy responsiveness, as well as device relative values, and media queries.
UI components were made with override fields to facilitate quicker development.Submitted a video presentation and click through of version 1 for feedback from stakeholders.Received and applied feedback, largely regarding copy and images.
Submitted a video presentation and click through of version 1 for feedback from stakeholders.
Received and applied feedback, largely regarding copy and images.

Screenshot of the webflow user interface

Designing in Webflow

Screenshot of creating a new CMS collection with relevant fields

Designing CMS collections and their respective fields

Publishing

Finalized details, including: moving the company’s custom domain to the new website, adding google captcha and setting up contact form behavior, enhancing SEO with complete metadata, PayPal donation buttons, and branded favicon creation.
Published the website.

Visit RejoiceDiasporaDance.com to see their amazing work!