Airbnb Contest Microsite
A responsive microsite for a conceptual Airbnb contest where users can submit a photo from a U.S. national park for a chance to win a free trip to Yosemite. This was created for a school project and is not affiliated with the Airbnb brand. Images are from “Luxury 3 Bedroom w/ Game Room & Car Charger - Inside the Park!” listing on Airbnb.
Design Process
(From interactiondesign.org)
Stage 1: Emphasize
Competitive Analysis
To get an idea of existing vacation rental websites, I completed a competitive analysis of Airbnb, Vrbo, Booking.com, and TripAdvisor.
I noted the various target audiences, as Airbnb is geared towards younger generations, while the other options are targeted towards families and older individuals. Additionally, Airbnb is known for their eccentric listings such as treehouses, tiny homes, and A-frames, while the other websites typically include traditional hotels and vacation homes.
User Personas
To understand my target audience, I conducted 4 user interviews with people who have an interest in national parks and traveling.
I gathered the information from these interviews to create 2 user personas - Grace and Josh. These personas guided me in the designing process by allowing me to visualize my users.
User Journeys
I expanded upon my personas by creating user journeys that explored their unique processes and goals when using the website. While each persona focused on a different aspect of the website, they both ended up completing the main task - entering the contest.
These user journeys guided me in establishing the hierarchy of my website.
Stage 2: Define
Problem:
Young travelers want to explore the country’s national parks, but struggle to afford the travel expenses.
Solution:
By entering Airbnb’s contest, users will be able to share their experiences for a chance to win a trip to a national park without worrying about the cost. This contest will also encourage people to support and appreciate the national parks.
Problem Statement
Based on my user interviews and personas, I formed a problem statement to give my campaign purpose.
Stage 3: Ideate
Content Layout & Copy Deck
To organize the layout of my website, I stacked the content as it would appear on a mobile version. This allowed me to establish a sense of hierarchy and determine which elements I wanted to appear first on the website.
Then, I wrote the copy exactly as it would appear on my website.
Wireframes
Using the copy from the previous step, I created low-fidelity wireframes for mobile, tablet, and desktop sizes. The goal of this step was to visualize the layout of the website without any color or design.
I consistently referred back to my user journeys throughout this process to ensure I met the goals of both personas.
Stage 4: Prototyping
Visual Identity
As I transitioned into UI design, I immediately knew that I wanted to include the bright pink color from Airbnb's branding.
I experimented with various color combinations, imagery, and typography, settling on an earthy color palette with warm imagery and sans-serif type to give a friendly, natural appearance.
UI Design
The next step was to create high-fidelity designs using the colors, typography, and imagery from the style tile.
My goal was to adapt Airbnb’s existing branding to fit the theme of this contest. I wanted to create a website that appeared clean and modern, while still feeling inviting and bright.
Prototype
After finalizing the UI design, I created an interactive prototype for the mobile and desktop sizes.
To make this prototype feel authentic to an actual website, I added details such as hover effects and scroll animations. Additionally, I included screenshots from the existing Airbnb website and the Apple camera roll to complete the experience.
View the interactive prototypes below!
Stage 5: Testing
User Testing
I used my prototypes to conduct 5 user tests, with each test consisting of 6 tasks. The goal of these tests was to observe the user flow and discover unexpected issues.
I gathered both qualitative and quantitative data during these tests, by asking questions and using Likert scores to rate the ease of each task.
Finally, I implemented this feedback to edit the prototypes, such as making the colors more consistent and adding additional links to the main page.
Final Thoughts
Reflection
As this project was my first attempt at UX design, I had to adapt to a new way of thinking and designing. I learned how to use Adobe XD, an unfamiliar software, completely from scratch.
Additionally, I discovered the extensive process of user research, which was previously unaware of.
Overall, I throughly enjoyed the process of making this website, and I hope to do more UX design work in the near future.
