CASE STUDY: VIVASTAY WEBSITE REDISIGN. 01. Introduction

Transcription

1 Almir Atlic: Vivastay, Case Study Page 1 CASE STUDY: VIVASTAY WEBSITE REDISIGN 01. Introduction Vivastay, a leading independent travel operator providing worldwide accommodation with strong focus on customer service, approached me with a view to completely overhauling their existing website. The biggest concern was that the website was not converting as well as they expected and that overall look and feel was well outdated and inflexible. Client had a limited budget and restrictive content management system. Our mission was to improve the number of site visitors who contacted the company to make a booking, have a pleasant online experience and to update the site to be robust, flexible, international, elegant, and easy to use. Without big budget client decided not to conduct usability testing, so we conducted an expert review. I and main stakeholder, Danny, stepped through the website, imagining we were customers wishing to make a hotel reservation. Figure 1: Vivastay homepage, prior to redesign

2 Almir Atlic: Vivastay, Case Study Page 2 We have observed the following: We didn t have right information at every stage of the process. It was not an easy to understand how to fill in the forms Website did not make it clear what was happening at every stage Overall look of the website did not give necessary confidence This was an eye-opening process, as there were plenty of places where it was extremely unclear what had been selected and what the user needed to do next. Having identified a number of key usability issues, we drew quick win improvements onto the existing website projected onto a paper. This was a simple way of collaborating on design decisions. The design improvements were made to the site. Once the revised site was live, we conducted a usability test and found users to be having little difficulty using the site. Additionally, statistics from the revised site showed improved conversion rates. 02. Generating Ideas We dedicated one day for an intense period of ideas generation. We had lots of thoughts on how to improve online conversion and we noted everybody s ideas. We went through several activities to document these ideas, spent a lot of time sketching those ideas and surrounded ourselves with printouts of competitor sites. It was a fun day and we focused on key user tasks for the new website. Figure 2: Example of sketched user flow

3 Almir Atlic: Vivastay, Case Study Page 3 Figure 3: Examples of sketched main pages. First is the home page with right hand sidebar and second is with left hand sidebar Figure 4: Examples of sketched search form

4 Almir Atlic: Vivastay, Case Study Page 4 Figure 5: Example of detailed sketch of hotel info page

5 Almir Atlic: Vivastay, Case Study Page Information Architecture and Wireframing After the workshop we had general agreement for the next the stage to come: wireframing key site templates. We began with a sitemap to establish the site information architecture. High-level navigation and required templates flowed from this. I made wireframes for some key elements in the process of booking: home page with booking form, result page with list of hotels, selected hotel page and booking form. After initial design where we had sidebar on left side, client felt that it would be beneficial to break down the layout on homepage to have sidebar on right hand side. Figure 6: Examples of user flow

6 Almir Atlic: Vivastay, Case Study Page 6 Figure 7: Homepage wireframe

7 Almir Atlic: Vivastay, Case Study Page 7 Figure 8: Search result wireframe

8 Almir Atlic: Vivastay, Case Study Page 8 Figure 9: Hotel information page wireframe

9 Almir Atlic: Vivastay, Case Study Page 9 Figure 10: Booking form wireframe

10 Almir Atlic: Vivastay, Case Study Page 10 Graphic Design I worked with the stakeholders to understand the essence of their brand and the online presence the new site should reflect. It was important that new design fitted seamlessly with the brand. New website was radically different from the old version, but stakeholders accepted it because it was classy, and had distilled the brand personality. Figure 11: Homepage design

11 Almir Atlic: Vivastay, Case Study Page 11 Figure 12: Search result design

12 Almir Atlic: Vivastay, Case Study Page 12 Figure 13: Hotel info page design

13 Almir Atlic: Vivastay, Case Study Page 13 Figure 14: Boooking page design