Ethos Audio
Responsive Website Design
Timeline: February 2023 - March 2023
Client: Ethos Audio
Skills: UX Research, UX Design, UI Design, Prototyping, User Testing.
My Role: Product Designer
Background:
Ethos Audio is an event services and audio-visual provider in Portland, OR. Currently, all of Ethos’ business is conducted over Instagram. This has worked for them in the past, but as the company grows they needed a way to streamline their booking process. They also wanted a professional online presence while they try to expand to weddings and corporate events in addition to concerts and festival stages.
The Problem
Ethos Audio needed a more streamlined way for clients to book their services. They also needed a professional looking web presence to impress wedding and corporate event planners as they attempt to expand to those industries.
Users need a streamlined, one-stop-shop for event service rentals that will work with their individual event needs.
The Solution
Design a sleek, professional website for potential clients to quickly and easily book services or schedule an event consultation.
Design a website that matches user expectations around booking services and gear for events.
Deepening my understanding
Competitive Analysis:
I began by researching Ethos’ competition to understand what was and wasn’t working on their websites.
Ethos named two providers (Tiaga, Specter) as direct competitors and one provider (Pro Sound & Lighting) as an indirect competitor.
Tiaga Sound & Lighting
Specter Audio
Pro Sound & Lighting
Key Findings:
Site layout varies greatly depending on the services offered by each company.
Contact forms feature prominently in each site, and should be concise and easy to fill out.
All sites had full gear catalogs, both at-a-glance and for more detailed viewing.
Only one competitor had a responsive site design. A mobile version would make Ethos stand out and help users on the go check out their services or contact them.
User interviews
To further understand the needs of potential clients for Ethos, I reached out to old friends from the events industry. Limited time made a large sample challenging, so I aimed for diversity with three participants.
A punk and metal show promoter in Portland.
An EDM and club promoter in LA.
A former event coordinator for several nonprofits.
Interview Goals:
Determine how people seek out these services when planning an event.
Understand what people prioritize when looking for these services (equipment rental, on-site technicians, price, etc.).
Discover any pain-points within the current booking/renting process.
Key Findings:
Participants valued traits like professionalism and good communication when choosing a provider. (3/3 ppt).
Clients often found providers through word of mouth and personal connections. Websites mainly confirmed recommendations and showcased additional services. (3/3 ppt).
The interviews made one thing clear: potential clients for Ethos are not discovering Ethos on the internet, but rather through their networks and peers.
This means that the focus of my designs needed to be ease-of-use and quick access to the contact form / available services, as opposed to the website convincing potential clients to work with Ethos.
The difference is subtle, but very important.
User persona
To keep me on track, I distilled my research findings into a cohesive reference point to use throughout my design in the form of Clara, a local event promoter in need of a new gear provier.
Converting needs into designs
Task Flows:
After some brainstorming, I outlined three main task flows for common client actions on the site. These will guide my designs and serve as a usability test later in the process.
Clients being able to send detailed consultation requests to Ethos via their contact form was top priority, with the other two tasks serving to test key features that Ethos requested.
These features were a merch shop and a catalog to book basic service packages for smaller events.
Layout Sketches
I sketched a basic "checkout" flow to help develop the layout concept.
Digital Wireframes:
These expanded on my sketches and required several iterations with my design mentor to make sure the product aligned with persona and client needs and was backed by research.
Highlighting the homepage (left) and contact form (bottom)
Designing in high fidelity
Other than the logo and color palette, Ethos had little input on the visual design and left it up to me to visualize their brand identity.
UI Elements
Hifi Mockups
I tweaked my initial sketches based on group and mentor feedback, aiming for a more modern design. Regular check-ins with the client ensured everything matched their vision.
What do the users think?
Success Metrics
Ensure users can complete the tasks with minimal errors. (1-2 errors per task)
Ensure users can navigate the site easily and find what they need quickly. (under 5 minutes per task)
Ensure users can easily contact Ethos Audio with their event needs. (Contact task flow completed)
Participants performed three tasks to determine the usability of the prototype.
Reserving a basic service package for select dates.
Adding a hat from the merch shop to the shopping cart along with the service package and completing the checkout process.
Requesting an event consultation via the Contact page.
The Likes
3/3 participants completed each task in under 2 minutes.
3/3 completed tasks successfully with minimal errors.
3/3 thought the site UI looked great and would consider working with Ethos based on their web presence.
The Dislikes
2/3 participants wanted more clarification on wether they can customize event packages after ordering.
2/3 participants thought the body text on the homepage was too small.
All in all, the revisions were minor and users were very happy with look and usability of the product. With the only revisions being:
Clarifying copy text on confirmation screens (below)
Increasing body font on homepage
Priority Revisions
Original
Revised
Conclusion
Next, I'll tweak the designs based on feedback and run more usability tests with a bigger group. Once everything looks good, I'll hand off the designs to Ethos, and we'll kick off the development phase. I’m looking forward to collaborating with their chosen developer on this!
What I’m proud of:
I felt that the client and I worked quite well together, and I was able to help bring about their vision for the new site.
I feel that, despite a small pool, I was able to glean some important insight from my user research.
What I’d do differently:
I would spend more time getting a wider pool of interviewees during my research. The three i did interview gave me valuable insights but a more diverse set of perspectives is always beneficial.