Connecting users that want to unlock a deeper appreciation of sound

Reimagining an online experience to showcase Mark Levinson's passion for pure audio.

Mark Levinson - Digital Refresh

Mark Levinson

Mark Levinson manufactures high-end audio components for luxury home audio systems. The audio quality from Mark Levinson audio systems are said to be so true to a real life performance that you'll hear things you've never heard before, even on your favorite tracks. Mark Levinson audio systems can also be found in Lexus Vehicles.

A Mark Levinson audio system.
A Mark Levinson audio system.

Background

Mark Levinson launched the 5000 Series, a new product line targeting affluent millennials and those looking to enter the realm of luxury audio. Huemen partnered with Mark Levinson to refresh its existing website, with the intent of attracting its new target audience whilst still appealing to its existing user base.

Mark Levinson's new № 5105 Turntable
Mark Levinson's new № 5105 Turntable.

Process

Discovery

The Huemen team engaged in a discovery phase that began by mapping out the current website and going through page by page, noting our observations on both desktop and mobile versions of the existing site. This allowed us to familiarize ourselves with the Mark Levinson website and its products.

We were given a list of key stakeholders to interview that would give us the best insight on Mark Levinson's brand and products, as well as the state of the existing website. All in all, we interviewed nine stakeholders, with positions in regional, national, and global marketing, as well as product experts. This was extremely vital not only in learning about Mark Levinson as a company/brand, but also about the target audience and product details. We also learned about the process one would go through to experience and purchase a Mark Levinson audio system.

Mark Levinson's existing site had uninspiring product shots and was extremely text-heavy on some pages.
Mark Levinson's existing site had uninspiring product shots and was extremely text-heavy on some pages.

We also conducted user testing of the existing website, using a vendor for online-based testing. We were able to give users tasks to perform in order to uncover pain points that typical users may face when visiting the website.

Lastly, we surveyed the competitive landscape of luxury and audio websites, performing a deep analysis of select brands. This gave us insight on industry trends, including online presence, content, and UI/UX.

Once the discovery phase was complete, we were able to extract and identify opportunities where UI/UX and content could be improved.

Just a few of the websites we looked at while surveying the luxury/audio website landscape.
Just a few of the websites we looked at while surveying the luxury/audio website landscape.

Key Takeaways from the Discovery Phase

  • Welcoming a new target audience
    The brand has evolved its target audience to a younger (25-50 years old) demographic that is focused on premium experiences but also should ensure that the legacy audiophile isn't alienated.
  • The brand's core values haven't changed
    The brand's focus on audio purity and attention to detail remains a key differentiator, and should be maintained and communicated throughout the online experience.
  • Convey elegance and sophistication
    The current online experience doesn't convey a cohesive brand experience or identity; the photos in particular don't communicate luxury nor does it represent a luxury brand.
  • Focus on the Mark Levinson Experience
    The website should focus on allowing consumers to experience and interact with the brand. Immersive imagery and perhaps video content should be leveraged to spark curiosity, especially on the product detail pages.
  • Drive users to hear it in person
    Mark Levinson products aren't sold online; it's extremely important that users are able to find and contact an official dealer so that they can help you find the perfect solution.
  • Mobile optimization is essential
    With internet users becoming reliant on mobile devices more than ever, there's no question that the website must be optimized for the best mobile experience possible.

UX Design

We began by taking the site map from the current site and planning out what pages needed to be removed or added. In this case we had some ideas on how to streamline the experience by removing certain pages and also adjusting the items in the header and footer navigation.

Old (Left) and New (Right) Site Map.
Old (Left) and New (Right) Site Map.

With the learnings from the discovery phase, we created low fidelity wireframes. This allowed us to work quickly to mock up ideas but also to help the client visualize the basic layout, functionality, and information hierarchy of each page without focusing on the copy, imagery, or colors. As the wireframes were being approved we began work on functional specs to annotate the different modules based on the client's requirements.

Low fidelity wireframes helped us quickly mock up page layouts.
Low fidelity wireframes helped us quickly mock up page layouts.

Visual Design

With the basic layout and information hierarchy in place from the wireframes, we worked closely with the content and copy team to create several versions of high fidelity mockups to review with the client. The content team partnered with another agency to capture new lifestyle imagery and video of the new 5000 Series products, and we integrated it into the website design. The copy team provided streamlined copy documents that helped make the super dense technical copy on the product detail page more digestible. The result is a responsive design that properly amplifies the Mark Levinson brand in the online space.

The Home page now has modules that nod to the brand heritage of pure and luxurious audio, while also giving users the option to explore products by category, read more about Mark Levinson audio systems in Lexus Vehicles, or check out new blog and social media posts.

The About page dives deeper into the brand and its vision for audio excellence. Pages like the Category Landing page have been refined to use more impactful imagery.

A video background in the header adds some additional energy to the Product Detail pages; users are no longer served a wall of technical description text, as features have their own dedicated modules and detailed specifications can be found in accordion menus below.

All the pages have been designed with the mobile user in mind, utilizing separate mobile images, so that the website will load relatively quickly on mobile while still utilizing high impact imagery to reinforce brand messaging and also to highlight product details.

Mark Levinson
Mark Levinson
Mark Levinson
Mark Levinson
Mark Levinson - Mobile

Design Handoff, Content Production, and Site Launch

With the designs approved, our team packaged up our sketch files and sent them over to the engineering team. We also uploaded our designs to invision with the inspect capabilities enabled so that the engineering team were able to more easily implement the designs. There are inevitably questions and conversations that the engineering team would have and we made ourselves available for discussion throughout the design and development phases.

We then set forth in creating the final content deliverables for the rest of the pages, which included images and also the header videos for the Product Detail pages. Once the website was implemented, we were able to preview the site and adjust design discrepancies with the engineering team before site launch.

Challenges/Retrospective

Since the website launched, we have generally received positive feedback about the website improvements from the company stakeholders. The Mark Levinson team have informed us that since the refreshed site launch, site traffic has increased by 74% and click throughs from the dealer locator have increased more than 31% — a significant improvement.

In retrospect, there have been a lot of challenges throughout the project:

  • Scheduling/Timelines
    Overall, the timelines were extremely compacted due to a company server freeze hard deadline. That meant that we couldn’t be late on anything, so it required a lot of timeline adjustments early on, and phases that overlapped even though there were prerequisite tasks that were not completed.
  • Feedback/Stakeholders
    There were so many stakeholders for this project and in the beginning we received conflicting feedback which delayed design tasks. At some point the lead stakeholder decided to take collecting feedback into her own hands and then providing consolidated feedback which made the process a lot smoother. We also would have hoped to be more in direct contact with the engineering team from the discovery phase so that we could understand technical limitations upfront to inform the design strategy.
  • Inter-agency Partnerships
    As the Mark Levinson website redesign was just a portion of the brand’s overall marketing strategy, our UX/UI team had to connect with the brand agency, the product specialists at Mark Levinson, the Lexus liaisons at Mark Levinson, the engineering team, the photo and video agency as well as our own internal copy writers and media team.
  • Analytics/Design Validation
    Analytics data weren’t made readily available for this project from the Mark Levinson team, and the timeline didn’t allow extra time for design validation with test users.
  • COVID19/Work From Home
    With the COVID19 outbreak hitting the US in early 2020, our office began working from home in February. While it did take some getting used to, we were able to adapt and meet via web meetings for any important knowledge transfer or review meetings.