Glawning
UX Design ︲ Web Design ︲ Web Development
Responsive Web
2022
I spent the summer working for Glawning, a Harrogate-based manufacturer of luxurious driveaway bell tent awnings. As the business was growing and expanding to North America and mainland Europe, they hired me to redesign their website. This case study demonstrates how a website's UX can be significantly impacted by its visual design alone.
The Challange:
The Glawning website was done very quickly by the founder of the company who didn’t put much love into it and hadn’t been updated in a while. He mentioned that there were several known customer pain points that needed to be addressed alongside our overall goal to improve the user experience, modernise the aesthetic and try to get as many people as possible to buy the tents. As the company was due to expand to other countries in the coming months, I had to work with what was already there and change the front end into something new. The website also needed to be responsive as there isn’t a separate mobile site.
Before I did anything I looked at the old homepage and try and figure out what was working, and what wasn’t. Unfortunately, the old website wasn’t hooked up to Google Analytics, so I didn’t have any idea of how it was being used. Due to this I took the old-fashioned approach and did some quick customer interviews. This provided me with useful insights such as some users finding the website difficult to read on mobile phones, other users thinking that the website looked dated and cluttered and the majority of those interviewed could not find the content they were looking for.
The first two customer pain points above were relatively simple problems to solve, but the third one required some extra thinking. Because of the amount of information on each page, the website was quite busy and cluttered, therefore making it difficult for users to find what they were looking for. One of the first things that needed addressing was the content and how to best present it so that users could quickly and easily find what they were looking for.
Design Toolkit:
A Modular Approach:
Due to the success of the preexisting Glampfest website and the need for me to work with existing website elements, I decided to stick with the modular approach that was already in place, prioritise the modules and sketch out ideas for each one and how they may be laid out on the page. I also came up with ideas for some simple new elements to improve the page. Here are the main modules:
- Home
- Bundle builder (new)
- Buyers guide (new)
- Our events
- Blog
- Support
I frequently like to sketch out components for new interfaces on paper, cut them out, and stick them to a larger sheet of paper with Blu-Tack. It makes it simpler to rearrange items and alter specific elements of the user interface without having to repeatedly redo the rest of it.
We started with rough sketches of the page's basic layout before moving on to more precise designs for each module.
Designing the Visuals:
Now that we had a website blueprint and content to work with, it was time to push some pixels around. We wanted the design aesthetic to be minimal with a strong focus on content and typography. A lot of the hard work had already been done creating the wireframes. Now it was simply a matter of experimenting with colours and layout and also creating the image assets.
According to research conducted at the beginning of the project, the majority of users visit the site in order to buy a Glawning, so it was important to make that process as simple as possible for them. The homepage was originally very cluttered, however, I simplified the page by categorising the different types of products Glawning sell - i.e., awnings, stoves and roof tents. This allowed users to simply click on the type of product they were looking for and be taken directly to the page with all of the options on. The navigation bar remained fixed to the top of the page for users that aren’t as tech savvy, ensuring that they can still navigate to different sections of the site with ease and accessibility. I thought it would be nice for the navigation bar to follow them, however, when implemented, it got in the way of the content.
The research done at the start of the project also told me that most people buying a Glawning for the first time create their own bundle with everything they need to start Glamping i.e., tent, stove, etc. Looking at the original site the bundle builder was very confusing and seriously needed to be simplified to make the users lives easier. Speaking to current and potential Glawning customers they said that sectioning each thing needed to start camping would not only make it easier for them but would also help understand what is needed to stay in one of these tents. Based on this feedback I decided to go with this approach. Each product type was categorised in steps beginning with the user selecting a Glawning. Under each category are all the available products with the user only needing to select one option and choosing their size. This is done for all the available options until the user has built themselves a bundle so as soon as it arrives, they can go straight to Glamping.
For most people buying a Glawning is a new experience and one that comes with risks. That is why I felt that it was vital to give the customers as much information regarding there Glawning as possible. Therefore, I decided to create a buyer’s guide with all the relevant information needed to look after, put up and choose a Glawning. Like with the other pages, I decided to create a “Buyer’s Guide” with all the relevant information put into four categories. These consisted of, “What to Look for in a Driveway Awning”, “A Guide to Campervan Awning Fabrics”, “How to Fit a Driveway Awning”, and “Choosing your Ideal Glawning”, which allowed the user to quickly get the information they needed. Each of these pages contained lots of information to help the user in a clear and easy-to-read format. Videos were also included on these pages to help users when text descriptions were inadequate, particularly when attempting to assist users in putting up a Glawning. They can watch one being put up and follow the steps.
Glawning not only makes amazing tents but also runs and attends various events throughout the year. I felt that we should do more to promote the events on the Glawning website. When conducting my interviews, I realised that many people did not know about the annual festival they ran, with the majority saying that they would consider attending said festival. Therefore, I created a “Our Events” page that gave users a chance to explore the range of events run by the owners such as, “Glampfest” and, “Glampout”. This page not only included links to the official websites of these events, but I also included an event calendar for all the events Glawning would be attending throughout the year to allow guests to come and say hello.
A Great Success:
Once we were happy with the new design above, we A/B tested it against the old one on a small portion of our user base. Much to our delight, the new design worked wonders, performing better than the old one in key areas. Sales have increased and the company has received more positive feedback since the website was relaunched a year ago. It's always pleasing to see actual customers using a product you've created, and I hope they continue to do so for a long time.
other Work
UniRoomy
UniRoomy
UniRoomy
