WISDOM AUDIO
Full Site Redesign
Wisdom Audio is a custom audio business that's been operating since 1996 and their website had not seen a lot of change in that time. Although their technology is cutting edge, the previous website did not reflect that in its design. I worked this project as both the designer and developer in order to bring new life to the site and give it a more modern polish, while preserving the core of the company's character.
RESEARCH
Desktop Version of Old Site
Site Evaluation
I started the project by doing a full site evaluation to see what was and was not working from a user-experience perspective. Some major issues I encountered included lack of interactivity with buttons and links, cluttered layouts, poor color accessibility, and missing content. The website suffered the most in its mobile format, losing a lot of potential web traffic.
Information Architecture
Based on my findings I created an information architecture diagram of the current site layout, making note of where content was missing or not included in the navigation. I used this to build a new layout that I believed would reduce the amount of clicks needed to get to vital information and improve the overall flow of the content.
Mobile Version of Old Site
Project Goals
Going into the design phase I determined that a mobile-optimized design with a new emphasis on hierarchy, color accessibility, and interactivity would vastly improve the experience. It would also be important to create more consistent messaging, a modernized product catalog, and functional footers.
DESIGN SYSTEM
Typography
All text throughout the site was created in variants of Helvetica. Guidelines were created for how different headings should be used and where to use them to ensure a consistent hierarchy.
Color
The site colors were derived from the Wisdom Logo and consisted mostly of purples and grey. The new usage guidelines were created for better accessibility and overall consistency across the site.
Buttons
A variety of button types were used throughout the design, with the most versatile ones being the lightboxes. These were primarily used to draw to special interest pages such as product categories or technical information.
Layouts
An important part of improving the user experience from the previous site was to create consistent margins around element types. This created better grouping between related content and allowed more white space for the content to breath.
PROTOTYPE
Utilizing the design system, I created high-fi wireframes and prototyped them in Adobe XD. After a round of feedback and updates, I used this as the guide for the site design when we began building in WordPress.
SITE IMPLEMENTATION
Domain Transfer
The new website had to be built entirely from scratch so a staging environment was set-up in a subdomain in order to leave the old site up while I worked. When we were ready to launch the new site steps were taken to transfer and preserve as much of the pre-existing SEO as possible.
Conclusion
The new site launched successfully and we have made regular content updates since. One of my favorite features for this site was the addition of tap to call/email to their dealer directory. It really enhanced the interactivity of the content.
Check it out: wisdomaudio.com
Credits
Before & After: Mock-Up Base from Cosmo-Studio
Domain Transfer: Mock-Up from user17882893
Conclusion: Mock-Up from Cosmo-Studio