The main focus of this project was to redesign and refresh a dated B2B website for Harman Embedded Audio sub-division of Harman.
And also increase traffic, user's retention, and improve navigation experience by simplifying access to the information.
And also increase traffic, user's retention, and improve navigation experience by simplifying access to the information.
Old Website
I've started with an evaluation of the existing website and created a spreadsheet with all the positive and negative findings.
The next phase was a research of websites UX design trends 2019. After reading articles and user researches available online, I've gathered all the collected information and put everything in Axure document.
Website UX Design Trends 2019
I've captured screenshots of competitor websites, other trendy looking websites and mapped collected UX design trends to the screenshots for a thorough analysis.
Trendy Websites and Competitors Websites
Trendy Websites and Competitors Websites Analysis
Based on the research, I've decided to use these UX trends for the updated website:
• Integrated non-invasive video background
• Plenty of white space;
• Storytelling and success stories;
• Simple navigation;
• Broken grid;
• Improved footer;
• Oversized headlines;
• Mobile friendly responsive design.
• Integrated non-invasive video background
• Plenty of white space;
• Storytelling and success stories;
• Simple navigation;
• Broken grid;
• Improved footer;
• Oversized headlines;
• Mobile friendly responsive design.
All of these improvements above would help to refresh the dated website design, increase traffic on the website, improve and increase user's retention, and boost SEO ratings.
In parallel to the UX design research and evaluation, I was attending user research interviews performed by the User Researcher in my team.
Based on the user research interviews and Google Analytics, I've created initial drafts of UX design wireframes.
Based on the user research interviews and Google Analytics, I've created initial drafts of UX design wireframes.
All the gathered information, research findings, examples of UX design wireframes and visual design mood-board were presented during the workshop to the customer. Every single result was explained to the customer and discussed.
During the workshop, the customer provided more interesting insights about the existing website and a vision of the future website.
The white-boarding and sketching exercises were performed on the workshop to clarify every single detail of the future website.
The white-boarding and sketching exercises were performed on the workshop to clarify every single detail of the future website.
Sketching and White-boarding on the Workshop
Right after the workshop, I've started creating the UX framework, with detailed descriptions for every user interface element.
Creating UX framework before the actual wireframes help to save time because it is much faster to build the wireframes in Axure using prepared "blocks". Almost every "block" in the framework is master, and if there would be a need to change a card layout, for example, it could be done by changing the master. As a result, all instances of this master on all pages will be changed as well. Also, this approach provides the development team with all the essential information about interactions and animations before the actual wireframes will be delivered.
UX Framework
UX Framework Prototypes
When UX framework was created, I've started working on the UX design wireframes for the website pages templates in Axure.
Upon the completion of the wireframes for the pages, they were reviewed internally and on several meetings with the customer.
Upon the completion of the wireframes for the pages, they were reviewed internally and on several meetings with the customer.
After the layout and interactions were baselined, a copywriter started working on the wording, which was later applied to the wireframes.
Website Pages Templates Wireframes
UX Design Clickable Prototypes
Later the updated Harman Embedded Audio website was successfully launched in May 2019, and now available online.
Design changes improved user retention metrics up to 92% and increased B2B sales.
All screens, images, sketches, wireframes, visual designs, user experience designs, animations, industrial designs, 3D models, 3D model renders featured on this page are the intellectual property of the respective companies for which they were created. These works are showcased here for portfolio purposes only. All rights are reserved by the respective copyright owners. No part of this portfolio may be reproduced, distributed, or transmitted in any form or by any means, including photocopying, recording, or other electronic or mechanical methods, without the prior written permission of the copyright owner.