This post relates to a portfolio project designs and discusses how the application relates to current practices, (UI and UX) the processes in which the designs were created and how they compare to successful movie player apps such as Netflix and Prime Video.

The aim for this project, was to achieve two fully functioning high fidelity prototypes for a copyright free movie player application for both television and mobile. Both were achieved through the means of the “Minimum Viable Prototype” method shown in McElroy’s (2017) book (Prototyping for Designers: Developing the Best Digital and Physical Products) and used as a prototyping method within the UI and UX industries. Throughout the project, there was an emphasis on the presentation of the content and a button orientated design was developed.

Research and Analysis

Initially, research into the field of online video player applications was excessive, it was found that a large majority of the vastly popular streaming sites such as Netflix and Prime Video placed a heavy emphasis on the content presentation. Netflix especially placed a high usage of varying forms of opacity, whether that be through elements placed around the page or full screen navigation systems (mobile only). Because of this emphasis, the low fidelity designs were developed to follow this trend. Both Prime Video and Netflix emulated the same presentation of content in terms of information hierarchy, however in terms of UI elements they differ largely. The slideshow of content doesn’t differ much, with a small title describing the category and an image that easily represents the content linked. The meta content usually contains the title, this allows the UI to become less cluttered and keeps the relevant information within the meta content, in addition to this content previews on the edge of the screen, this is affords to the user that there is more content to view. Lastly, Netflix prides itself with large scale featured content that fills the majority of the page this element is very aesthetically pleasing, however was not used to the same extent within the final designs for Universal Movies.

Furthermore, there were various other relevant online streaming applications that were referenced during low fidelity designs, with small elements from apps such as NOW TV and another app Manga Rock. The app Manga Rock which isn’t an online streaming app, provided insights into the designs of applications for viewing other forms of media. It was found that the generally presentation of the mobile app suited the old fashioned style that the final designs mimic. However, because modern design is always changing and the research and analysis of various applications across mobile and television, it resulted in a mixture of very centralized and library style with various modern UI design techniques, mainly alteration of opacity.

When considering the competitors for the app’s concept niche, which surrounds the use of public domain and copyright movie content. There is little to compare as the baron and very simple designs that span across the majority of royalty free movie websites. So the application of modern design and research into various other media apps will aid in positive reception of copyright free movie apps instead of making the experience plain and lack of any aesthetics.

Fitt’s Law was considered largely throughout the entire production of this portfolio in addition to the GOMS model found in Nunnally & Farkas’s (2016) book UX Research: Practical Techniques for Designing Better Products. Fitt’s Law is rather important throughout the design process as it is the determination of the distance of targets, so the placement of content throughout all designs, especially mobile, placed a heavy emphasis and where the location of buttons were placed and content displayed on the page. Furthermore, the GOMS model was important because it identified the stages in which the low fidelity designs could reach high fidelity. Goals set out the HTAs, operators were used mainly for iconography throughout the project, methods produced relate to the feedback that was collected after the apps completion and finally, selection the final area which measured on how each option across the interface assisted in the accomplishment of the tasks (goals) set out for the user.

The initial research into which prototyping method would be the minimum viable prototype method mentioned prior. However there were options available in to how to create these prototypes, after initial basic research into each option it was decided that MVP was the best choice however the exploration centric , audience centric and assumption centric prototyping methods all could generate high quality prototypes but either rely on other team members who were not a part of the project and methods that would take too long for the assignment.

Implementation

Because this projected followed the minimum viable prototyping method, the process followed four main stages. The first being identifying who the users are and identifying the problem, the product of this was to identify that copyright movie apps aren’t appealing in terms of UI so giving the design a complete overhaul was the main aim for the designs. Because of this the design follows a UCD design as it is prioritizing the user for the best and easiest experience possible. By using the app it will increase usability and supply and demand for the product.

When the initial project was set, research into the field of UI and UX was done extensively to decide early on how the layout and basic structure of both mobile and TV would be. It was imperative not too be too concrete on certain design decisions as there were various elements that were altered several times during production. To begin, the initial designs for both mobile and TV are displayed below:

The approach that was handled during this project was mobile-first, this entailed with making the mobile designs first and creating the TV prototype surrounding the general design of the mobile app. Careful thought was placed in the location of specific navigation and button layout as it was paramount for the user, on mobile, to have a positive experience with the mobile app. All wire frames were presented to potential users and in return the project gain a significant boost in design choices. Several of the design choices within the mobile designs focused on mimicking the likeness of the app Manga Rock as mentioned prior, it was found that even though the app surrounded a different type of media, it allowed the prototype to become more like a library and that was the initial aim as seen from the basic designs.

After taking consideration of both the designs and feedback given from the basic designs. It was found that a multitude of icons and buttons were misplaced and needed refining in ways of both affordance and placement. One feature that was heavily focused on throughout production is an example of this. The genre tab was considered vital in allowing the user to navigate the website properly and allowed for multiple HTAs to be created, this is because there was more ways to achieve a specific goal, i.e finding a horror film through genre searching rather than search for specific content. As mentioned there was heavy focus placed onto iconography, however after searching through both material design, Android and the respective Apple IOS design guidelines and icons, the majority of icons used were simply rehashes have the already clear and concise Apple IOS iconography. However, some material design icons were adapted to fit into the style of the icons used throughout the high fidelity designs.

Due to constraints in personal time, medium fidelity and high fidelity formed into one throughout production, this is because the medium fidelity designs received extremely positive feedback from potential users. However, it became a case of the high fidelity designs would simply continue to have additional features added, this includes information, like, download, share, etc. All of the features included in the initial designs were included but throughout production more were added. The only difference between the medium fidelity and high fidelity is the usage of a style guide throughout the completion of the high fidelity designs, as shown below.

The style guide presents all key elements used throughout the production of the high fidelity designs, it was found that altering the icons and buttons from mobile to television was simple enough has it was just resizing the elements to both fit the screen size and to increase visibility.

Colour wasn’t considered as much as it should of been throughout the project, however the gradient background used was added relatively early on through the design process and it was found that thanks to the lighter grey help to highlight specific areas placed on the app, specifically the featured poster at the top of the home page. In addition to this, the general colour symmetry used across the app aids the user into what is available to them. Because of the blue buttons used from the sign in and sign up pages, it emulates that the blue buttons were further the users goal. Other than the blue used for multiple buttons across the app, there was placed an emphasis onto the use of blacks, greys and whites to highlight and diminish some content over the other. This was done through the alteration of opacity for several elements to allow specific elements to stick out from the page and reduce the visibility of the content that isn’t as important, however the visibility isn’t reduced to the point that it hinders the users visibility, it simply helps certain elements stand out.

As shown above the mobile high fidelity design sign in / signup pages emulate that of the majority of online streaming applications, by introducing the user to the brand rather than simply giving the user functions to complete there is careful consideration into what language is used, making sure it’s not too formal or informal and allows the user to retain a sense of belonging when joining for the first time or logging back in. Another feature that was added throughout high fidelity designs was the introduction of feedback. There are various elements on these pages the emulate this feedback, one being the three dot bar placed careful near the register button so the user doesn’t miss it and the use of a remember function, this would allow the user to reduce the number of clicks to complete their task next time the app is used. An element that was added thanks to feedback from a potential user was the addition of a “back” function, the word is quoted as a back button is not placed on the page, instead a redirect function was implemented to allow the user to correct mistakes if made.

Initially the designs for the sign in / signup functions for television were vastly different and these were completed last minute by altering sizing and placement compared to mobile. This design style for login functions is widely used across various online streaming apps such as Netflix, however with the use of a controller or remote the design had to meet some specifications. Specifically being able to easily select the correct section, so by making the screen split into two sections the user simply needs to move left and right and up and down on the relevant side.

The logo used throughout both prototypes was made a simple as possible but to also emulate a metaphor, as shown below the logo of Universal Movies was made to present a stacked letter “U” to show the extensive library of copyright free movies, in addition to this the blue used through the logo, buttons and the primary colour used throughout the designs emulates feelings of sincerity, calmness but also intensity, the psychology of the colour allow the user to feel a mixture of emotions and that is the aim for both the app and for the movies the viewer would watch.

The biggest comparison between the two designs is the navigation, as shown below, both TV and mobile designs do surround a rather simple navigation but the application of the navigation for both suits the design and make it clear enough to the user, on how to use it by means of affordances.

As shown the two compare and are very similar but the one thing that is completely different in the TV prototype is, as mentioned, the navigation. The navigation on the TV prototype uses idea that the user will be using a controller to navigate so by simply pressing up the user is presented with an afforded navigation bar that is extremely clear and obvious. Where as the mobile prototype there was placed a heavy emphasis onto feedback on buttons and icons used throughout the design. The example shown above is the act of saving the content featured on the home page to the users watch list. Another comparison is the use of slightly hidden content to emulate more content can be viewed, this was used throughout designs for Netflix, Prime Video and NOW TV, however the functionality of the sliders are null because of the lack of functionality that XD holds, however this is counteracted with various examples of feedback for the user.

A key feature that, after extensive research into the matter, it was found that the majority of public domain movie websites lacked an extensive genre viewing option, this as a result, was focused on to and made to fit current modern design practices, throughout use of full screen opaque navigation and button replacement. Below shows both mobile and TV designs for the altering the genre, this is done through pressing the genre button located throughout the app, the button used is extremely unique within the design and is made to be an important feature of the prototypes.

As shown above, the change genre feature presents the user with a full screen opaque scrolling navigation system, this system was chosen to be used because of its simplicity and ease of use through both TV and mobile, the close icon position changes simply because of the abundance of open space on the TV prototype. The full screen navigation helps achieve a sleek and professional look whilst also being simple to use.

Furthermore, the use of full screen opacity changes is consistent throughout both designs, but more specifically mobile, this is because the research in Netflix allowed for the discovery of their like feature, the designs simply adapted this idea into the overall design style. As shown below there are various other examples of this being used.

As shown, there is a clear consistency of this being used throughout the design process, specifically the bridge between medium and high fidelity which was achieved through feedback throughout. After the fact of creating the genre feature was this added (more information) to both TV and mobile prototypes, the main aim for this was to emulate a button centric design that allowed the use to view with ease certain information, such as the directors and actors present within the movie the user is viewing. In addition to this, the more function was only applied to the mobile prototype, the reasoning behind this is due to the fact that the main function in this feature is to download the selected content, this function does not need to be present in the TV prototype because it would always be on Wi-Fi. However, the other to functions present within the mobile prototype lack functionality, the share feature is self explanatory and the like feature was just not added in time. However if it were, the feature would simply replace the heavily dark themed like icon with a light themed like icon, just as the download function does.

The search feature is a key aspect that needed careful evaluation of throughout designs. Initially the search tab on TV was supposed to be the only navigation option, however after consideration the navigation was switched to stick to the top of the page. This made it so the removal of the navigation was needed across both systems, however the addition of a back button was required to allow users to exit the search function. After research was done into the online streaming sites it was found that there was a lack of emphasis on the search feature by finding various films that related to the title searched. However, throughout all designs it was found that presenting a featured content that closest resembled that what was searched allowed for the user to determine without any cognitive reaction which title they needed to select. By centralizing select content it allowed for the page to flow on after easily.

There were various other examples of the full screen functions that were applied to the account page, as shown below, there was consistent use of the is as it allows the user to focus on specific content rather than being distracted from the task that was set out for. The location of a lot of the icons was developed throughout medium and high fidelity production, with changes being made after receiving feedback, the feedback received was collected through word of mouth in terms of specific icons not doing what they believe it would or some navigation simply not working allowed for fixes to be applied.

Finally, these functions were not added to the TV prototype as the presentation of this lacked finesse and was not completed in time, however the style in which the information was presented differs, as shown below. When viewing the account feature from a TV view it was found that it aided in the design not to go forward with the similar design functions as mobile.

Both forms of feedback were imperative to achieving a positive outcome for this project, it was found that applying feedback functions, as shown prior, allowed for the prototype to become an even higher fidelity, as to if it weren’t included. It helped add an extra layer of detail that would allow developers to understand the project more and the type of application the prototypes were trying to emulate. However, because of this some areas of the applications features were both diminished or not furthered beyond basic ideas. There was a heavy emphasis on the making the singular example’s functionality as positive as possible but the addition of one or two more examples would have given the prototypes an extra layer of professionalism and allow the developers to understand further into how each example page is laid out.

Feedback and Conclusion

Throughout the production of the two prototypes there were various instances where feedback was collected and applied to designs, the first initial feedback collected was done through reviewing the low fidelity designs and asking how the layout felt and looked like to potential users. Furthering on from this, medium fidelity on XD was created and as the project gained more assets to work with and the formation of the high fidelity designs were finalized, the feedback throughout aided in the production of the individual elements, this includes the use of feedback which was encouraged and evidently the final design feedback were generally based around feedback. Specifically the navigation bar for both designs lacked feedback functionality, (removing blue colour of home icon) by not applying the blue feedback highlight it was brought up in final feedback done through a survey. The survey presented the reviewer with a link to both the Mobile Prototype and TV Prototype. In addition to this. star ratings were included to evaluate the use of colour and the general functionality of the product and finally general comments on the designs were placed at the end as an option for the reviewers to evaluate on the star ratings that were given. The general feedback given was relatively positive, however the majority of the constructive criticism stemmed from the lack of feedback from the navigation bar across both prototypes. This shows the feedback elements that were introduced needed to be developed and introduced into the navigation elements.

To conclude, there were various elements that could of been furthered, whether that be through means of feedback and repeating the process of the evaluating all the design decisions but as overall designs both prototypes received highly positive feedback with minimal points that would hinder the future production of the application. It was found that the use of XD hindered various aspects of production, this is because even though through review functions, ease of access and functionalities that allow for ease of use, there was little in terms of prototype development, there were various issues that arose during production that hindered it as a result, such as lack of swipe functions and the need to create multiple separate entities simply just to make an element give feedback. There were a multitude of problems that arose during production due to this, it was found that the more individual feedback elements on the page made the entire process of making the elements give feedback long and arduous and simply not worth the result however nice and professional it may look. After collecting the survey data and concluding what changes should be made there were various areas of the prototype that could be changed and if given the time the app could become a high sought out app to use. Various feedback issues that were removed from the designs include the reduction of devices within account, adding the sign out and change download size feature within the TV prototype and finally the addition of more example movies and the removal of preview content would help improve the general understand of how to interact with the app.

Both prototypes are available for viewing:

Mobile Prototype

TV Prototype

There are multiple principles that surround user centred design. Design is based on an explicit understanding of users and their environments; this is refined by user centred evaluation. The process involves users throughout the entire design process, whether that be with the briefs or the evaluations, therefore it ideally suits the development of products that are simple and straightforward to use.

There are four essential activities to proceed with whilst working on a user centred design project, these include:

• Specify the context of use — Identify the people who will use the product and their motives when using the product, i.e. what will they use it for?
• Specify requirements — Identify the business requirements or user goals, this must be met for the product to be successful.
• Create design solutions — The production of designs and prototypes. This can be completed in stages, i.e. low, medium to high fidelity designs.
• Evaluation — Carry out a user based assessment of the product and figure out whether the product is of integral quality.

When carrying out user driven feedback there are multiple different ways of doing so such as focus groups, individual interviews, questionnaires, etc. in addition to this the feedback can be collected at different points throughout the project. Feedback must always be collected throughout, to pick out errors, change key features, and to make sure the user is satisfied with the product that is being produced.

When considering how to morph and form elements within a user centred design project there are essential elements that should always be considered. First, visibility, users should be able to see from the beginning what they can do with the product, white is it and how can you use it. This element is considered from the first step. Secondly, accessibility, users should be able to find information easily and quickly. They should be offered various ways to find information, for example, a search option, menu and action buttons. Moreover, legibility, text should be easy to read. Finally, language, short sentences are preferred over presenting paragraphs for the user to read. The easier the phrase and words, the better.

To conclude, user centred design is all about the user. Paying attention to not only what your client is telling you they want but also editing the brief slightly to fit the audience it is being targeted at. Talk, converse, ask your audience what they want and would rather see from the product that is being produced, this will allow the product to flourish and succeed in the eyes of the user.

Balance in design is similar to balance in physics. A design is balanced when the key visual elements, ie. colour, shape and texture, are equally distributed. However, this doesn’t mean every design has to be completely symmetrical, there is also asymmetrical (both sides are unique but have a similar visual weight) and radial designs (the central object is the anchor for the objects placed around it).

Proximity creates a relationship between elements. It doesn’t mean that elements have to be placed directly together, just visually connected in some sort of way. It is important to know while it may look aesthetically appealing to place items together in order to create unity, however objects don’t always need to be grouped, especially if you wouldn’t see those objects together.

Alignment refers to lining up the top, bottom, side or middle of text or graphic elements on a page. This is a vitally important principle to consider in all types of design because it allows you to arrange elements / objects in a way that matches how people naturally read a page. It allows for the creation of order and organisation. Aligning elements allows them to create a visual connection with each other. By properly aligning your design is an easy and effective way to make the piece look more professional and polished.

Repetition is used by artists to make their work look active. While you don’t want to overwhelm users by making the page appear too busy. However, when used in the correct way it will bring a clear sense of unity, consistency and cohesiveness. In web, the repeated use of elements, which have common attributes, create a pleasing visual pattern and slight variations to a simple repetition will enhance the user’s curiosity and attention.

Contrast occurs when two elements juxtapose each other. For example, it could be different colours between the text and the background colour. It could be the difference between a large and small graphic or a rough texture with a smooth texture. The use of contrast creates emphasis and focus towards elements the the design, it attracts the eye. A good and very famous example of this in practice is the iPod advert, thee advert presents a silhouetted character on a brightly coloured background. The iPod and earphones appear in white and stand out the clearly against the silhouette and background.

Space in design refers to the distance or area that surrounds an image. Space can be both positive and negative and is an important factor used within design. White space or negative space is extremely important within design as it allows for breathing space for the user. By using white space within design it creates grouping of elements, creates emphasis and hierarchy and helps to improve legibility. So when designing a page thin about what actually needs to be there. Omit everything else. Thinking about space will help the designer see what is and isnt’ essential and more than likely will help reduce the amount of elements that are placed on the page.

something such as a structure or experience that, when considered as a whole has qualities that are more than the total of all its parts

Design theory refers to the understanding of methods, research, strategies and analysis within the practice of design. The way that people view design strongly effects the meaning that is taken away from it. The Gestalt Theory examines this effect and is one of the main principles that every designer should consider when moving through the design process.

The word German word Gestalt closely translates to “shape” and the theory behind it, describes how people tend to organise visual elements into groups or “unified wholes” when principles are applied, this theory was developed by Fritz Perls, Laura Perls and Paul Goodman within the 1940s and 50s and was published in the book “Gestalt Therapy”.

A good example of the theory in practice is the example image below, some might call this image an “optical illusion” but is also an example of one of the Gestalt Principles: Figure and Ground. To put figure and ground into perspective, figure is the black text that is being read and the ground is the white space surrounding it.

However, concerning the image above, the user perceives the figure and ground but the roles change when the eye perceives the form of another object. Initially, you will see a couple of old people’s heads but then as you look closer you may see a lamp, a man playing a guitar and so on and so forth.

Another example would be “Similarity” and this can be used in two ways. When the object appears as one whole, with multiple distinct objects being relatively similar the eye does not focus on one point rather than a whole. Where as the other way is the usage of an “anomaly” this is usually used to draw focus towards one aspect of the design by using a dissimilar shape compared to the others.

In addition to this the other principles include:

• Continuation — this occurs when the eye is compelled to move through one object and continue to another

• Closure — this occurs when an object is incomplete or a space is not completely enclosed, if enough of the shape is indicated, people perceive the whole thing but filling in the blanks

• Proximity — this occurs when elements are placed close together, generally appear as if they are one object. A good example of this:

How can these principles be applied to aid web design workflow? Sometimes, paying too much attention to detail can hinder the production of aesthetic web design, this is because little tweaks and changes don’t really change the outcome. Trying to change anything other than the main shape of the website will result in, more or less, the same design. You should always start with the container, or the overall structural shell of a design; forget the details and individual components for now.

This is a prime example of why wire-framing is a practice that is used throughout the medium. Starting with the simplistic aspects and the overall feel of the design is what is important. So, whatever kind of design it may be, every piece of work must have considerations towards the layout using the Gestalt theory whilst planning and developing the structure.

the interconnection via the Internet of computing devices embedded in everyday objects, enabling them to send and receive data.

With broadband internet becoming more widely available across the world, nearly all devices have some kind of Wi-Fi capabilities and shaped the nature of how daily life is fulfilled. The World Wide Web has touched the lives of billions of people around the world, however, it didn’t start out that way.

British scientist Tim Berners-Lee invented the World Wide Web in 1989 and was developed to meet the demand for automatic information sharing between scientists within universities and institutes around the world.

On August 1991, a summary of the web project was posted and marked the debut of public usage and available service on the internet. Several years later, Tim Berners-Lee’s source code was released to the public domain and due to this, the World Wide Web became 100% available for everyone to use. This resulted in an immediate effect and within several months over 500 web servers were live. Moreover, by the end of 1994, there was over 10,000 servers and 10 millions users.

Fast forward to 1998 and every corporation on the planet was trying to build their online presence. However, due to the fact that Netscape and Microsoft each claimed around 50% of the browser market and the two web browsers were basically entirely incompatible, the Web Standards Project was introduced. The Web Standards Project mission statement stated:

The World Wide Web Consortium (W3C) has established standards for interpreting Web-based content.

By releasing browsers which do not uniformly support those standards, browser makers are injuring Web developers, businesses and users alike.

Lack of uniform support for W3C standards makes using and developing Web-based technologies unnecessarily difficult and expensive.

We recognize the necessity of innovation in a fast-paced market. However, basic support of existing W3C standards has been sacrificed in the name of such innovation, needlessly fragmenting the Web and helping no one.

Our goal is to support these core standards and encourage browser makers to do the same, thereby ensuring simple, affordable access to Web technologies for all.

Due to the Web Standards Project and with the World Wide Web Consortium, the medium of web design has remained accessible to the public. Because this was fully supported, web designers and developers around the world can create functionality far beyond the capabilities of any individual web browser. If not put into place, the world would be completely different. The World Wide Web has been allowed to flourish under the eyes of all designers and developers across the world over the years since the internet’s inception.

Now the internet of things allows everyday life to revolve around the internet and to have connectivity with anyone and everyone around the world.

However, the success of Coca-Cola isn’t just down to chance. Their visual identity is unforgettable and since 1886, the company has even defined American culture by capturing famous stars such as Marilyn Monroe, Elvis Presley, Frank Sinatra, etc. enjoying a bottle of coke using the iconic bottle.

The bottle isn’t the only thing that has helped shape what the company is, the logo which has lasted even before the companies inception. In 1885, Frank Mason Robinson came up with the name and chose the logo’s distinctive cursive script and the design has hardly changed since.

Having previously mentioned the man, Raymond Loewy is quite literally, The Father of Industrial Design. The reason he was one of the biggest designers in the 20th century was that he was not limited to one field of design. He sought to make life easier for the user of the product. Some products of note include, Lucky Strike cigarette packs, logos for companies such as Shell, TWA and BP and the Dole Deluxe Coca-Cola fountain dispenser. By focusing on both form and function within design, it has helped shape the way designers nowadays into different ways of thinking, perceiving and creating.