Case Study: Adobe XD AirBnB
Mid-April, when our finals were approaching, but we felt bored, my boyfriend and 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
Will, my boyfriend and partner on this project, and I had a lot to do this weekend. How should we start?
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, 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
Immediately, I brought up, "We have to have achievements." Will was shocked. 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.
In the Profile, there were a lot of options. For one, the Profile allowed the user to change their profile picture, have access to their achievements, and see what landmarks they have visited so far. The problem with the profile is that it contained a lot of access to other big parts of the app. While we emphasized gamification in our thought process, we never acted on it to be a big design feature. So now, we had the profile page have a lot of connections that were difficult to manage and required art-boards that we were not prepared for.
In terms of the design itself, the profile was simple. Will mentioned, it had easy access to the achievements and to the settings which was general in many 'social' apps. Additionally, the profile section would stand out in the menu if selected which was a big design practice for us.
The Achievements focused on the three most recent achievements and a small text that allowed you to see all the achievements you have earned. However, you were able to see achievements that you have not yet earned if you were in the area. For example, Will has never attended a Broadway show, but because he is in the New York area it would show up as a Black and White achievement photo, displaying that he would have not yet earned the achievement.
Things I would change in the achievements and profile would be not to include so much in the profile page. Also, the achievements should have been its own accessible section in the main screen, rather than only being in the profile picture.
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.
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.
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.