UX Case Study (Concept)

The Wedding Clef

View Prototype

Project Overview

Scope

Fully design a Wedding Band and DJ listing website and application

Tools

Figma

Miro

Roles

UX Designer

UX Researcher

Wireframing

Prototyping

Usability Tester

About

Finding the appropriate musical entertainment for a wedding can be a difficult task. The Wedding Clef is a website and application that serves to streamline the wedding-band searching process. All musical acts are screened and accepted by the service and categorized within Wedding Clef’s filtering system, allowing users to find the right kind of musical entertainment for their wedding.

The Challenge

  • Design an app and website that makes finding the right kind of musical entertainment for a wedding simple.
  • Design a filtering system that allows users to find musical acts via genre, style, price and location.
  • Design a communication system within the application that streamlines communication between user and artist, giving both parties the ability to express their needs and wants as an audience member and a performer.

Research

Market Research

  • Average wedding in the US cost $28,000.
  • Prices for musical entertainment range from $600 to up to $20,000.
    • Wedding bands average payment is ~$4,500 per event.
    • Wedding DJs average payment is ~$1000 per event.
  • 89% of wedding planning is done online
    • with 43% done on mobile.
  • Almost half spend over their anticipated budget.

The Knot’s 2021 “Real Wedding Survey”

Competitive Analysis

Interviews, Empathy Map & User Persona

I interviewed couples both who have already had their wedding and those who were about to have their wedding. I was able to create an empathy map from the data received from these interviews, and point out the user's needs, wants, frustrations, pain points & goals with hiring wedding bands and musical wedding vendors.

Empathy Map

User Persona

Ideation

Brainstorming

During my competitive audit, I appreciated the flow and layout of the the WeddingWire and TheKnot services.  Both clearly drove users through their various wedding products and services, along with their prices and a simple al a carte ordering feature that bundled all their services together. I used these two wedding party services as a base for my designs.

Sitemap

The information architecture of The Wedding Clef is pretty simple. Once the user creates an account, all they do is look at a user-filtered list of artists and communicate with them via email, phone or video chat.

Wireframes

Paper Wireframes

From my interviews, empathy map, user persona & sitemap, I designed the initial paper wireframes of the desktop site.

Lobby

Artist Listing

Sign Up/Log In Overlay

Lo-Fidelity Wireframes

From the paper wireframes I designed the first digital wireframes of the website including it's responsive styles in tablet and mobile formats.

Lobby

Artist Listing

Sign Up/Log In Overlay

Usability Study

I tested my first iteration of my prototype with my testing participants. All users had 100% accuracy in finishing their user goals, but their flow through the site was awkward and needed improvement.

Most of my changes to the prototype included improvements in user flow.

Transitionary pages, such as the Log In and Create Account needed better navigation and "return" buttons. Also I improved the footer, giving links leading to each important page in the design. Once the user flow was confronted, users were able to navigate around the website and app with ease.

Design Process

Branding & UI

Being that this was a concept, The Wedding Clef was a completely new brand and company. I had to create and design the entire logo and find its main brand color.  I sketched some simple ideas of a logo -I particularly enjoyed the idea of a wedding church or barn- and concluded with  the colors white and light blue.

Now that the logo and main brand color were chosen, I designed the UI kit to help with the stylization of the design.

UI Kit

Hi-Fidelity UI

From my initial wireframes and the addition of the assets and styles from my UI kit, I was able to start bringing to life the final design for The Wedding Clef.

Lobby

Artist Listing

Sign Up/Log In Overlay
about me.
About me image

Debrief

Amidst a decade of nation-wide performance and touring in rock bands, I incorporate a computer’s keyboard to my collection of musical keyboards. With hands-on involvement in engaging audiences and bringing novel experiences to the stage, I bring an intense work ethic and an unsatiating thirst to improve and impress in web and product design.

Design

I design beautiful and useful digital products that guides the users intention and attention through your product and for your company. The contemporary business needs digital products to solve active problems, and a good website to promote and sell that product. I will make sure you have both.  Through Figma, I provide wireframes to prototypes on any level of fidelity, and can accommodate any quick adjustments requested before an approved development.

Develop

I build websites in Webflow where I can create fully responsive and customized websites, specialized for the needs of your user, viewer and client.  Plus, all Webflow sites have the ability for you and your team to edit content quickly and easily.