My Role
UX Designer, UX Researcher
Timeline
Oct 2021 - Feb 2022
The Challenge
A music studio that outgrew its old site
Electric Air Studios (“EAS”) is a music studio based in Miami, FL. After a successful first three years, EAS sought to expand its services in new directions. In the midst of this transition, the studio’s Founder recognized that the studio’s site needed to be overhauled. For starters, the site was causing frustration and confusion for potential clients. On top of that, the studio needed a design that could better communicate the studio’s new service offerings, as well as the Founder’s vision for the studio’s brand as a hub for Miami’s music and culture scene.
The Solution
Synthesize the needs of users and stakeholders
I redesigned EAS’s web and mobile sites to help the studio’s potential clients find important information and encourage them to contact the studio. Wherever possible, I used design solutions that serve the needs of both the users and the studio’s leadership.
Quick Access to Key Information
Lists of equipment and specs are organized into sections and labeled for easy navigation.
Services and events appear in scrollable, compact grids.
Each Page Guides the Prospective Client
Prominent call to action buttons continually direct users to the Contact page.
Prominent social media links, where users can access samples of the studio’s work.
Adaptability for Future Changes
Backgrounds can be used to promote new equipment, services, or events.
Layout lets you adjust the content of each page without disrupting the visibility of calls to action or social media links.
Defining Stakeholder Needs
Make it new and flexible, but still recognizable
I set up a series of phone and video meetings with the studio’s Founder and Creative Director. My goal was to better understand business priorities for the site, as well as define any limitations in the design. Some of the main stakeholder needs I was able to define were:
Logo. The studio’s original logo cannot be altered and must remain a part of the brand identity.
Flexibility. No booking through the site. Instead, the site should encourage users to get in contact with EAS staff to discuss working together. The design should also take into account that the studio might want to add new services or merchandise in the future.
Services. The updated site should make visitors aware of the full range of services the studio provides—especially their new videography and event-hosting services.
Social Media. The site should work synergistically with the studio’s social media pages, which the studio uses to put out regular samples of its work.
Initial Interviews & Testing
Interviewees struggled with navigation and finding important details
In order to identify pain points in the old site’s design and better understand user needs, I set up five interviews and structured usability tests.
Thanks to close collaboration from EAS, I connected with interviewees that represented the studio’s target clients:
All were young adult creatives.
All were in their mid 20’s to early 30’s.
Three were career musicians from Miami, with previous recording studio experience.
User Personas
The career musician & the aspiring amateur
After analyzing the data I gathered from my initial interviewees, I created two user personas to represent EAS’s client base.
Analyzing Test Data
I discovered pain points dealing with content, navigation, and information architecture
After conducting the user tests, I used an affinity diagram to organize data according to the topics that were most frequently brought up. From that diagram, I was able to identify three major areas of pain points and insights.
1. Access to Important Information
Most users prioritized learning about the studio’s layout and equipment, but had difficulty finding it at the bottom of the Studio page.
Users were frustrated by being forced to leave the site to access the information on PDF documents.
Two users (both career musical artists) said it was important to find samples of the studio’s work, which they usually find on social media.
2. Navigation
All users experienced confusion when trying to navigate the site using the top navigation bar and bottom menu.
Most users commented on the top navigation bar changing between different pages.
Other users commented on the bottom menu not matching the options available in the top navigation bar.
3. EAS Live Page
Users were confused by the purpose of the EAS Live page, which the studio intended as a platform for streaming live mini-concerts.
Some users confused the page with other types of pages they’re used to seeing, like Events or Equipment pages.
Domain Research
Other sites excelled at visuals, but their information was not organized well
In collaboration with EAS’s leadership, I selected and analyzed three samples of music studio sites from which to draw inspiration for EAS’s new design.
Design Goals
Two main categories
Based on the user and stakeholder data I gathered, I arrived at two main categories of goals that I hoped to achieve with my design. Moving forward, I made a point of referring back to these goals as a way of keeping the project on track towards success.
Improve Information Architecture
Remove pain points by reorganizing the site and the layout of each page. Prevent both the pros and the amateurs from becoming stuck or confused as they explore the site.
Balance Studio & User Needs
Craft a style that matches the studio’s vision; promote their new services; and make it adaptable. Meanwhile, prioritize access to the info users need to make informed decisions as clients.
Design Process Overview
Key points: iteration, testing, and collaboration
Early Sketches. I experimented with several ideas on sketch paper for page layouts and site mapping. During this process, I kept circling back to the data I gathered. After narrowing down my ideas, I moved on to low-fidelity wireframes.
Progress. I continually iterated on the design using data from new user tests, as well as feedback from the studio. Since style and branding were priorities, I made sure to keep the studio looped in when moving to higher-fidelity versions.
Final Design. By collaborating closely with the studio, I continually made sure they were fully satisfied with the site’s style during the design process. I also made sure that the final iteration successfully addressed the pain points and needs that the initial testing revealed.
Design Challenge #1
Displaying long lists of equipment on both desktop and mobile versions
Both the studio and the users indicated that it’s very important for the site to provide details about the studio’s equipment. For EAS, this consisted of long lists microphones, instruments, and other music gear. Testing showed that users did not want to have to open a separate PDF document to view this information, and generally preferred having it displayed on the site itself. At the same time, both the studio and the users wanted simple, uncluttered pages.
This led to the question, “How might I present large amounts of information in a way that avoids clutter and confusion?” I tackled this question by using low-fidelity wireframes to experiment with different ideas.
Idea # 1
Break down lists into subsections. Clicking subsections opens overlay lists.
Downside: long overlay lists would take up too much space to work well on a mobile screen.
Idea # 2
Present main lists as individual, scrollable windows.
Downside: multiple vertical-scrolling elements would not work well on a mobile screen either.
Idea # 3
Present full lists. Use font size and spacing to avoid visual clutter.
Downside: too much scrolling when trying to view items near the bottom of the page.
Solution: tackling the shortcomings of my experimental ideas
My first two ideas saved space and avoided excessive scrolling. However, they created other problems when thinking about the mobile version of the site. On the other hand, my third idea was the best option for a mobile screen, but did not sufficiently reduce long periods of scrolling. Eventually, I arrived at a design solution that addressed both mobile responsiveness and scrolling.
Different Lists, Shared Space. I used spacing and typography to organize each list into neat, legible subsections. Users can switch between lists by using the underlined tab headings. This drastically cuts down on scrolling and limits the amount of steps needed to view information.
Mobile Friendly. An additional button in the mobile Gear page pulls up the lists. The subsections in each list become stacked and fit the screen to maximize legibility.
Design Challenge #2
Showcasing the studio’s services and highlighting their new offerings
Another big priority for the studio was communicating their full range of services to site visitors. In particular, the studio wanted to find ways to draw attention to their new services, such as videography and event-hosting.
The Studio’s Design. During initial testing, the Services page had no actual content. The studio corrected this issue soon thereafter. Nonetheless, I still thought that the information could be presented in a better way.
Although my initial ideas seemed to work well in low-fidelity wireframes, I wasn’t fully satisfied when I implemented them in higher-fidelity versions. New rounds of user testing confirmed my suspicion: users liked the use of background imagery, but felt underwhelmed by too much text.
Idea # 1
A scrollable grid with outlined cards for each service. Each card contains the name of the service and description.
Downsides: Underwhelming. Too much text begins to feel like a chore for users.
Idea # 2
Smaller, expandable cards for each service. Users get an overview and can expand on each service as needed.
Downsides: Adds more steps to the user flow. Still limited to just text.
Solution: leaning on visuals to say more, in less time
The responses I got from new testing indicated to me that shifting the focus towards images, rather than simply improving the look of text blocks, would be the key to the Services page. Subsequent user testing showed significant improvement in users’ reactions to the page.
The Result. Building off my original ideas, I added images to each card to represent each service. As planned, I also used the background to highlight the studio’s videography services.
Design Challenge #3
Creating a single events page that limits scrolling
The studio’s site featured a main Events page, as well as a page called EAS Live, which was meant for streamed mini-concerts hosted by the studio. Even though test users were very familiar with sites using Events pages, they struggled to make sense of the EAS Live page. This was one of the factors that made me decide early on to reorganize all events into a single page, which the studio supported.
First Try & Feedback. My first design used a column of stacked cards. However, testing showed that users got frustrated with the amount of scrolling. At the same time, more studio feedback revealed that they only planned on having three months’ worth of upcoming events at a time.
Solution: separate the essential information from the finer details
Essential Information. I organized events into grids of cards with the event names and dates. This drastically reduced the amount of scrolling needed to browse the page. Knowing that the studio only planned to show three months at a time also helped limit scrolling time further.
Finer Details. Clicking on each card opens an overlay with more information about the event. Even though this added an extra step to the user flow, I found that it was an acceptable trade-off to address users’ scrolling fatigue.
Responsiveness. Using smaller cards with less information also allowed for for a better mobile experience. Users can scroll vertically to view different months, and horizontally to cycle through each month’s events.
Success Metrics
The redesigned page drastically improved the site’s usability
The table below looks back at the primary user pain point areas I identified through my initial usability test. General navigation errors were reduced by 80%, while pain points related to accessing studio specs and events were completely eliminated.
The Final Product
Desktop version
Figma prototype
Mobile version
Figma prototype
Style Guide
Conclusion & Reflection
A successful outcome on all fronts
Based on feedback from users and the studio, the design outcome was a success! Testing showed that the pain points I set out address had all improved. Likewise, EAS’s Founder was highly satisfied with the design and expressed interest in having me return to the project in the future to work on a potential merchandise section. Looking ahead, EAS will look to work with developers that can finally bring this design to life.
What I would do differently
Think Mobile from the Start. Since the desktop site was the studio’s main concern, I made the mistake of not giving the mobile site enough attention in the early stages of the project. This came back to bite me later on when I had to rethink certain parts of the site in order to make the design responsive. In the future, I’ll make sure that mobile design always stays at the head of the project.
Pay More Attention to Instinct. There were a few times where I wish I would’ve slowed down and thought more closely about certain parts of the design, especially when my instinct was telling me something felt slightly off. More often than not, my gut feelings ended up being validated by later testing.