top of page

Project:
Moonraker
Island

 Brief 

This project was created for a class in the USC Iovine & Young Academy graduate program, focusing on Digital Product (UI/UX)  Design.


The goal was to design and prototype an app for a fictional resort of our choosing and imagination. The app design needed to fit with the concept and theme of our resort, and we were required to include certain features like horizontal scrolling, overlays, a hamburger menu, and a scrollable map.

I chose to create Moonraker Island, a concept that I would consider to be my dream resort, on a fictional island in my favorite corner of the world (the San Juan Islands). 

 The Problem: 

How might I create an app that will convince the customer to choose and book Moonraker Island?

 Concept 

"Nestled on Moonraker Island, our (hypothetical) luxurious glamping resort invites visitors to seamlessly reconnect with nature, all while indulging in the lap of comfort. Tailored for discerning families or groups seeking an extraordinary retreat, Moonraker Island beckons those with a taste for luxury. Sustaining the impeccable allure of Moonraker comes at a cost, and as such, the experience transcends the ordinary with a price reflective of its unparalleled offerings."

User Research & Problem Space Exploration

Moving into the exploration of my problem space, the question of how I could convey the inherent magic, beauty, and serenity of Moonraker Island was at the forefront of my mind. I felt that if I could effectively do this, I would be much closer to accomplishing my problem statement. 

To better grasp what makes a resort booking app effective and appealing, I conducted research online to identify the key features that users find compelling when browsing for travel accommodations such as hotels, resorts, and Airbnbs. One aspect consistently stood out as crucial: compelling photo visuals.

Compelling photo visuals play a pivotal role in the success of a resort booking app for several reasons. They serve as the primary means for users to visually assess the quality and appeal of the accommodations they are considering. High-quality and enticing photos can evoke emotions and desires, effectively convincing users to book a particular resort. Additionally, compelling visuals can help users imagine themselves in the space, creating a sense of anticipation and excitement for their upcoming trip. Furthermore, in a highly competitive market, striking visuals can set an app apart from its competitors, leaving a lasting impression on potential users.

With this in mind, I wanted to move forward with researching what my specific target audience would find to be compelling in their photo visuals. I am most likely not trying to convince my users that they want to book this resort over an all-inclusive resort in Cabo. My users and potential customers are in a specific niche, and are most likely looking at resorts that are similar to mine (luxury, rustic, outdoor-centric, retreat/summer camp style resorts). 

In order to better understand my specific user, I needed to consider the likely motivations behind them seeking out a resort like this one:
 

  • To escape "real life"

  • To unplug

  • To immerse themselves in beautiful surroundings and nature

  • To feel relaxed and rejuvenated

  • To enjoy wholesome activities (for many, with their families) 


I needed to choose visuals that would appeal to this specific user's desires. For help with this, I explored other similar and successful resort websites to get an understanding of what kind of photo visuals they offer. I also considered what I wanted my user to think and feel when opening my app, and kept this in mind during my research. 

​

Based on my users motivations, I know that I want them to instantly feel relaxed upon opening my app. I want my app to instantly communicate the serenity that is Moonraker Island. 

 

With a better understanding of my problem space and my user's motivations, I moved on to the next phase of my project: solution building. ​
 

For the color palette, I knew that I wanted to work with earth and sea tones. I wanted the color palette to be relaxing to the eye, and to remind the user of nature. This color palette achieved those goals for me. 

 Wireframing 

 Color  & Typography 

For the typography, my aim was to opt for a typeface that embodied simplicity and clarity. I also wanted a blockier Sans-Serif, that would be complemented by a higher tracking, to give a sense of luxury and refinement. 

Due to the shorter timeline of this project, I created minimal wireframes, and focused on just creating wireframes for screens I I felt the most need to plan out, and didn't yet have a clear plan for in my head. This ended up mainly being the booking process. 

 The Solution (Prototype) 

Home Screen

Based on my research, I knew that I wanted the customer to be immediately transported upon opening my app. I wanted them to feel instantly relaxed, and to have the serenity and beauty of this island oasis communicated to them efficiently. 

I was inspired by the Calm app, which does a remarkable job of transporting the user upon the opening of their app. They play a looped video of a serene scene (of the user's choosing) in the background of their interface, which instantly has a positive and calming effect.

With these things in mind, I created a home screen with a light mode/dark mode toggle effect, each with a beautiful scene in the background to transport and delight the user.

Booking Flow

For the booking flow, my aim was to create a visually appealing and straightforward process. For this reason, I made it so that the customer could see all the available accommodations, with adjustments made for dates and the number of people included all on the same screen. 

Once the customer selected a particular accommodation, I wanted them to be able to view photos of the interior, exterior, and view, so that they could easily imagine themselves within the space. I also included a zoomed-in version of the island map for the same reason, and so that they could easily view exactly where on the island they would be staying. 

As can be seen in the booking flow and beyond, I chose to incorporate glass morphism in my app to enhance visual hierarchy, and to contribute to the calming effect that I was aiming for. 

Map Screen

I created a simple, scrollable map so that customers could get a better understanding of the layout of Moonraker Island and the neighboring islands. 

Activities Scroll

To showcase the resort's available activities, I created a smooth horizontal scroll, featuring photos and descriptions of each activity. 

Log In

And finally, for the Log In screens, I mimicked the UI of the homepage, including the transportive background and light mode/dark mode toggle. In order to make this less distracting to the log in process, I included a glass morphism panel to encapsulate the log in UI. 

bottom of page