Technika
Technika are one of the many companies owned globally by Glen Dimplex. They sell kitchen appliances in Australia, and are trusted by both homebuilders as well as homeowners.
They already had an existing independent website with room for improvement.
The Technika website was to be rebuilt on the core platform, which serves the rest of the Glen Dimplex owned companies' websites globally, to benefit from the core components as well as their regular enhancements. Whilst also addressing and improving the user experience in the process.
Discovery –
Following initial meetings, both internally and with the stakeholders for the whole team to get on the same page about the approach and scope of the project, it was time for the discovery phase. Starting with familiarisation with the existing website, to gain a loose awareness as a reference point for what will be discussed during the discovery workshops. The workshops were prepared for, by being broken down into topics and gathering all the questions that answers would be required for, to build a foundation for the work going forward.
The business workshop gains insight about the business and the brand, to know what content is relevant and what messaging should come through. A key finding here is that the buying journey is different for the two audiences. Homebuilders buy direct through the sales team, whilst homeowners buy through a third party retailer.
The audience workshop gains an understanding about the target audiences and what matters to them. Highlighted here is that the homebuilders are led by business ease, whilst the homeowners' priority is personal satisfaction.
The product workshop is to understand the product families. Uncovered here is that the current three product ranges would become two product ranges, and that each product range is only available to a particular audience. Furthermore, within the product range for the homebuilders exclusivity exists, so certain products are designated to certain builders.
The site workshop queried elements about the existing website, to know how to tackle them on the new website, and the project workshop clarified requests and decisions. This meant all insights were held in one place for the team to refer back to.
Solutioning –
With the insights from the discovery workshops in mind, a website review could be carried out. Taking full page screenshots of the existing website, annotating what is subliminally communicated, along with what content is communicated, assessing how that aligns or doesn't align to the insights gathered, and making note of future design considerations, as well as any technical queries.
Looking at the purchasing journey from a high level revealed there are in fact two completely separate journeys, one for each audience. Each audience goes to its own range of products, and then has their own way of completing the transaction.
A recommendation was made to address the naming of the audiences and product ranges too, as it wasn't intuitive to know which was which, or what product range was intended for who.
Each purchasing journey was then expanded out to reveal all its steps, noting down considerations for each point along the journey.
After initial designs had been created, these were dropped into the journey to ensure cohesion.
Information architecture –
A representation of the existing website's sitemap was created. This showed the non product pages coming first, followed by the product ranges, as well as a duplication of content between each product range page and product categories page. It also showed the one and only policy page was only accessible through the home page.
The sitemap was revised making the product ranges come first, prioritising the buyers' journey. The product categories were also reordered to be consistent across the product ranges, going in a logical order. The non product pages were grouped together where appropriate, and additional support and policy pages added where required. All the policy pages were also moved to the footer so they are accessible from wherever a user is on the website.
Product data –
A selection of components were identified as most likely to be included in the product pages, these were the Product Listing Page Product Card, the Product Detail Page Header, and the Specification Table. Each of these had an associated visual detailing all the possible elements of the component, as well as where each element's content is fed from. Each component was reviewed, and each element was annotated with a decision whether to include that element or not as well as whether its content was existing or needed creating. The component was also configured in Figma to only show the elements it would be making use of, as a clear visual representation of the end result. This exercise was really useful for the stakeholder to know what product specific content needed to be collated and created, and for the site builder to know what features would be being made use of and need setting up, as well as refining the design.
Collaborating with the technical team allowed them to create a product data sheet, ready for the stakeholder to collate all the product specific data. It had been resolved that product variants wouldn't be used and instead every product would be individual. This was because either a variant was so different that they wouldn't all satisfy the same buying need, or the variants were just subtle enough to differentiate a product and therefore its exclusivity to its intended audience. The data collated fed through as content to specific components, as well as dictating what filters dynamically appear on a product listing page, and ensuring each product shows up on the correct product listing page.
Design –
Working with an established component library skips the low fidelity wireframe stage, and instead initial designs are created in Figma by dropping the whitelabel components into page layouts, building up the structure of the page. Where appropriate the information architecture of each page is either led by the existing website or reworked based on all the insights.
High fidelity designs are then reached by configuring each component to how it is intended to display on the live website, as well as dropping in reference content to clearly communicate what content is intended and where. Clarifying the functionality with the site builder, and checking over every detail with the stakeholder, refining where required.
The navigation was essential to address. The existing navigation changed content depending on where you were on the website, meaning certain items were only accessible if you were in the right place. The order of the menu items also changed depending on where you were on the website, adding to the confusion.
The new navigation is consistent across the whole website, for ease of use and familiarity. The first item is now a mega menu for the product ranges, prioritising the purchasers' journey, which makes it clear what product range is intended for each audience. Dropdown menus are also used where required for the remaining items, to group related content and ensure every page can be reached from wherever you are on the website.
The home page needed a tidy up and now succinctly announces upfront that each audience has their own product range, with a brief introduction to each which links through to the relevant product range page. Complimented by Technika's key selling points as well as the logos of their homebuilder partners, both reinforcing the experience and quality that Technika offer.
The product range pages were finessed to detail out each product range based on the insights found. Each product range was introduced, as well as explaining which audience it is intended for. Additionally, the commercial product range page also introduced the subbrands which had been merged together. This was to help clarify for the user, as the Bellissimo products would still reference Bellissimo in their product names, as well as having separate links to each of their spare parts stores. Technika's key selling points were included, listed in the order of importance each audience was most interested in. Followed by a horizontal slider which linked out to each product range's product categories, again consistently and logically ordered. And finishing with a call to action relevant to the product range's purchasing journey, where the homebuilders were redirected to the contact page to buy directly through the sales team, and the homeowners were redirected to the where to buy page to find their local Good Guys store.
The product detail pages were also refined to better serve the users' needs. The product page header allowed for multiple images and videos to better showcase the product visually, accompanied by the product name and reference number, as well as a fuller description and list of highlights specific to the product. Additionally, the retail range products include a call to action linking to the where to buy page, although technical limitations prevented this from being possible for the commercial range products too. Again, the audience the product is intended for is called out, so if it has been overlooked elsewhere in the user journey it is clarified at this stage. There's a link to the product range pages included here, in case the user requires a broader understanding of the product ranges and the audience they're intended for. The retail range products additionally highlight their European inspired style, as appearances were seen as most important to this audience. For products where it was appropriate the fuel type was called out to ensure it is compatible with the house it's being bought for. The specification table initially loads as just the key technical details and image, and once expanded reveals the complete specifications should further detail be of interest. Including the specification table informs the user of the details without the need for the additional step of downloading specification documentation. Although useful downloads are also included, should it be preferential to download product related documentation such as specifications and manuals. Following this, product cards appear where applicable to link through to the other products within a matching set. Ending again with the call to action relevant to each product range's purchasing journey.
The style sheet is then populated to dictate text styles and brand colours, as well as how specific elements like buttons are handled.
Handover –
Including the stakeholder from the beginning and regularly checking in with them throughout the process for clarification, meant they were fully in the loop and happy to progress to the build phase.
Similarly, including the site builder from the beginning and regularly checking in with them throughout the process, meant they understood exactly what was to be delivered as well as understanding the rationale behind the designs, so there was no room left for ambiguity. It also meant all the technicalities had already been discussed and resolved, so once given the go ahead were free to get on with the build.
Supplying the stakeholder with a content document to populate with all the copywriting and links to imagery to be used in the live website, is then the source of truth for the site builders to drop into the components which build up the website. It can also be used as a point of reference during the internal acceptance testing and user acceptance testing phases before going live.
Result –
Technika now have a responsive website built on Glen Dimplex's core platform, benefitting from the core components as well as receiving their enhancements. The overall user experience has also been improved, making it clear which products are available to which audience, as well as how to purchase them.
Amy Barry – Glen Dimplex Australia Head of Marketing
Michael Beard – Glen Dimplex Australia Marketing Specialist
Matthew Stocker – Glen Dimplex Technical Product Owner
Lucy Monk – Glen Dimplex User Experience Designer
user experience, responsive website design, workshop facilitation, project management, stakeholder management
Catharine Curran – Glen Dimplex Site Builder
Sunmeet Singh Thapar – Glen Dimplex Data Analyst
Michael McLoughlin – Glen Dimplex Product Information Management
Michael Beard – Glen Dimplex Australia Marketing Specialist
Matthew Stocker – Glen Dimplex Technical Product Owner
Lucy Monk – Glen Dimplex User Experience Designer
user experience, responsive website design, workshop facilitation, project management, stakeholder management
Catharine Curran – Glen Dimplex Site Builder
Sunmeet Singh Thapar – Glen Dimplex Data Analyst
Michael McLoughlin – Glen Dimplex Product Information Management
Figma – FigJam – Drupal