OUGD504 - SB2 - Design for Screen - Platform Development

As the colour scheme and typeface had been confirmed, I was able to develop the wireframes, made earlier in the process, into digital designs. The site plan initially made covers almost every element of the Amazon website. As the main focus of this final response is on Amazon Prime, less of a focus was made on the marketplace areas of the site.

Sticking to the wireframes made, mobile and desktop designs were developed in Photoshop. A few adjustments were made when developing them forward. The home button has been replaced by a site language option, which makes the overall experience more accessible and easier to use for people in different countries. After doing some primary research, people suggested that the home button is unnecessary, as people tend to associate the company logo with home. Therefore, the Amazon logo acts as a home button. As for the accordion, it is more identifiable replacing the 3 horizontal bars with a user icon. Here, users can login and find other areas that would have been in the 'other' wireframe section.

As I wanted to spend more time on developing the Prime ad and platform itself, I did not develop the marketplace as proposed in the wireframes. Instead, the layout was slightly adjusted to the new branding. The home page design was used when developing the marketplace. This can be seen below.

Rather than researching into the best type sizes for devices and other aspects, a new program called Adobe Experience Design allowed me to check the designs on a variety of devices in real-time. This made the design process much more straightforward as I was able to judge the optimum size for specific screen dimensions.

Experience Design allows basic apps to built. Unfortunately, the only functions that the software allows is clickable buttons. As some more advanced functions were required, the basic app was built and recorded, before being imported into Adobe After Effects, where other functions could be replicated. This was the best way to create the walkthrough video for the site.

As the two main areas of Amazon are the Marketplace and Prime, a simple choice is given to users when arriving at the home page. Whilst this is much more stripped down than the current Amazon layout, it is a much more straightforward user experience. Other features, such as deals and ads would later be introduced if Amazon chose to develop this concept; however, for now, the design focuses on the key sections of Amazon. Aspects of the Amazon marketplace were taken and arranged into a mobile format, which can be seen below. The cluttered marketplace has been stripped down and simplified into 3 main sections, with a new category area recommended specifically for users. Whilst this looks very similar to the existing Amazon layout, slight changes have been made.

The first problem identified with Amazon Prime is that its interface is confusing and overly complicated, where all of Prime's features should be brought together, with a clear consistent aesthetic across all platforms. To tackle this task, the analysis made earlier in the project of the entire Prime platform was used to create a vastly different and more consistent, clear aesthetic across the Prime area of the site. The simplest way to develop Prime was to make a site plan, which is much simpler for existing users and also users that do not know what Prime is. The Amazon Ad will be made after the walkthrough video, to ensure that the marketing material ties in with the branding for the best possible consistency.

One problem highlighted with Prime regards the parental controls, and how the user experience does not change for different users. Whilst certain programs can be password-protected, a children's film or TV show could be right next to an adult, gory series, which can be troublesome when allowing children to use the platform.

Netflix, a fellow entertainment provider, solves this problem with ease by allowing users to have their own profiles. These profiles can have set maturity levels, which restricts children from seeing certain programs. This concept is one that was considered when creating the site plan to make the user experience much more personal and safe.

To create an aesthetic that is different to Netflix and keep consistency with the new Amazon site branding, three more layouts were created for the user area. Once registered with Prime, users have the ability to set up profiles. Much like Netflix, certain age-specific profiles can be created that prevent certain users from viewing specific content. Adult users, identified next to a small lock icon, must input a password before entering the platform. This prevents younger users from accessing unsuitable content and also allows the user experience to be much more fluid, as users are not prompted for a password every time they want to watch an adult program/listen to an explicit song.

Child users are much more restricted once logged in. Parent users can determine what features child accounts can access. For the purpose of the walkthrough video, I will include two users - Lorraine (the adult account) and Millie (the child account). The entire process will be narrated to explain how the process works. Millie will be restricted to just Amazon Music & Video, with no access to explicit songs and certain-aged programs.

Mockups of how the user experience changes for different profiles were made to highlight how the content would be categorised. The layouts of both Music & Video would be exactly the same; however, content for different age groups would be entirely different. Below, mockups for Lorraine (to the left) and Millie (to the right) can be seen. Completely removing certain age-restricted material from a profile makes the entire user experience safer and more enjoyable as a whole. These mockups will be used in the walkthrough video.

In terms of the walkthrough video, a storyboard had to be made before commencing with the animation work. This was the easiest way to determine which pages needed to be created. The process was broken down simply into 8 stages.

By thinking about the design process as the steps taken by a user, it was much easier to make the required pages for the walkthrough video. The mobile pages made can be seen below. They all stick to the typeface and colour scheme guidelines set to keep consistency, and are as simplistic as possible to make the user experience very clear.

Rather than presenting these pages as stills to a crit group, it was much easier to show the walkthrough video, as the user experience could be more visually explained. For this, the prime ad needed to be completed. This was the next stage in the process.