Nikoi and Cempedak
Re-design of websites for private luxury islands based in Indonesia
Nikoi and Cempedak are two sister luxury islands based in Indonesia. Known as one of the most stunning islands along Bintan, they provide secluded getaways with natural wonders and engaging activities for guests. Nikoi Island boasts itself as a family resort while Cempedak as a private resort for couples.
In July 2018, they consulted Edenspiekermann and Chemistry for a brand refresh and website redesign. I was involved in re-hauling the user experience behind the new website, restructuring the content and presentation of information to create a much more appealing, intuitive experience for potential guests navigating in the websites.
Redesigned website is not live yet
Existing Website - The Problem
Both websites were similar in their structures hence they had recurring issues. These were the main issues we highlighted when approaching the re-design.
Navigation structure - Cluttered with most links placed on the same level, no clear hierarchy which makes it difficult for users to navigate and find information that need
Disorganised content - Content was all over the place. Some information was in the actual section of the website, but most of the vital information was in separate downloadable PDFs. Some recurring content can also be repeated across sections, which is confusing. Users were expected to download external PDFs to be informed before making important decisions regarding their potential stay, and most users would overlook that or be deterred away.
Visual Interface - Not indicative of a luxury resort, unlike the marvellous elegance in the place
Overall, the cluttered and disorganised website was difficult to navigate, leading to a poor experience for users who are potential customers. The display of information was far from efficient. The small text boxes had no visuals in relation to the content and was more like a wordy information dump, forcing users to scroll extensively. The poor navigational structure required users to click through many sections in order to find relevant information. In addition, users needed to download external documents as key information might be there instead of the website sections.
Visual interface could also be improved with the use of a more elegant and clean display of content, and with more relevant typefaces and colours to their brand.
Re-design - New Sitemap
Together with Visual Designer Venus, our first step to the re-design was to look at how we could restructure the content to a better sitemap.
To approach the new sitemap, we had to formulate it based on our personas created. As a summary, our personas’ main priorities were accessibility, room amenities, facilities, and activities provided (especially for children).
In the proposed sitemaps, we categorised main navigational sections that were important, then placed subsections into the main groups based on relevancy - like “Getting There” into the main section “Our Villas”. We also added new sections like “Events”, “For the Children” which are important to guests but previously only in external PDFs. Lastly, we established cross-links between sister islands so that the relationship between both islands was highlighted - in which was also useful for users to determine which island was better suited for their needs.
Proposed sitemap and navigation structure
The next step was to visualise how the sitemap could translate into the actual navigation - hence I designed several navigational wireframes in which this was chosen:
To approach the wireframes, we had to lay out all the content (both website and PDF) on a Google Doc. From there, then I could understand in-depth the content and effectively re-organise them to the structure of the proposed sitemap.
For Our Villas, the existing website only had 2 villas listed, one-bedroom (1br) and two-bedroom (2br). However, there were multiple variations between the 1br and 2br villas. For example, in the 1br villa page:
Our one bedroom beach houses have over 100sqm of floor space. Our standard one bedroom has two bathrooms, one ensuite and one on ground level. Four of our one bedroom houses have a small bunk room downstairs suitable for two children, making them ideal for a family of 4. These beach houses only have one bathroom.
We broke down the villas into 5 types after going through the content thoroughly. After a lot of paper prototyping, this was my final proposed wireframe. For users to know which room suited their needs efficiently, a quick overview with statistics will facilitate the process.
Afterwards, users can click into individual villas based on the summary of statistics given of each villa. I had two options, but Option 1 was better as a banner gallery (Option 2) was not effective in viewing the room in detail with text is overlaid on it.
For Experiences, there were more than 25 activities offered on the island but only a handful were listed on the website with the rest in the detailed downloadable PDFs. Here is how it was laid out.
Hence, to redesign this segment, I had to list all the activities (based on the PDF) to post-its then classify them to the 3 categories ‘Land’, ‘Sea’ and ‘Children’. I arranged the post-its (top to bottom) based on popularity of activities.
I had to think of a visual way of representing the content - as it is faster for users to grasp information and also more enticing. Hence I followed the grid overview style as seen from the villas page.
After rounds of wire-framing, I settled with these 2 options as I felt the patterned grids were more dynamic which suits the vibrant nature of such activities. In the end, we chose Option 2, as a more regular patterned layout was more cohesive with the villas style grid.
For the rest of the website, layout of the pages were more straightforward and similar to one another - portraying information in visually enticing manner. Hence, I came up with a standard template that other pages could follow, whereby components can be mixed around.
Visual design explorations
Next step, I wanted to see how the wireframes could translate to visual design and hence experimented with some design directions. In the end, we went with Venus’ proposed direction instead but I was still glad to be able to explore how my wireframes could translate into visual design.
This was the first UX project I had outside of school, and it was really great as it taught me the importance behind my design decisions, and how had real impact to people (like clients, customers) compared to my personal projects. It also taught me how it is important to go through rounds of feedback and iteration, and never settle for a solution too quickly.