Mio Technology website - product section
A new product section and strategy
I defined and implemented a new product strategy which focused on:
- improved category distinction
- easier product choice and comparison
- easier to create & cheaper to maintain product pages
- better access to device related content : support, updates, accessories
- faster pages, full content & design separations and SEO optimizations
Project outline
- Simplified category choice
- Differentiating products in the overviews
- Making old products easier to find
- A flexible product page header system
- A full summary on every overview page
- In-page navigation on all other product pages
- Product feature optimization
- CMS controlled coverage maps
- Improved product accessories
- Implementation of a product taxonomy
- Semantic awards & reviews
Simplified category choice
Our analysis showed category choice confusion. A lot of visitors visited quickly different category pages before clicking on a device.
I simplified the category choice by making it an easy one or two step proces:
- Only GPS or GPS with PDA functionalities
- For the PDA group: only PDA or PDA with phone
Further group/category differentiation is done by text and visual clues (device photos).
Related links
Differentiating products in the overviews
The old product overviews made it hard to choose the right device by only showing a photo and device name, and putting all the different versions in the same overview as separate versions.
In the new product section all the different product versions are grouped in product series. The new overviews show the main decision maker (price) and the main differentiating features. The general GPS products page only shows the price in the smaller product blocks. User tests showed a huge improvement in choosing the right device.
Related links
Making old products easier to find
Research showed us that there was still interest in information about older products
- Navigation path analysis showed search activity for older product in the support section after quickly visiting the product sections.
- Online research showed lot of basic questions about older devices on fora.
- In the Mio Club, we saw many customers registering their 2nd or 3rd Mio device.
Previously we deleted product pages of devices which weren't sold anymore.
We decided to republish the old product pages with the new modular product page templates and linked them at the bottom of the product overviews. This made it easier to compare an old device with a new one, and allowed us to let visitors use older products in the comparison tool (next phase). Each older product page had clear links to its support pages, and had an accessory page which would be linked to the e-shop (second phase).
Related links
A flexible product page header system
By using the same dimensions for the headers on the overview page as the product banners on the site there were substantial cost reductions. I made different variations of this concept so it could contain all the graphics and media of all the newer and older products: just an image, a background image with text on top of it (easy translations) or even full flash animations. Every version could have extra buttons layered over it (3D model, video, mini sites, ...)
The product sub-pages had a smaller version. If the product had multiple series models, the header would be able to change according to the selected model filter.
Related links
A full summary on every overview page
By cutting all the existing content into smaller pieces, a necessity for the Reddot CMS implementation + content reuse, it became possible to create automated summaries of each product with more detail links.
Instead of showing only the top features on the old product pages, we now got accessories, specifications, awards and coverage. Labels were introduced to highlight new items (and they could easily be turned off and on for each item site wide).
Each product overview page linked back to its related support, e-shop & Mio club pages.
Related links
In-page navigation on all other product pages
Every product subpage gets an automated summary on top, which acts as an in-page navigation. This gives a nice quick glance to all the included features / accessories / coverage.
On product series pages, each item specific to a certain model is labeled with "only model name". The filter on the side allowed to quickly see which items were available for each model.
Related links
Product feature optimization
While tagging all product features, I marked some for quick improvements. All device features were standardized and made reusable with a product placeholder system where the CMS would replace the placeholder with the device name.This made translation and maintenance easier, and allowed us to build product pages faster. In a next phase the most important device features would get their own page with more details, and all features with the same tag would become comparable.
The features marked for improvement, received easier to understand graphics of technical concepts. All the features received semantic markup and improved styling.
Related links
CMS controlled coverage maps
The old system only showed country details when you mouse over a country, which made it hard to spot differences between map versions.
In the new system you create map versions, and fill in the details & POI's for each country. The CMS would then render an HTML table and an XML file to control the interactive flash file. I also made the maps progressive, by providing an image alternative for the flash file.
Related links
Improved product accessories
The old website only had a basic list of accessories with some info.
With the new site we already took a step towards an accessory e-shop. In a next phase the accessories would be connected with their corresponding e-shop pages and prices. I also provided descent information on the "Also in the box" accessory, as this would also be sold in the future shop.
Related links
Implementation of a product taxonomy
The old website had a product image that showed all the hardware features and buttons (text in image), followed by a huge unordered specification list that differed across products.
I implemented a product taxonomy, prepared the specifications to be used for the upcoming product comparison tool, and optimized the product specifications table which now could hold between 1 & 4 products. I implemented top specifications & documents block and optimized the hardware features image by layering text on the image instead of the text being part of the image (easier to maintain & translate). A roadmap for further improvements that were out of this scope.
Related links
Semantic awards & reviews
I created new awards & reviews templates with microformats (hreview), and 4 different scoring systems. The awards and reviews are now ordered in 2 groups: magazine (no link) and website (with link).
Related links
