Topos Sofos
hotel website 2019
Product Design
Topos Sofos is a web design project created in the context of a Digital Design course. The aim of this project was to get familiar with the design process of webpages, by specifically learning how to tackle problems related to online booking in terms of UX design.
Task
My client manages a bunch of hotels around the world and has asked me to design the website of one of his newly constructed hotel's.
A Luxury Suites Hotel in Santorini.
• 16 luxury suites with
• High season: 1,000€ average price per night / Low season: 1,000€ average price per night
• Client wants to attract well-to-do Russian customers.
• The hotel is open throughout the year. Thus, he requested to focus on increasing the bookings during the periods of March-April and October-November. He was also open to ideas concerning special occasions occurring at the hotel's conference room.
• Hotel's restaurant bears the signature of an award-winning chef which has to be promoted. Customers should be able to make a reservation online.
Approach
Since this project was created to practice my web design skills, some of the steps stated below are not applicable. The design process is what matter here, though.
• Brief Break Down
• User Persona
• Competitive Market Research
• Site Tree
• User Flows
• Wireframes
• User Testing & Usability Testing
• Iterations / Redesign
• Final Designs
User Persona
I created a semi-fictional character based on my fictional client's ideal customer.
Who is she? What are her main goals? What are her main concerns, frustrations or pain points?
A user research on Russians followed. What are they looking for when browsing for holiday destinations? What activities are they keen of? Collecting all possible data in order to define the basic characteristics of the user I want to attract.
Competitive Market Research
The websites below are the ones I used to understand how others have managed to solve problems that may arise when designing a hotel website.
• Cavo Tagoo
• Scorpios Mykonos
*Inspirational Reference: Airbnb
Site Tree
The creation of a site tree diagram for my website helped me visualise how the pages of the site will be organised. Parent pages are shown above child pages, indicating the relationships between webpages and how they are accessed.
User Flows
Exploring all possible user flows related to specific tasks the users have to make was the biggest challenge of this project.
Visualising paths, examining entry points to finally lead the user to take a set of steps towards a successful booking.
All messy thoughts related to the checkout user flow started to untangle once I grabbed a pen and paper.
Wireframes
Working with wireframes helped me establish the basic structure of a page before visual design and content was added.
Exploring different page layouts and focusing on Information architecture and Card design were the main focus at this stage.
Checkout Experience
Alright, we might have created a good enough discovery experience for our user to be easily be able to find what they seek but what's next? Managing to keep them focused till the end of their journey and make their booking is not easy.
Visibility and transparency all the way.
Users need to be informed of what's coming next. Displaying the entire checkout flow up front is very important.
Thus, I've opted to display a progress bar / stepper throughout the checkout flow, so that the user knows what information s(he) has to fill at each stage.
• step 1: Booking information
• step 2: Personal details
• step 3: Add-ons
• step 4: Payment details
Cart info providing user's booking summary accompanies him/her till the end. Modifying the order option in the booking summary. Sign up is optional. And last, but not least, informing the user about what happens next. A "thank you" page together with an email with all important information where user can recall at any time.
Final Designs
Overall aesthetics of a website is not something we should neglect. I tried to suggest a branding identity for Topos Sofos.
Images which would create a look and feel that would make the site distinct and memorable. Minimal, but with a touch of vector design harmonically merged into lifestyle images.
At the end, it addresses to people who are keen of Arts or have a related background.
