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
02
Research
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?