Baldwin built the first version of the Smappee webshop in 2013. Based on the existing branding, we made design and took care of product photography. The development of the webshop needed a lot of custom development work. Smappee will turn your house into a smarter, more energy-efficient home. It gives you real-time energy readings as well as costs and allows you to switch appliances on and off remotely. It allows you to control your home, wherever you are.
A story of growth
In the next years, Smappee grew excessively. Next to the original monitor for electricity, Smappee launched two other monitors: one for solar energy, and one for water and gas usage. Smappee’s smart technology won important awards and got picked up by the international press more than once.
The growth of Smappee required a redesign of the original webshop, to:
- improve user-friendliness
- improve the visibility of each product
- improve Google rank
A challenge for the Baldwin marketing team
In September 2015 Baldwin launched its own marketing department. Smappee CMO Karen Smessaert immediately believed in the joint powers of developers and marketeers within the same company and chose Baldwin as both development and online marketing partner.
Our marketers took up the challenge: in a thorough usability study, the whole webshop was screened on all aspects of user-friendliness.
Based on this usability study, we drew wireframes, illustrating what the new pages could look like. We improved the initial design on many counts:
The site navigation as a guide
The site navigation is one of the most important elements of a website. It is the visitor’s guide throughout the site. The Smappee webshop has a clear primary and secondary navigation. The primary navigation contains an overview of all Smappee products. This way, the visitors keep an overview of the product range on each page of the site.
Storytelling pages per product
The existing webshop explained the installation method and the benefits of the original energy monitor by means of animated illustrations. In the new design, such a ‘storytelling page’ was built for each of the monitors. These pages contain all necessary information to serve as landing pages for online marketing campaigns.
A user-friendly e-shop
Despite the small amount of products, the product structure is rather complex. The Smappee energy monitor is sold worldwide, and should be delivered with the plug that the customer needs in his/her country. In countries where more than one plug is used, like Denmark, the consumer has to be able to choose the right plug type. It had to be easy for the user to make the right choice: the right monitor with the correct plug.
Together with the client, we chose to build an overview page with a brief description of each product, so the customer can easily compare all monitors. For more information on one monitor, the visitor can click through to a detailed product page.
A responsive design
Responsiveness was very important for Smappee. On the existing webshop, only the home page and Smappee Pro page were mobile responsive. The number of visitors using a smartphone or tablet increased, and to optimize the user experience of these visitors, the new version of the webshop was made entirely responsive.
References as a trust builder
As the popularity of Smappee increased, the Energy Monitor was picked up and tested by many quality newspapers and professional magazines. These references are real trust builders for the relatively unknown product and deserve a central spot on the webshop. They received their own page and a spot on each storytelling page.
A successful implementation by the design and development teams
The wireframes served as a blueprint for the redesign of the webshop. Our design team translated the wireframes for the references page to detailed design. The storytelling pages were based on an existing design. Good cooperation between the marketing and development teams and the customer was the key to success for this project.
Webshop: www.smappee.com
