melisa gutierrez
Case Study: Adobe XD AirBnB
Mid-April, when our finals were approaching, I joined one of Adobe's Creative Jams. These Creative Jams, introduced by Adobe, have students work on a user experience challenge for a weekend based on a prompt that Adobe provides. These Creative Jams required us to use Adobe XD to develop a prototype. This competition was focused on AirBnB, and the theme/prompt were the following:
Families are stuck at home due to the coronavirus, but when the shelter-in-place orders lift, we will want to cre-ate new memories with shared travel experiences and go back to booking stays with Airbnb. As members docu-ment their family trips, the stories they tell could create earned trust for local Airbnb hosts by incorporating them into these stories.
A storytelling app may optionally serve families or friends who travel together best by:
-
Giving group members a way to create a single trip or multiple stories, during or after travel
-
Letting all family or travel members contribute, no matter how old they are
-
Permitting the sharing and organizing of photos, videos, notes, recommendations, links, and more
-
Encouraging engagement with a gamified experience
-
Allowing people to learn, favorite and save stories, discuss, and safely connect
Planning
Since there was no general audience and the app was mobile, so it meant to fit more of a phone screen rather than a tablet, we felt that it was much easier for us to envision. We understood that apps that fit on tablets had to fill up that empty space, while apps that we had in our hands, we could envision easier.
One of our ideas to show how to create a story with families while also encouraging travel through a creative way was by setting landmarks. I imagine landmarks as little pins scattered across the city/location the user was visiting. In our app, we focused a lot on NYC since that was the mid-point between me and Will, my partner on the project, and many of our dates have been there. We had an idea of what pins we would put on the site and how we could tell our story with them.
Therefore, we thought about the app title, called Landmark which represented the landmarks around us, wherever we were visiting. In New York City, we thought about the following:
-
Statue of Liberty (Ellis Island)
-
Grand Central Station
-
Central Park
Immediately, I brought up, "We have to have achievements." Gamification was so easy to get a lot of people involved and encourage them to go around. We needed to have achievements that represent each landmark. Then, it became turning the app more into an achievement/mini travel game where you would share with friends and family your landmarks, but in order to obtain a landmark, you have to fulfill an achievement. For example, an achievement for Grand Central Station would be to take the A train.
Additionally, we had to have a photo option so that the users can upload photos at the landmarks, not only to share on social media platforms that we wanted to integrate, but also to showcase at the landmark itself. Like if my photos were public on the app, you would see my photos from Central Park.
Designing the App
Since it was a phone app, we did not want to clutter the home page with icons since it would take space. Yet, we still needed a three icon menu on the bottom (rule-of-thirds, right?) and the camera on the top left. Will imagined if we had the Photos as the left icon, users would instinctively swipe right to access the camera.
Here were the four icons and pages we needed to account for:
-
Camera: Top Left
-
Photos: Bottom Left
-
Map: Bottom Center
-
Profile: Bottom Right
The most complex pages to account for were the map and profile and the camera/photos were the easiest. We'll explain the pages in order of most complex to least.
Map
The premise is that there would be a mini-map on a phone screen with a tab of the nearby landmarks. We focused on restaurant and sightseeing buildings in this section. Then, the red pin shows the user's current location with the blue pins showing the landmarks and the photos that you take at each location. This is to help keep track of the locations of each photo and make each photo album interactive.
The problem with the setup is that a phone is too small to have a map plus an information tab popup from the bottom. This is unlike a tablet where it gives ample space to have multiple modules, a phone does not do that.
Camera
The camera is self-explanatory. It allows the user to take photos and directly add them to the album. I think the innovative part about it is that it is similar to Snapchat's camera where both the video and photo are in the same circle, just two different animations occur dependent on the action.
Final Thoughts/Reflections
Personally, I think we did very well. We scored within the top 12% of all competitors, with a score of 82 out of 100. Sure, it's not the best, but surprisingly, we did better than we thought, and there is a lot to learn from this.
-
The app is AirBnB branded, so we should have been using their colors instead of our blue.
-
We should have focused more on the Achievements side since that was our innovation.
-
We should have understood the size of the app, as a phone, and adjusted our design around that.
-
We needed to design better art for the app since most of the points we lost were from it not be 'pretty' or designed well.
