Goals
The first week was spent identifying the requirements for the new website and reorganising the structure of content and pages in a written document.
Website goals:
- A modern look and feel
- Consistent design across all pages
- A responsive layout
- Clearer navigation structure to improve user experience
- Additional features to make searching for rooms easier, such as filtering by location and price
Design
The aim was to strike a nice balance between professionalism and approachability.
I designed for mobile first as the old website did not use a responsive layout. As mobile makes up the majority of browsing activity on the web these days, it was important to design for smaller screens and then simply scale the design up for larger devices.
Sketches
Mockups - Design Exploration
Colours
I chose a new set of colours that were approved for use on the website only as a complete rebrand was out of the scope for this project. Some of the colours found in the logo/brand were not suitable for text or backgrounds due to lack of contrast, being overly-saturated or lack of visual appeal when used together. I aimed not to deviate too far from the existing colour scheme.
Room Listings
Once the main pages were completed, I moved on to the more complex part of the website where users can search from a list of rooms and view their details.
After analysing the pages and discussing with the team, we found problems with the implementation of this page:
- The search page loaded all available rooms at once on a single page, leading to slow load times and unnecessary server load
- Search list entries showed too much information upfront despite having individual pages for each room/property
- Viewers were often missing key bits of information despite it being displayed because of visual noise or sub-optimal layout
Room Listing Mockups
Several layouts were tested to ensure important information was easy to find.
