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!!

Advertisement

Google Analytics

How google analytics works.

Google analytics is useful for tracking statistics of a website, it is really easy to install you simply need to add a script that google provides you with and you are good to go. That code looks like this;

Once the tracking code is installed it will allow you to access lots of important data about the users of the website. This data can be broken down into these categories;

Once setup for a while you will be able to actively use data to improve the website’s response the users needs, below you can see the website shows you accurate data about the amount of users and what language they speak

Finally being able to use analytics to resolve problems, and check that the end user is getting the information they came to the website for. A great example of this would be the data flows shown below.

The fact that you are able to find out so much about your audience and what they did on your site, it allows you to understand how to market to them in a much more appropriate way. This is vital to creating a successful marketing campaign, and is something I have to consider when creating my marketing.

Final Designs and User Testing

Prototype testing

On this page the user believed they only needed to click on the flag/difficulty level to proceed, the forward button was pointless and there was no need for this to be a requirement

The user felt like they needed words as well as the symbols, for genders and most missed inputting their age.

Users were unaware of the fact that there multiple exhibition topics and tried to start the first exhibition they were shown. A redesign of this page would allow the user to be aware of the fact that there are other exhibitions available.

The captain is there to introduce the exhibition and explain the user interface to the user. The user has been given the option to skip the captains introduction so a quick UI tutorial may be necessary for the user to understand how to use the UI.

The line on the map is not obvious to the use that it is to indicate the direction of the exhibition.

Within the mini experience, the user was confused as to what they should click on therefore I would need to create a way for the user to differentiate between the clickable and the un-clickable or instead make everything these mini experiences interactive. Also, within the mini experiences the user was against using the blue exit button because they believed it would shut down their entire experience therefore it would be more straightforward for the user to simply have a back button instead of an x.

One of the largest flaws in the design is the relax room interface, as the initial ideas was that it would automatically appear and disappear as they entered the room, but the user testing proved that they had become accustomed to the ui interface and were confused when they couldn’t get back to it.

The final design flaw was the video editor at the end of the exhibition which allowed the user to edit a frame of the video which is being displayed on the wall before they leave the exhibition and also on the outside of the building to entice visitors into the museum. It lacks to inform the user of what it really is, a social tool to bring together the community and raise awareness of the exhibitions and the problems it causes. Before this page there should a be descriptive page saying thank you for visiting the museum and taking the time to enjoy the exhibition, what the purpose of this video was and how it would benefit whaling to take part. It could allow them to input their twitter name or Facebook name so the exhibition page could tag them in the images that were taken throughout the exhibition in the selfie zone and also the edited frame of the video.

All of the different screens I have designed…