Update: As of 1/2020 paradisewithaview.com is no longer ☠️ R.I.P.
OVERVIEW
ParadiseWithAView.com is a vacation rental website offering privately owned condos in Waikiki, Hawaii. I was tasked with redesigning the site while studying UX design at DevMountain. I am not affiliated with the website or DevMountain. This project was completed over the course of 1 week in February 2018.
Personally, I appreciate the vaporwave aesthetics and web1.0 vibe. If you’re on a desktop or laptop you probably spent several minutes mesmerized by the text trailing the mouse pointer while wondering what the heck the site was about. If you’re on a mobile device, it’s worse.
It’s clear that PWAV was designed by a non-expert web developer (probably the condo owner or a friend) sometime in the 1990s. It’s also clear that it has not been updated. In spite of the cluttered layout, confusing content, and frustrating navigation, this site continues to attract visitors. To understand why I believe this site remains successful, and how it could be improved, follow my journey below.
Planning
My first priority was to understand the website. I started by performing a content inventory. The site contains mostly photographs related to 4 condominiums available for rent: The Royal Garden 1,2,3 and The Pacific Monarch.
The goal of the site is to allow users to book a reservation online in one of the four condos. Users can learn about each property, view a calendar with booking availability, and call or email the owner. There’s even a 30% discount if you book online. But, as we will see…booking online with this site is literally impossible!
DISCOVERY
I needed to understand what options users had when navigating the site. There are 7 total pages and 4 distinct journeys a user can make. I sketched them out below.
User Flow
SWOT Analysis
Strengths
- Traffic: The site remains live and continues to generate revenue for the property owner (as evidenced by VRBO.com reviews and availability)
- Design: Although the site breaks almost every rule of good interaction design it remains appealing to the main demographic. Visually, the site features a lot of pictures which (quality aside) are nice to look at — either because they feature beautiful views of a tropical island resort, or because they haven’t aged well and provide some entertainment value. Finally, contrast. The black background with bright yellow, blue, green, and red text is easy to read.
- It’s erm…memorable.
Weaknesses
- Design: As stated above, it’s not all bad. Just 93% bad. Photos are poor quality, the copy is poorly written and often pasted over images. Images on top of images. Typography is in several different fonts and colors. It’s unprofessional at best, seizure-inducing at worst.
- Information Architecture: The content of the site is disorganized, hard to discover, and requires a lot of mental energy. Nearly everything looks clickable, almost nothing is.
- Usability: Clicking on the calendar redirects to a page with a phone number. Clicking the E-Mail link redirects to a page with a long message from the owner warning you to E-Mail them in case of EMERGENCY only. Nowhere on the site can you book a condo — even though the largest piece of text on the site reads: “Book On-Line Here.”
Opportunities
- Better visual design
- Better organization
- Higher quality images
- Mobile compatibility
Threats
- None. This site is in a league of its own.
User Research
I did not have access to actual users of this site. I created a provisional persona based on the design of the site, interior decorating style, pricing, my own knowledge of the timeshare market, and the location of the properties. I deduced that the typical user(s) of this site are retired couples on a budget.
Digital immigrant: Owns an iPhone 7
Vacations in Hawaii annually
Doesn’t mind that the website or condos are outdated
Has booked with PWAV in the past
Deteriorating vision
PLANNING
This site is past its prime. The design, the properties, the property owner, and the users are in their dotage.
After spending several hours personally exploring the site I came to a few conclusions that might extend the life and increase the success of PWAV:
Mobile Compatibility
According to Zenith, mobile devices account for 75% of internet use. We can assume that the percentage is lower for our user’s demographic. Even if 2 out of 3 visitors to this site are on mobile, a redesign should focus on mobile/responsive design.
Improved Navigation
A conventional navigation scheme, using a hamburger menu for mobile users would make this site much easier to navigate.
UI
Eliminate the clutter
Booking Capability
The site emplores visitors to book online. Doing so will save you 30%. It’s clear that the owner wants you to book online (and that VRBO is somehow involved) but does not make it clear how to book.
DESIGN
My first thought: burn it all. I felt like the site was so bad that if I just did the opposite of everything it would be a major improvement. For instance:
- Change the black background to white.
- Change all colored text to black.
- Eliminate 80% of the images.
- Rewrite all the copy
I started designing my wireframes and mockups for desktop. You can see that I changed the homepage dramatically. Instead of a harsh black and neon-like color scheme, I went with soft greens and greys over a white background.
The layout made it a little easier to understand that:
- 4 properties were being offered for rent.
- There is a navigation menu at the top.
- Copy explaining the purpose of the site along with information related to the location.
PIVOT
At this point, I was pleased with the direction. It was clearly better than the original. I went to bed happy.
I woke up at 2 am feeling like I had forgotten about the user. This redesign project had become personal. I was thinking about what I wanted the site to look like. I was not thinking about the business owner or the users.
Something about this site was working. The owner kept booking the properties and the users kept coming back year after year.
I scrapped my first idea and started over with the idea that PWAV worked because it was familiar. If most of the site’s visitors were returning customers I didn’t want to shock them or lead them to believe it was a different site or under new ownership. There were memories tied to this site. And I wanted to honor that.
The Essentials
Upon reflection, there were 3 important components to this site:
- The properties: The location of the properties, layout, images, and amenities.
- Reservations: Availability, price, and booking.
- Visual Design: This is what makes PWAV memorable and familiar.
Style
I wanted to preserve the original color palette. I used the SF Pro font for the main copy because it’s easy to read and is familiar to iPhone users. Bradley Hand was chosen for the site title, labels, and calls-to-action as a way to honor the site’s playfulness and relaxed mood.
Main Components
PROTOTYPING & TESTING
Final Hi-fidelity mockups were prepared in InVision for prototyping and testing. I had a few friends follow some basic instructions (i.e. book Royal Gardens 3 March 8–16 for 3 people). Everything worked as intended. It took an average of 90 seconds to complete the task. I also asked participants what they would do if they couldn’t complete the task and all of them said they would want to contact somebody for assistance, then found their way to the contact page in the navigation menu.
Feedback
I had access to 18 other student designers. So, I got some suggestions.
- Reduce the background darkness from absolute black to something slightly less dark.
- Use a tighter grid to align images and text.
- Add more copy to some of the images.
Result
This walkthrough video gives you an idea what PWAV might look like on a mobile device.
I assume most users are return visitors looking for information on availability, showing it off to their friends, or booking another stay — and they’re doing it on their smartphones.
It should be familiar to them, much easier to use, and even enjoyable.
You can view and interact with this prototype here.
CONCLUSION
My intention was to redesign PWAV to look like a modern responsive website for 2018. I took some time to reflect on my initial design decision and asked myself if the owner and users of this site would be happy with my choices…and the answer was no.
The individual who designed this site may not have been a professional designer or web developer. But, as a 20+ year-old DIY web design project, PWAV was. respectable. My initial disgust with the site slowly faded the more time I spent exploring it. I empathized with the users, tried to appreciate it for what it was, and checked my ego.
The truth is, I like it. I like the colors, I like the innocence of it, I like that it’s amateur and that it’s still around. I like to think if the owner ever saw this project, he or she would approve.
Aloha. Thanks for reading!
