Reimagining an online experience to showcase Mark Levinson's passion for pure audio.
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.
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.
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.
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.
Key Takeaways from the Discovery Phase
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.
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.
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.
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:
Awards
This website redesign received a Marcom Gold Award in 2021.
