MGBD Parts
Roles: Information Architect, Wireframing
Project Type: Individual
Timeline: 2 weeks
Tools: Balsamiq
Task:
To redesign the navigation and labeling structure of the MGBD website. To create wireframes with design solutions to improve the overall credibility and experience of the website and the service.
The Problem:
The current website (www.roverp6parts.com) is extremely outdated and lacks any navigational and design consistency. The website layout is cluttered and lacks presentability.
Process & Solution:
Research & Evaluation: At the outset, I decided to analyze and understand the existing navigation and structure of the website. To figure out the underlying issues, I performed structural analysis with the help of a 'trunk test'.
The top 3 issues revealed by the test were as follows:
1. The website lacked a distinct site id and page name
2. Navigation and page designs differed from section to section
3. No clear indication and flow for possible navigation to other pages.
Next, I performed some competitive research of other UK & US based websites that sell car parts. This provided a clear picture of how similar businesses cater to their audiences and the kind of features they provided at points of sale. Most competitive websites had a search mechanism right on the home page allowing for easy access to the database of parts available. They also relied heavily on product discounts and offers to entice the website visitors.
The audience of the MGBD website are majorly P6 model owners, aged 40 - 65 year old, who land on the site either directly using the URL, or organically from search engines, or through social media pages, or through word-of-mouth. Thus, the focus had to be on the ease of use, clarity, and information identification. Along with improving the architecture and navigation, it was also crucial for the business to improve the overall look and feel to increase the time spent on the website and to enhance 'product findability'.
(The Information Ecology for MGBD Parts website)
Organization & Restructuring: I chose to retain the existing 'content based' organization scheme of the global navigation, but made it more concise by reducing the number of primary links on the homepage from around 40 to just 5. A 'flat hierarchy' i.e. few vertical levels, made the content highly discoverable, clearly structured and cognitively easy to map and recall.
(Revised navigation structure & high-level site map)
Wireframing: The wireframes with the new layout and structure divided the home page into various sections like business introduction, services offered, featured parts, news & events and customer speak to provide a quick overview about the business, its offerings, and present social validation to the website visitors. A sans serif font was used to increase the readability of the content. New sections like subscribe to a newsletter was also incorporated on the homepage to increase engagement with new and existing customers.
The store page now featured a new search mechanism with filtering and autocomplete capabilities to enhance findability and potential for sales. I selected the 'best fit' search approach to narrow down the results displayed to the user. This helped the user quickly find the parts based on their keywords. Also since the store does not have too many parts, this mechanism is easy to implement and maintain. MGBD's special parts and services also got their own space to be displayed on the store page in an effort to increase the sale of
in-house products.
The product page now featured the tried and tested 'buy' and 'add to cart' buttons to simplify the purchase. Product details were made more prominent right below the product image for better comprehension. A new section that highlighted similar products bought by customers was also listed below the chosen product to effectively increase additional purchase possibilities.
(Wireframes with redesigned architecture, navigation, and content strategy. Click to view full screen.)