My first Project as a Designer at CAF

Phase 2 Homepage design

Phase 2 Homepage design

My first project as designer at CAF was for GLH hotels, an owner-operator hotel company with a few hotel chains and awesome luxury hotels in London. The idea was to build a mobile-first room booking app that would enable users to view, choose and book the exact room in which he or she wanted to stay.

I was thrown in head first. The team had already made an MVP to test the idea, which was called Choose Your Own Room (CYOR). A simple site optimised for mobile (still looking good on desktop) where you could find rooms, see photos of the rooms and book a stay.

After proving that the initial concept worked, GLH hotels wanted to improve the offering by redesigning the offering and adding collections. This would help the user find exactly what he or she wanted. Instead of being given a list of hundreds of rooms to choose from, they could narrow their choice by using collections like ‘For business’, ‘With a view’ or ‘On a budget’.

 

Coming onto the project I needed to do a few things to understand what was required. I needed to digest Phase 1 and find out the needs of the client and what they wanted to achieve. I also had to gather all the tips and tricks from the CAF team who had worked on the project so far, developed a successful MVP and begun to shape the UX and UI.


Process

The next couple of months were a bit of a blur. We were designing, developing, coding and presenting weekly updates back to the client. We were always thinking holistically about the entire system, keeping a Marvel prototype (which the client loved) up to date, and integrating new ideas as and when they materialised.

Because of the speed of delivery that was required, we had to be able to think on our feet and prioritise aspects of the project for best results, fast. Mobile was of greatest import. So we started with mobile and worked back; creating mobile designs that could easily be translated into desktop versions by the development team. We could then work iteratively to update and optimise desktop designs as the project evolved.

I found that printing out site maps, with high fidelity designs, on large scale, helped the team to understand what I was thinking and where the project was going. It gave everyone visibility across the project and united the team by mapping out the journey that we were all on together.
 

Site map with high fidelity designs

Site map with high fidelity designs

Towards the end of the project I found it extremely useful to work on my own design sprint board. This helped even more with visibility and with unearthing any roadblocks. I made sure everyone could check it out, and ask any questions they might have. I could then shuffle things around, amend priorities or add to-do’s easily – thanks to good old fashioned teamwork.

Design Sprint Board

Design Sprint Board

Top Tips that i'm taking to my next project

Start

     Creating a stylesheet early and update it as you go, making sure everyone has access to this. —  Zeplin and Craft-Library have been recommended to me and I will be trying them on my next project.

     Using a great change management system for use between the designer and development team. —  Sounds like Zeplin or Craft-Library would also fix this!

Learnt

     Get the wireframes and UX right at the start, with sign off from developers! THEN prototype lo-fi wireframes asap, test and repeat until you are happy THEN get sign off from client THEN and only then start designing.

     Not to show the client the development site, it will only lead to more confusion and unnecessary questions.

 

Continue

     Constantly talking with the developers and BA about your designs and ideas, how they will be implemented? If there is anything you can do in your design to make the developer's life easier? Sometimes talking through what you are doing and why will help you find solutions or even problems.