User Journeys: Completing tasks?

This post takes place in video format and gives live demos of how the content can be change, if reading in the document, please refer to the blog post which can be found here (https://akbrodie.wordpress.com/2017/05/24/user-journeys-completing-tasks/).

To begin with I will start with a video showing how simple it is add an image to the assets section of the cms.

The next part would be to edit/delete an image, In this video demo I will delete the image I just added.

Finally, and most importantly the websites’ articles are editable, and in the video demo below, it is shown how this is done.

Advertisement

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.

 

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

UX & Colour Research

Colour & UX research is vital, it will change the way the app is perceived by it’s user. I will need to use;

– Cool blues that relax and inspire the user
– Light pinks on the the blue for contrast
– Black & white for the augmented reality

The images below make a good use of depth within their experiences. This is something that is going to be vital in creating my experience, as an entirely flat design in this instance will make the experience bored due to the stripped back abilities the user has to their disposal. Great Depth can be seen in there designs below.

1 2

Augmented Reality is a challenge because users are not used to using this technology, therefore it needs to be kept as simple as possible. The first two images show simply how easy it to overlay information in a camera, while the third shows how by using the camera you are able to offer a variety of different information for the user.

3 45

Displaying relevant information needs to be visually appealing in a way that they “don’t compete for information” or “fill the screen with unrelated information” (http://thenextweb.com/uxdesign/2015/07/07/10-dos-and-donts-of-ui-and-ux-design/). Therefore finding methods of laying out the content is of the most importance, and you can see some examples of how this can be done below. Both the layout and colours have been taken into consideration

6 7 8 9 1011original

The route through the museum is of great importance, and is something the user will see the most, this needs to be easy to follow and understand, there are a couple of examples below.

12 13

Placards to show the results of searching for information would be the most user friendly way of showing data to the user, this is a great example of this.

14

Social element within the museum should be strong as it helps the museum create footfall, below are great examples of how the social interaction elements I can use.

15 16 17

The editable video at very end of the exhibition should show the user the previous edits along with the video and the ability to scrub through the video. You can see examples of this done below.

18 19

References:
https://dribbble.com/shots/2298656-Day-004-Dial-Pad
https://dribbble.com/shots/2297657-DailyUI-003-Landing-Page-Above-the-fold
https://dribbble.com/shots/2297797-Calories-Statistics/attachments/434542
https://dribbble.com/shots/2293458-Product-section/attachments/433225
https://dribbble.com/shots/1069421-Augmented-Tourist
https://dribbble.com/shots/1101044-Anipedia
https://dribbble.com/shots/1107593-Anipedia
https://dribbble.com/shots/1346175-Indoor-Location-Map
https://dribbble.com/shots/1050752-Iapp
https://dribbble.com/shots/1013895-Fantasy-Soccer-Stats
https://dribbble.com/shots/1338727-Youtube-Redesign
https://dribbble.com/shots/1862236-Room-share-results