UX/UI Design,
Front-end Development
Dreamcatcher Bangkok Hostel
May 2018
Dreamcatcher Bangkok Hostel is an hostel, café and bar located in downtown Bangkok.
Their customers are mainly Western backpackers who comes for vacation alone, in couple or family.
The project was to re-design their website and make it more functional by focusing the user’s attention on the “book” call-to-action buttons.
I also added a food and drinks menu as the hostel has a café and bar and wants to develop their restaurant.
From UX Design …
Starting with User Persona research to define the profile of the users visiting this website, I then elaborate the Sitemap and sketched the lo-fi and hi-fi wireframes to fix the elements of each page and the interaction between them.
User Persona research
Sitemap
Lo-fi wireframe
… to UI Design …
After collecting the client’s contents (logo, pictures …), I decided to use the logo’s font to homogenize all texts and I determined the colour scheme according to a background image inserted at the bottom of each page.
I designed the page mockup using Photoshop and following my idea to have a clear layout on the page by adding spaces and dividers between sections.
Page mockup
Font used for the website
Colour scheme
Design creation on Photoshop
Page mockup
Font used for the website
Colour scheme
Design creation on Photoshop
… and Development
Once the design is completed, I built the site using WordPress CMS.
I placed a visible “book” button on each page, so the users can move inside the website freely while being able to book a room at any time.
I arranged all pages to make the website user-friendly and fully responsive on tablet and mobile devices.
info@alexdeplancke.com