Platforms and Experiences

It important to note that experiences should differ from device to device in the sense that computers have a larger screen estate available with more power in comparison to the smaller devices. This means that there are things that are important for each device, and about how they should help their user, this is what this post aims to identify.

AirBnb

Airbnb a service allowing users to book holidays etc online. It is a site allowing users to browse a store like experience viewing properties to rent in the cities they want to visit.

When landing on the desktop homepage, the user is greeted with the following page. It is a page that has an infinitite scroll of content available to the user, consisting of the different experiences available to the user.screencapture-airbnb-co-uk-1479671570492

What you notice on the mobile version is very different. You see there are less options in experiences available and menu has been condensed into a drop down.

screenshot_20161120-194756screenshot_20161120-194821

screenshot_20161120-195050

Once the user selects a place to visit (in this case Paris) they are greeted with list of places of to visit. This is the desktop version;

screencapture-airbnb-co-uk-s-paris-france-1479672194295

and the mobile version;screenshot_20161120-195130

Again the differences are obvious. the mobile has a lot les information instantly visable, the user has to search or scroll on the mobile to discover content. It is also important to note that desktop content just doesnt have the same issues with space so it is capable of filling the screen with even more information for the user.

 

Advertisement

Mobile experience on desktop

Spotify has created an excellent example of my theory of by scaling mobile ui to the desktop we should not loose the design elements that are ready made for mobile. Complete with recognizable icons, design techniques and motion graphics, this website shows how design for the mobile can be used in a desktop experience. Below is my breakdown of how this website does this.

This is the first website that uses a truly transforms the webpage into what feel like a application. The mobile version creates a parallax-like site in which by scrolling down you are sent to a different screen with other options. While this is a nice idea i found to be not very user friendly and quite confusing at times. The color schemes match the different sized screens perfectly and the only slight difference in the experience between the two is the addition of small changes to layout in the larger version of top albums page to allow for extra information about the artist names. Compare the desktop and the mobile versions below.

As you can see this is a really powerful way of displaying content, and there is very little difference in style between the mobile versions on the left and the desktop versions on the right. This is obviously great in terms of marketing as it allows the branding to be correct across all platforms available to the user. This is a must in successful marketing!!