Project Description
Hotel Riverton Redesign
User Experience | Information Architecture | Visual Design | User Interface Design | Desktop Web
Overview
Hotel Riverton menu organization, booking solution and social icons in 48h.
Hotel Riverton original homepage
Scandic webpage
Eurostars webpage
Orblogic
The Problem
One of our web customers has contacted us to make some updates on their website. They no longer like the booking mask (reservation system) position and shape and they want to update it in order to make it more prominent. Overall, they are not happy with the header layout. There are too many links and it all feels a little disorganized. They also want to update the look and feel of the social media icons and make them stand out.
The challenge
48 hours to submit the changes with a design report.
Static design only. No HTML or other build was required for this exercise.
Logo and other assets from the client’s website: http://www.riverton.se/en/
Research
Competitive analysis
After reading the brief I decided to investigate a bit and look for similar hotel webpages to check how they solved the issues the client has.
https://www.scandichotels.com/
Scandic is a Sweden Hotel chain pretty known around the nordic countries, they have the booking mask centered at the top of the page, right after the menu. The header has a big title emphasizing a service. They do have a very well organized footer with all the links the customer can access in case they need more information.
https://www.eurostarshotels.co.uk/
Eurostars has a clean menu and adds a see more button at the right. They also have a full size background image and a header with a search field in the middle of the hero shot.
Four Seasons also uses the more button at the right corner of the menu. They also have a drop down menu for the languages at the secondary top menu without the flag that cleanses the general look and feel.
This are some other web pages that I consulted to check how they apply some components and how they organize the information.
Ideation
To solve the overcrowded menu I maintained the 3 top links: Stay, eat, meet and condensed the rest of the links into a ‘More…’ button at the right top of the menu.
I moved the Booking mask to the bottom center of the header so the user can see it at a glance and it doesn’t disturb as it is not sticked.
I added a secondary top menu separated from the logo where I placed the social media icons and the languages selector.
The header was a bit lose out on the content showing only an image carousel, so I incorporated the welcome info and a read more that could lead to the ‘about us’ page.
I restructured the footer links into 3 columns: More, About Riverton, Customer Service.
Sketches and Wireframes
First I created a Mobile version with a full size header and a straight call to action at the top center of the menu to book a room.
At the center I placed a form to check the rooms availability and followed by the special offers and so on.
Then I realized that some of the issues that the client had needed special care on the desktop version so I moved into it.
Mobile version
Desktop version
As I pointed out earlier the social media is now at the left corner of the secondary top menu to make them stand out.
The main menu is now very clear as it only has the 3 top links: Stay, Eat and Meet including at the end a ‘More…’ button with the rest of the links.
Now the image carousel is full size including the menu and it incorporates a welcome title with a read more button to lead to the ‘about us’ page.
The booking mask is now at the center of the page right after the image carrousel.
User Test
User testing
I tested the first prototype with a user of 34 years old. Based on the findings of this test I added labels on top of the booking form and maintained the same fields and copy of the placeholders and call to action button.
I moved the footer columns prioritizing the information from the menu.
I also added a ‘Follow us’ copy on the social media icons at the secondary top menu and at the footer too.
Visual Design
The proposal has now a black secondary top menu with the social media and the languages selector. The menu is now having the background image on full size and the links are on white with a separator between them. When you press on More button a black dropdown appears and the link shows a golden underline to show the active link.
The header is now more functional including the welcome information and the Read more button that leads to the About us page.
The booking form stands in between the header and the next section with a bit of background. It now includes all the labels, fields and the same copy as the client had but in a white background so it stands out.
I maintained the next sections as they were since the client is quite happy with them but the first section had an issue loading the content, so I suggest to change it with a lighter video of their gallery. (since I don’t really know what was the content about).
The footer has now 3 columns with the information of the top menu and the additional links that the customer already had in a more structured way.
It also maintains the secondary top menu at the bottom in case the user wants to reach out the social media or change the language.
Final solution
