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.

CONTACT ME

Phone  +66 81 817 2562

Baan Chan Condo, Thonglor 20, Sukhumvit 55, Klongon Nua, Wattana, 10110 Bangkok, Thailand
(visit by appointment only)



 
 

 

Baan Chan Condo, Thonglor 20, Sukhumvit 55, Klongon Nua, Wattana, 10110 Bangkok, Thailand
(visit by appointment only)