Introduction
Nexus Garden Rooms is an online retailer offering bespoke garden rooms. The aim with the website is to give customers an easy and intuitive way for them to create their garden room and place an order.
Discovery & Definition
I worked with the client to define a set of goals for the project. Given the nature of the company’s products and target audience, it was immediately apparent that the site would need to be easy to use for older customers, who might not be as experienced using technology. With this in mind, the site needed to be intuitive, with all the information and options consumers need and nothing they don’t.
Landing Page
The landing page features at image carousel that flicks though examples of previously built garden rooms to show customers the quality and craftsmanship of the products. Below that is the company’s one line pitch with a short summary of their products. I chose to put this section here rather than overlaying it on the carousel to make sure the images are clear to see, and the text does get lost. Nexus offers three types of rooms, The Grand, The Presidential and The Royal. The following sections show each one on a product card with an image, description and price and customers can click the ‘customize’ button to be taken directly to the room configurator to customize their room. The landing page also shows all the advantages and selling points of choosing a Nexus garden room, followed by a call to action to start an order.
Online Room Configurator
The online room configurator was the largest part of the project. These multistep ordering processes can often be daunting to customers, so a great user experience throughout this process was of the upmost importance. The highest priority for me was ensuring the options customers selected would be saved should they leave the page and return later and given the cost of the company’s products starting at over £16,000 people are not going to rush into ordering, and could customize their room on and off over the course of several days. I had multiple calls with the backend developer to see how this could be achieved, storing the options in a cookie ended up being the best solution.
The design of the configurator is broken down into a few main components, ‘building speciations’ displays a card for each step of the process. Cards have three states, active, completed, and pending which are visually repented by the colour i.e. active is green, completed cards are in white and finally pending cards are grey with images in black and white. At anytime users can click on a card to go back a step if they wish to update an option and cards have an ‘edit’ button to ensure users know they can edit each step. The card shows customers a preview of which options they have selected on each step of the process, and any price changes, so they are not a surprise at the end.
The main section of the configurator is where users can select the options for each step. There is always a default option selected, visually represented by a green background, following suit with the cards above, although people could just keep clicking ‘next’ and get to the final step with no fuss. I added a ‘step x of 10’ counter to the steps, so people know how far though the process they are. It can often feel like these online configurators of on forever, so I believe it is important to show the number of steps as you don’t want a customer leave the site on ‘step 9 of 10’ because they thought there would be another 10 steps ahead that they didn’t want to do.
The last section outlines the total current cost of the room, so users know the cost of the room though out the process, and do not need to wait until the end. There is also a link to see a breakdown of the cost which displays a pop-up of all the options selected, so it’s always clear why the price has changed.
Completing an Order
Once customers have selected all the options for their room, they see the full-cost break down of their options combined with several renders of what their room will look like. Customers then need to fill out the form with their contact information, which will be sent along with their room options to the Nexus team. Due to buglet and time constraints, the idea in the future here would be to integrate a payment solution, so customers would pay an initial deposit and final amount either monthly or in a lump sum.
Order Process
The order process page explains to customers the simple steps the company takes in the lead up to the room being installed. It also features a number of reviews from happy customers.
Materials
With the world focussing more and more on the ethics and sustainability of materials, it’s important for customers to understand the measures taken by Nexus to ensure the materials they use are environmentally friendly, as such the ‘materials’ page outlines key specifications of all the core materials used in building a room.
Gallery
The gallery page is an opportunity for customers to see a variety of previously built rooms, with both interior and exterior photos, so customers can get inspired and imagine how a room might best suit them. The photos are arranged in a grid view. This allows the design to adapt well across multiple devices, as the rows can easily be switched to columns as the screen size narrows.
About
The ‘about’ page is a chance for customers to find out more about the company and features several striking photos of previously built rooms. The middle section with the photograph on the left has been created with the idea of a video eventually being placed here as and when one is produced. The page also features the most recent photos the company has posted on Instagram. This is a way of ensuring new images regularly appear on this page with no additional input from the Nexus team.
Contact
The ‘contact’ page features a simple contact form as well as alternative contact information, so customers can quickly get in touch with the Nexus team. The form has been designed to scale well when being used on mobile devices.
Creating the Interface
The interface for the Nexus Garden Rooms website was created in Figma. Each page was designed in a variety of size to allow the frontend developer to build the site to be responsive and be a great experience, no matter the device. The sizes used were requested by the frontend developer, who intended to use Bootstrap as the framework for the site. Many elements of the website were created as components in Figma. This was particularly useful when designing the configurator page, as I was able to create different varieties of elements with multiple states, such as the steps cards.
The Result
By creating a design that felt simple and stylish, with a focus on ease of use, the Nexus Garden Rooms website has launched to a wide demographic. Regardless of the customers’ ages and technical expertise, they should feel comfortable navigating the site and customising their dream room.