Website Redesign Process for Dance Theater Company
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.
RejoiceDiasporaDance.com < New Website
Rejoice Website Goals:
— centralize information
— archive repertory
— 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
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
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.
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!
