Case studies

Improving the user experience of a budget hotel chain

Starting again from scratch is not a good strategy. Even if the quality or the execution of a brand is a little off, too big a change is a traumatic.

Team
Graphic designer
Copywriter
Developer
Designer and front-end developer
What I did
Visual design
Content design
Front-end development
Project management
Year
2018
Duration
5 months
Client
FCD Hotels
Agency
Blue House Design
Websites
Inn on the Lake
King Charles Hotel
FCD Hotels
Budget
£4,500

The previous website had a pretty clear direction. Serif typeface and large, impactful images. But what it lacked was some judgment. For example the some photographs were professional quality, others were not.

The team and roles

I was the lead designer and front-end developer managing a multi-disciplinary team of one developer, copywriter and graphic designer.

Given the very tight budget we worked to prioritise what we could build that would have the most impact.

Something the previous website also failed at was things that looked interactive but were not. There were cards advertising other parts of the business, but there was either no link at all or a tiny single piece of text. To make the site easier to navigate I used large cards and images and wrapped the link around to make a large touch target.

I wrote a custom javascript booking form because it wasn't really a form. Instead the data gathered was happened to a URL as a parameter so that the actually booking system could pick them up with their API. Javascript was an enhanced solution as the book was link. Should JS fail the link would still get the user to the booking system. Ok there choices they entered would not work, but if they had no JS the booking system would not work anyway.

I also started to change our design process. Up until then the expectation was to create a single mockup of the home page and use this as a basis to "design" the website. But often ignored the complexities present on other pages, offloading the design work onto development.

Instead I created mockups for the main page types. I presented these to the client in a document to compare before and after to show design thinking. It's never just about doing the design work, but also communicating with people they understand to.

Shared branding It's never just about doing the design work, but also communicating with people they understand to.

Making dull photographs interesting

Everybody loves photography. But the way photography often gets used is that it is just plonked onto a page. This can work, but typically only if the image is of standout quality. More often photographs are ok as shot, but what turns an otherwise so so image into something better is how you frame it.

But something I learned long ago was that you don't have to be reliant on the photograph itself. You can make an otherwise dull image dynamic by changing the composition or what is around the image.

Now admittedly this was a slightly happy accident with this design, but I found that cropping the images portrait yielded a much more interesting photograph.

Likewise adding an easing-gradient was not only to aid contrast for overlaid text but also to add interest. To make the image seem more interesting than it really is.

I made use of background-position to tweak what part of the image was revealed. There was also a consideration that the images may switch between portrait and landscape, but in the end they were all portrait so the image itself was cropped to improve performance.