I've designed countless websites over the years. In 2001 I taught myself HTML and CSS so I could create my own website, and since then I've been thinking about look, feel, and function in web design.
Here's the detailed story of a recent project to redesign the website for the singing group, Mak'hela
Purpose and Context
Mak'hela is a non-profit organization and chorus based in Western Massachusetts. Like many performing groups, COVID took a toll on their membership.
They were looking to modernize their website so that it could attract new members and possible donors, and they were looking to simplify it so that they could make small content changes on their own.
Project Description
As a solo designer on this project, I followed a process driven by the needs of my client:
-
Existing website analysis
-
Competitive analysis
-
Client meeting
-
Home page and site map draft
-
Client feedback
-
Site draft
-
Client feedback
-
Collaboration to complete functional features (online donations and contact forms)
-
Site launch
-
Client meeting/Tutorial
Background Research
Issues with old website:
I spent a few hours looking through Mak'hela's existing website to see how they were using it, what was intuitive for me, and what functions could be streamlined. I came up with the following list of observations:
-
Old website had far too much text
-
Main functions they wanted to emphasize (donating and contact) were hard to find and access
-
A lot of content was archival information - more for singers than prospective members or concert-goers
-
Colors were drab, not modern looking
-
Selling points of the choir were hidden
My recommendations:
-
Simplify navigation
-
Reduce the amount of information on each page
-
Provide redundancy with links so there are many ways to get to the most important places
-
Update design with bright colors
-
Create a Google Drive to archive repertoire and other information for members rather than using the website for this purpose
Role: UX Researcher & Designer
Project Scale:
6 weeks from initial meeting to site launch
Primary Stakeholders:
Members of Mak'hela and the community they serve
Tools Used:
Figma
Gimp
Wix
Team:
Project Lead, Designer, Researcher: Mara Levi
Client Meeting
Process:
Our biggest meeting was a 2-hour conversation between me and 5 members of the Mak'hela choir and board. We discussed their pain points with the existing website, their goals for the group overall and how the website could help them reach those goals, and a time frame and process for delivery.
Client Goals:
-
Attract new members, possibly younger ones who are more tech savvy
-
Provide information to possible funders and a means for donating for individual donors
-
Eventual capacity to make site edits independently (without hiring someone)
Pain Points:
-
Many interested members are older, need greater ease of navigation on the site
-
Tired of the look of the existing site
-
No institutional memory: when the person who edited the site left the group, no one knew how to access or edit the site
Process:
-
I send multiple ideas for a new design, the group gives feedback until we have an agreed-upon look and feel
-
I send a draft of a site map for the group to OK or tweak
-
Group sends me copy for each page and photos they'd like to include
-
Continue iterating until consensus is reached for look and feel
-
I build a draft website
-
Group views, makes recommendations
-
I edit the draft until consensus is reached that the site looks and functions as it should
-
Site launch
Website Development
Following our in-depth conversations I suggested to the clients that they would be happier using Wix as their hosting platform rather than Wordpress. Wix is much easier to navigate for people who aren't professional developers, so I would be able to develop a site they liked and then teach them how to update it in the future.
I built a home page based on our site map and shared it with the group. Based on their feedback I updated the main header until they were all happy with it. I took the colors from the main header and used them as the main links at the foot of each page on the site.
I asked the group to navigate through the draft and to share notes about things that didn't look or read the way they wanted. Based on their feedback I implemented further changes and updates to the text and layout of the site.
Using the home page as a template I continued to work on the other pages until there was a functional draft I could share.
This process took about 3 weeks to complete including feedback from members and my edits.
I worked with the group's treasurer to connect their bank account and email address to the site so that they can accept small donations as well as messages directly from the website.
Tutorial
The final step in our process allowed me to flex my teacher muscles for a moment. We met for a two-hour tutorial session in which I walked several people in the group through the steps to make minor changes in their website. I gave each member a link to this document (which I also put in their newly-created Google Drive):
