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.
serve as a connection point for potential collaborators, funders, volunteers, etc
display credibility
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
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
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.
Designing in Webflow
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.
