Mio Technology website
A website transition with a focus on usability, SEO & easier to maintain pages.
Mio was in the process of a transformation: new house style, new product ranges, new offices, etc ... I did the research, content strategy, information architecture (& how to implement that in the Reddot CMS), UX improvements and wireframing of the products, press & about Mio section + the homepage.
In a next phase I also designed & templated these in HTML & CSS. Content & design separated with the eye on easy design improvements without touching the HTML & search engine optimization.
Project outline
-
Homepage
We highlighted the diverse range of devices, made direct links to the most important Mio Club pages and gave the support, E-shop, events, job openings & an about Mio summary a place on the homepage.
-
Products
The main goals were to make it easier to choose the right product, improve the category distinctions, create better access to device related content, make the product pages easier & cheaper to maintain.
-
Press section
The main goals were to improve the relation with the press, and to communicate the Mio strengths better. We focused on making it easier to do research and to contact the PR staff.
-
About Mio
The main goals were to communicate better what Mio is, and to highlight its international aspect. Mio was growing fast so we improved the career section and job openings.
-
Contact
The new strategy was to guide the visitor in a positive way to self-service and automated tools. Phone support was expensive but we kept the phone numbers easy to find instead of hiding them.
Homepage
An adaptable home page
The home page quickly communicates Mio Technology: a fast growing GPS navigation device company.
The top section contains a product slider with the most popular devices and quick access to the most important devices of each category. The PDA & Phone GPS category was unique at that time, and highlights the diverse range of Mio GPS devices.
The middle section, which ends the viewport, contains the after sales services (Mio Club, support and E-shop) and 3 banners for actions and events, while the bottom part is reserved for quick access to the latest corporate news & careers. The corporate part also communicates that Mio is growing: new job openings, new products & earnings growth.
The use of a vertical & horizontal grid allowed the use of interchangeable blocks. The big product highlight has the same dimensions as the headers on the product pages, allowing a cost effective reuse of marketing materials. All text on this homepage is real text layered on top of images or background images, making it easy to translate (16 languages) and good for SEO and accessibility.
Related links
3 categories and 8 products in a small device selector
The home page device selector follows the new category distinction strategy as the rest of the website:
- The GPS Car Navigation category containing the most devices. Only for normal GPS devices
- The GPS Multifunctionals group with 2 categories: GPS + PDA and GPS + PDA + Phone
It is fully controlled by the Reddot CMS, and it is easy to add new devices, and to translate them. It follows a clear content vs. design separation (HTML vs CSS), a progressive enhancement strategy and is SEO optimized.
Initialization
The initialization step quickly transforms the "no JavaScript" layout to the animated layout.
The "no JavaScript" version has full functionality, but sacrifices design for speed: every device and category can be clicked, all images and text of the animated version are reused.
Related links
Mouse interaction
If you mouse over a category, it shows all the devices in that category. Every device links to its own page and each category tab has a link to the category page. When you click a category before it is fully open, you will be guided to the category page.
Related links
Project information
- Client: Mio Technology
- Yves Peirlinck: project manager, web team leader
- Frederik Van Zande: research, strategy, UX, templating, design
- Wim Put: development (JavaScript)