Client Project: Mirotone
Contributions:
My contributions for this project was to find and adapt a suitable template
for this client from the new UI templates that I had created (See UI Templates). For this project, content was to be taken from the exisiting site so I had to select a template in which i could use this content and also find a new look that would suit their requirements. After the template was selected, my role was to implement the template on the Commercebuild platform, which included styling the site using CSS coding and the CMS system to load content respectively.
Scope:
Mirotone is a leading supplier of interior and exterior surface coatings across Australia
and New Zealand. They made the switch to Commercebuild for a full site redesign and
because of Commercebuild ease of connection with ERP systems such as SAGE.
Mirotone required 4 brand new sites, 2 sites for Mirotone Australia and NZ which are B2B
sites. The other two sites are B2C for MIrotone’s other brands- Polycure and Quantum.
All sites are to be based on the same template and use branding to differentiate between
each site.
Category and Product Page:
Mirotone wanted a category page with a list view option since most of their products did not have an image to go with it. The Urban template has a great list view option and layout which displays all the required information in a well designed manner. The product page is also simple in the same way where most of the information is displayed in the product tabs respectively.
Design Rationale:
I selected the Urban template as this template has a great balance of content on the home page as well as a prominent search bar in the header. Mirotone wanted a prominent search bar so that their customers can search the webstore easily. They also liked the tabs on the home page under the banner which displays different content as this cuts down on a long scroll without sacrificing content.
Here is the Urban template design on which the Mirotone site based on. The main pages that needed to be designed were the home, category and product pages. The header and footer elements also needed to be designed as well. The cart, checkout and account pages were standard designs which are used across the Commercebuild platform.
Urban Desktop
Home Page
Urban Desktop
Category Page
Urban Desktop
Product Page
Urban Desktop
Login Page
Mirotone Desktop
Home Page
The home page was slightly changed from the Urban template. There are more categories which pushed the header out. The content sections are also slightly different since Mirotone does not have a blog or newsletter section.
Mirotone Desktop
Category Page
The category page was also adapted to contain a banner underneath the title and also uses a list view as opposed to the line view which the Urban template uses.
Mirotone Desktop
Product Page
The product page is a simple version of the Urban template. Mirotone did not require any specific calculations. A simple description and product tabs were displayed to showcase all the content needed.
Mirotone Desktop
Login Page
Similar to the Urban login page Mirotone is also split into 3 sections, my account, new customers and registered customers.
The mobile view on the right shows only the new customer and registered customer section. For my account details there is an account icon in the header.
Mirotone Mobile
Login Page
Here are the mobile designs for the respective home, category and product pages for Mirotone
Home Mobile
For mobile, the tabs are hidden and the content is displayed in a scroll manner. The header is also sticky and simplified leaving the logo, search bar and the hamburger icon which contains the rest of the options.
Category Mobile
This is a snapshot of the category listing on mobile, the header is sticky and above the listing are banners. The list view remains the same, but is more responsive and the layout is centralised to suit a mobile view.
Product Mobile
The product page is similar to desktop view and is more responsive for mobile. The tabbed content remains and is set to open at the first features tab as a default.