Pink Shell Resort

 Understanding the Pain Points

1. What is the current problem they’re solving?

2. What is that as-is scenario?

3. Where are they experiencing the pain and frustration?

4. What effects do their pain have?

Pain Point 1: Resort Amenities

Users are spending too much time trying to locate key sections on the website. Based on survey data, we know users are primarily trying to browse the resort amenities, but the current organization makes it difficult.

BEFORE:

Currently, with 9 items within the navigation, there is too much overlap. We needed to answer a few questions before we recategorized this section.

• What's considered an amenity?

• Can we consolidate them to make this experience more streamlined?

Users expect to find all of the amenities under the “Amenities” menu item. Without taking a step back and reconsidering the resort experience as a whole, there would be a disconnect between the business and the users' experience. We needed to work with the Pink Shell team to consolidate of their offerings, and decide how to best sort this information.

AFTER:

We consolidated the navigation to only have four main sections: Rooms, What You'll Do, Offers, and Galleries. We used the "What You'll Do" menu item as the main item for browsing amenities, simplifying the previous design's navigation into one centralized mega menu dropdown. This resulted in less decision-making, upon landing on the website.

Pain Point 2: Resort Photography

Users are spending too much time trying to locate key sections on the website. Based on survey data, we know users are primarily trying to browse the resort amenities, but the current organization makes it difficult.

BEFORE:

While there were photos found throughout the old website, they were both scarce and scattered. Our users want to come onto the site and envision themselves within the resort experience.

Users were spending too much time looking for photos of specific amenities. When considering the older demographic, we wanted to provide an equally-engaging experience without requiring them to read too much.

AFTER:

We created a Galleries dropdown, where we presented the users with three options: Awards & Press, Photo Gallery, and Virtual Tours. With the clear design of this menu item and its dropdowns, users would feel confident knowing they are in the right section.

Pain Point 3: Browsing and Selecting Rooms

The rooms hub and pages are meant to highlight the perks, while simplifying the decision-making aspect of selecting a room. We want this section of the website to invite users to browse and choose the room that’s right for their situation.

Currently, the rooms webpages are simple and work, but the visual design felt old and inferior. With the dated background image and the low-quality photos used, Pink Shell felt like an unmaintained resort.

BEFORE:

Users coming onto this part of the website may be deterred by the visual design aspect and lack of trust-building content. This design did not optimize their image selection; this made it difficult for users to compare the different room types and immerse themselves within the rooming experience.

AFTER:

On the rooms hub, we wanted to make it easy to compare the rooms. We also wanted to feature resort testimonials, and provide the option to view the resort gallery and explore resort amenitities.

For the individual room pages, it was imperative that that we featured optimized images that users understand are photos of that room. Also included is a dropdown that allows users to quickly jump to other rooms.

Pain Point 4: Making a Reservation

Making a reservation should be very simple. Users should be able to easily input their desired dates of stay, then be shown the available options for those dates. If users prefer an alternative way of booking, any supplemental method should be provided as an option as well.

Currently, there is a bottom-of-screen booking widget that stays sticky as the user scroll. In the widget, there are form fields and dropdowns for the check-in and check-out dates, number of adults and kids, promo code, and a large “Make a Reservation” button.

BEFORE:

While the booking widget is pretty standard, there are subtle pain points described by users. One glaring problem was that the promo code option on the widget caused early errors within the system, creating uncertainty for how to proceed with a promo code. Also, the lack of a noticeable alternative booking option led to some user frustration.

At this point, the user has already decided that they’d like to give them business. Because this is the last step for conversion, it’s imperative that this booking bar works seamlessly.

AFTER:

In the redesign, we wanted to include only what was necessary on the booking widget to continue with the checking out process. We moved the promo code field to a later stage in the checkout process, and included a phone number for those users who were more comfortable booking over the phone.

Designing the Solution

SITE MAP

To optimize the website structure, we had to take a step back and understand what our primary user would want to see. By tending to our main personas, we learned that these users wanted to be able to easily see all amenities, browse room options, and view resort photos. We, then, went back to their website and recategorized and reorganized everything according to these users' goals.

After balancing the user’s needs with the goals of the stakeholders, we simplified the main navigation to only have four menu items, and implemented the use of a mega menu to address larger categories.

Creating the Visual Concepts

Before we started working on our wireframes, we created two hi-fidelity concepts of both a home page and an interior page (including mobile designs) to show the client.

CONCEPT A:

CONCEPT B:

Wireframes

Once we got the approval to move forward with one of the concepts, we began designing wireframes, reusing elements from the concepts. To efficiently wireframe out the different webpages, we batched similar pages together and made minor adjustments to each page based on content.

Visual Design

With our final designs, we wanted to create a web experience that properly matched the resort experience. We also ensured that the website met ADA considerations, and tailored our designs and assets to speak to our target demographic. Ultimately, we wanted to create a cleaner experience, ensuring all webpages had a strong purpose as well as a thought-out SEO strategy.

Conclusion

Once all of the pages were mocked up and put onto Invision, we showed the client the prototype, to which we heard really great things about the website. Designs were handed off to our development team and shipped once the coding process was finished.

On a fun note, the visual aesthetic we used for Pink Shell was repurposed for their sister resort, Sandpiper Gulf Resort, another project we designed and managed.