Whilst studying an area of UX design which I was fairly new to, Information Architecture, I was offered the opportunity to redesign a website or intranet as an exercise to consolidate my learning. I jumped at the opportunity to apply my knowledge and test my creativity, and I started searching for a subject that was suitably complex. A medium size bathroom company that sold plumbing and bathroom furniture had recently been brought to my attention by two domain experts who were refitting their bathroom. After examining the company’s website I realised that I had quickly found myself a project!
The landing page of this website definitely grabbed your attention, but as a user I was left in need of direction.
One of the main problems with the existing website for this company was that it was focused entirely on building an impression with no prior thought to business exchange. Fashionable and cool design with almost no usability meant they were actually achieving the exact opposite of what these developers had intended. With cryptic labelling that left users unable to navigate towards their desired products or unable to return to previous selections, the only awareness they were building was not to return. I turned to some other plumbing sites to see if I could glean inspiration from alternative approaches Interestingly however, bathroom plumbing websites all seemed to follow a similar pattern of design. Despite the complexity of choosing your bathroom products, very few sites offered the user help in selecting their product beyond aesthetics.
User Research
I decided to start from scratch and talk to my domain experts; two individuals who were refitting their bathroom and one sales woman from a local bathroom plumbing store. I used unstructured interviews with open questions because I didn’t want to limit the scope of the discussion, I wanted to hear about every single concern, interest, and desire that they had and that meant leaving my preconceptions behind.
Unlike my project with the Brixton Customer Centre where it was feasible that many people had the same problems and wished to complete tasks with the same convenient solution, I felt that this topic was slightly different. I became aware from my interviews there is a huge degree variability between users who shop for bathroom plumbings. Some buyers want to know every single specification for a product and others only care about aesthetics. Some users like to have visual tools to help them view the product in the context of their bathroom, whilst others are more concerned by information like supplier reputation. I decided the best way to combine this information was to use a domain model. This would help me determine the key concepts that emerged from my users research and provide direction for future design.
A domain model to represent considerations when buying bathroom plumbing and furniture.
Conceptual and Detailed Design
Although I was designing for a huge variety of individuals, with different tastes and concerns, I also understood that all buyers are united with the same restrictions – they can only buy plumbing products that will work in their bathroom. Indeed, purchasing and fitting plumbing supplies which are not suitable for the water system of your home and the supply in your area is extremely costly. This meant my design had to allow for the maximum degree of choice and flexibility within the restraints of each individuals home, and give the perception of ease and flexibility where complexity was involved.
I decided that users needed to tackle the specifications complexity first. This would avoid the much greater frustration they would experience when, after searching for hours, they find a product they love which isn’t compatible with their bathroom. Importantly, I knew I was designing for the non-expert (many plumbers provide a ‘fit-only’ service now which means home owners have to select and buy the plumbing supplies themselves). So that any other information on the site was easy to find, I used card sorting with my domain experts to determine how the menu should be labelled.
After lots of research, I designed a guided process with layman questions to help buyers determine the plumbing system in their home. Through the process and at the end of the decision tree, users are educated about different plumbing systems and the specifications that are advised in their home. Then users can specify further specifications and choose from a selection of collections which they know will work in their bathroom.
In order to consolidate the design for my sitemap, and to ensure that all user requirements were met, I designed a user journey to depict the typical behaviour of a buyer visiting the site. I really wanted to adopt the mentality of the buyer on this exercise, so as well as using my user research I thought about the concerns I would have when searching for a plumbing product. I expected users would want to move back and forth between pages easily to allow comparison between products, and that some users would be registered to the site already (therefore the details about their home would already be saved) and others would need to complete the initial questionnaire. It helped me to map each decision or node in the user journey onto a position in the site map so that I knew every outcome would be covered. This reassured me that all user requirements were met.
In a similar method, I paid very close attention when designing my wireframes to ensure that every element of the user journey and sitemap was identifiable. I knew that this would ensure maximum usability and an omission of any navigational feature with a linear structure such as this would be extremely frustrating for the user. For this reason I added plenty of navigational options, such as breadcrumbs and links, and signposted users by making ‘forward’ navigational elements more visible. Although ‘search’ was available, I didn’t emphasise this feature because I wanted to encourage users to take the linear route through the website so that the selection of the plumbing products was as easy as possible. I was really excited to include the visual design additional features like ‘mix and match’, which I had originally developed the idea for from user research.I think they really finished off the site and give the users the flexibility and professional advise they were seeking.
This is an example of the type of question users will receive in the initial questionnaire, found under ‘Lets Start Exploring’. The page is uncluttered to give the perception of simplicity, it provides a clear start and finish to keep users motivated, and above all, the questions are user friendly and easy to answer.
I tried to include features which would helpful to the buyer on this page. For example, in addition providing large images that make the products easier to view, I added a specifications comparison table. On the right of the large images there are products which the user has saved to their saved list called ‘My Bathroom’. At the bottom of the page are suggestions for products which fit the user’s search criteria but which they haven’t seen. This list will adapt itself by learning what the user is selecting and providing the new features they are searching for.
Evaluation
Like for the project I worked on for the Brixton Customer Centre, the main purpose of my evaluation was to determine usability problems. Therefore, I observed two participants as they completed chalk marks of the site who gave me their predictions for what was behind navigational elements. Each participant was able to complete the tasks with a high degree of accuracy which I found pretty satisfying having conducted an initial card sort with fewer people than I had hoped for.
As shopping for plumbing products can be fairly complex and frustrating, I wanted to ensure the website had a very positive user experience with the site. Although the feedback from participants was positive, In future evaluation I would compose a questionnaire with closed questions such as semantic differential scales to assess whether the site meets certain user experience criteria. I would use this information to inject more character into the site and make future versions more playful.