Sonia Plumb Dance Company

Web Design • 2020

Sonia Plumb
Dance Company

Summary

Design and develop a new website for Sonia Plumb Dance Company to showcase their programs and activities.

You can check the website here: https://soniaplumbdance.com/home

My Role

User Research

Weekly Meeting

Branding

Wireframing

Prototyping

Developing

Tools

Figma

WordPress

HTML/CSS

Wix

Photoshop

Client

Sonia Plumb Dance Company

Time

2020

01

Introduction

Currently I am working with Sonia Plumb Dance Company (SPDC), designing and developing a brand new website for the non-profit organisation. The work is still in progress, but you can see the current developments on this page.

The current website of SPDC on Wix is, in Sonia’s own words, “clunky”. As the organisation is expecting to grow significantly, a careful overhaul and a fresh branding are desired. SPDC also wants to build their new website on WordPress.

I was commissioned by Sonia Plumb to organise the structure of SPDC’s website, to design a new digital branding and finally to develop an easy-to-maintain system on WordPress.

Goals

A clear hierarchy

To better showcase SPDC's services of different kinds

An asset and content manage system

To build a system to manage the website's content

A new visual branding

To create a refreshing digital identity for the NPO

An easy-to-maintain development

To develop the new website on WordPress considering the future maintenance

02

Research

Qualitative interviews

Sitemap

Competitor analysis

User journey

Due to the challenge brought by Covid-19 and public funding, we are trying our best to process the project at a reasonable pace. At the moment we are holding one meeting per week to discuss the design and development.

In the first 3 meetings, I held interviews with the shareholder to acquire a general landscape of SPDC: their mission, services, goals and current challenges. I proposed and presented my solutions to the shareholder in the following meetings for their feedback, to make sure my design fulfils their requirements.

Problems with the current website

I interviewed the shareholder of this project at SPDC who explained to me the pain points that they came while managing the current website on Wix. They had the idea of transferring the website to WordPress and building a new digital identity for the website, but were not sure how.

The unclear structure of the website increases the difficulty of maintenance. Moreover it confuses first time visitors as they lose track easily in a sea of unfamiliar information. From the interview, I realised that there are many types of services that SPDC offers, but the current design of the website fails to deliver and showcase the full variety of their business.

The current style of their website does not depict the image of SPDC. Going through their main projects with their founder, Sonia Plumb, inspired me to visualise a creative dance studio which reflects on community, society and humanity through their performances. But the current design seems stale for this image.

Together with the shareholder, I proposed the goals of the new website design:
  • A clear sitemap which showcases all their services
  • A new digital identity with a fresh and modern visual language

↑ Current front page of SPDC

Planning for the project

We scheduled the regular weekly meetings and sorted out what I was expected to deliver in the coming weeks.

↑ Scope of Work

A new hierarchy that defines SPDC

Together with the shareholder, I organised the structure of the website according to SPDC’s services.

Their services fall into one of four categories: Stage, Community, Studio and Classroom. Each category has its own focus and mission. The main category, Stage performance is the main service which is a complete dance project, aiming at providing an unforgettable experience in a theatre; while Classroom projects are integrated in the curriculum of local schools, aiming at enriching the education system.

The main type, Stage, is supported by other services: for instance, the concept of a Stage performance could be explained and discussed in a lecture in Community. A user who is not certain to book a ticket could benefit from the supporting services before he or she decides.

↑ Sitemap: different services’ focuses and missions provide a guideline for the new design

↑ User flow: attract the undecided visitors with supporting services

Finding the right digital identity

I discussed with the stakeholder about the style and the image of the organisation online. We analysed some competitors’ digital presence and concluded what we can learn from them and what we should avoid.

The media depot SPDC shares with me on Wix serves as a moodboard for me in finding the proper image for them. ‘Modern’, ‘simple’ and ‘bright’ are the keywords we both agreed on.

↑ Competitor analysis: learning and developing our strategies

↑ Typography study: playful headings and easy-to-read paragraphs

03

Wireframe

Wireframing for SPDC’s new website provides a chance to examine the ideas we came up with after our design research. The main tasks were to test the front page, to propose a template for different events and to design a system that could keep visitors staying longer.

Check out the rapid prototype in Figma

↑ Click the top-right button to enter full screen

Front page: showcasing the work

A theatre-view carousel of eye-catching images attracts visitors with latest news or shows from SPDC. Scrolling down, a brief introduction of the NPO would help visitor understand the work they are doing. Different categories of services provide portals to a collection of related events in the following section, with the main service, Stage, offering four recent performances. The front page also encourages visitor to support the organisation and follow it across social media.

Event page: a clean design that is easy to maintain

The event page is built in a structured template: with basic information highlighted at the top, media organised as a block, and suggested pages which encourage visitors to stay longer on the site.

The benefits of such structure include a friendly browsing experience for the visitor and an easy system to maintain for the organisation.

04

Design

Check out the HiFi in Figma

↑ Click the top-right button to enter full screen

05

This Project is Still in Progress

Next step
  • Design the page for Studio course
  • Design the About and Support page
  • Develop in WordPress

Wanna say hi?

If you would like to work with me, or just grab a coffee together, feel free to drop me a line: [email protected]