Overview

Exron Music is an electronic dance music (EDM) collective and online publication founded in 2017 by two women in New York City. Their desktop site’s global navigation naming conventions, broad information architecture (IA), excess display font usage and dark color choices made it difficult for new and returning users to identify what content they were looking at as well as elicited visual tension.

I was the UX/UI designer on this 6-week, solo, client project. Figma was my tool of choice.

Potential Constraints

• Minimal client involvement

• No style guide provided

• No front-end or full-stack developer to run design ideas past

• Being sick for 3 weeks out of the 6-week design sprint

Research Synopsis

Competitive Analysis

I completed an extensive 18-feature inventory with the client’s 3 biggest competitors including EDM.com, Your EDM, Dancing Astronaut; Exron was not taking full advantage of internal links (e.g., recommended articles, category tags) which helps Google understand and rank your website better.

Remote, Moderated User Interviews

In addition to Exron’s aesthetic troubles, speaking with five participants was key to understanding which content should be prioritized when I rebuilt the website; I learned music news and artist interviews were most important to Exron’s audience, not fashion trends or “Media.”

Informational Architecture (IA) / Site Map

I cut the irrelevant secondary navigation categories roughly in half from 13 to 7. The navigation labels confused users, so I replaced them with shorter, more specific verbiage — aligned with their interests.

The Problem

The Informed Raver needs an online publication with digestible and well-organized content on their favorite EDM producers, exclusive festival coverage and industry news so they can keep up with the latest music trends.

Goals

User:

• A website that is pleasant to look at (e.g., white background with dark grey, larger text)

• Ability to decipher content quickly

• Understanding Exron Music’s brand

• Ability to focus on the articles they have selected without being distracted by advertisements or unrelated content

Business:

• Capture and keep readers’ attention with visual hierarchy and well-organized content

• Incentivize signing up for Exron’s newsletters

• Utilize accessibility, typography and color theory best practices to create a visually appealing experience for new and returning users without abandoning Exron’s space aesthetic

Solutions

Usability Test Plan

• Users must complete each task within 5 minutes.

• Task #1: Find news article “Lucii Shares Childhood Story on National Coming Out Day – [Read].”

• Task #2: Locate “Exron Exclusive Interview: Paraleven at Mercury Lounge NYC”

• Task #3: Locate house music release “Dr. Fresch & Mina Knock Release New Crossover Track “Timeless” on — [Listen]”

Lightened the Mood

By changing the background HEX color to off-white (#FDFDFD) and font HEX color to red-black (#060303), The Informed Raver will not strain their eyes when visiting the website. I replaced Airstrike with the easy-to-read font Helvetica Neue and removed Exron’s flashing, low-resolution hero video; these actions decreased visual tension and eliminated a potential seizure trigger.

Streamlined the Layout

I removed the second column with repeating content, so The Informed Raver is no longer distracted when viewing an article. Every page on this website has an engaging hero image at the top, attracting readers. Every screen on my prototype has breadcrumbs and a familiar page layout, so users know where they are on the website. Lastly, I used a grid in Figma to ensure copy and images stayed within the margins for consistency as well as visual appeal.

Orchestrated a Seamless Journey

Users could not tell the difference between Exron Music’s features and paid advertisements; to fix this concern, I centered the ads, added negative space between them and Exron’s content then curved the story thumbnails — fostering a harmonious, complementary relationship between the two.

Results

• Reduced the duration of locating three articles — news, music release and interview — by an average of 79.44% (85.90 seconds)

• Improved Exron Music’s website information architecture (IA), visual hierarchy, global and secondary navigation, readability and accessibility

• Struck the perfect balance between user needs and business goals throughout the sketching, wireframing and prototyping process

Takeaways

• Less is more. I enjoy and excel in creating clean, minimal designs. In the beginning, I wanted to create figuratively “flashy” interaction designs that I saw my former coworkers implementing in Figma; Then I remembered it takes time, research and experimentation, so do not get discouraged when learning a new tool.

• When presenting your user interview research to a client, tread lightly: remember the brand you are working on is their baby, and it may be hard for them to hear critical feedback. Empathizing with the client is just as important as empathizing with their users.

• If I had more time, I would have adopted the mobile-first strategy because designing and prototyping Exron Music on mobile would guarantee its users have an optimal experience on any device.

Client Testimonial

“I recently had the pleasure of working with Sydney as a UX researcher/designer for my company Exron Music's website and couldn't have been happier with the results,” said Exron Music Co-Founder Charlotte Vosbeck. “Sydney took the time to thoroughly explain all of the work she was doing to my team, managed deadlines flawlessly, and remained passionate & knowledgeable throughout the entire experience. Her attention to detail, creative ideas, and ability to go above & beyond are a few of the many reasons why we will continue to work with Sydney or UX needs in the future!”

© 2021 Sydney Goldberg. All Rights Reserved.