Interactive Design (DES500)
During this project the role of a user interface and User experience designer will be adopted whilst creating an interactive Smart TV player interface and a Mobile App for Moving Image Archive. The TV interface needs to feel contemporary and be simple and easy to navigate whilst the mobile app must correspond with the TV interface and enhance the user experience.
The aim of this project is to analyse and research TV and Mobile application designs and trends to help inform a design phase that will eventually produce two clickable prototypes that adheres to the results found in the research conducted before it.
When undertaking a large project it is very important to decide on a method of which the project is managed under. There are several project management methods to consider however this report will analyse and compare the Waterfall model and Agile development scrum methodology.
The Waterfall Model often referred to as a linear-sequential life cycle model, is an easy to follow and understand project management model. The process in which is followed under this model is very linear meaning that each task must be fully completed before starting on another task as tasks must not overlap (ISTQB EXAM CERTIFICATION 2017) .
This model has the advantages of:
· Easy to manage due to only one task being completed at a time.
· If the requirements of project are well known it becomes a very effective management model.
· Easy to follow and understand.
The negatives of using this model are:
· It’s not easy to go back and change something that is found to be ill-thought out after its been done.
· Due to the rigid structure no software/prototype is made until later stages of the project.
· Not suitable for projects where the requirements may change at a later date.
Agile development scrum methodology
An Agile development methodology such as scrum takes a completely different approach to working on a project as it takes an incremental/iterative approach to management and completing tasks. This approach allows a person/team to change the requirements over time as tasks are worked on simultaneously instead of one at a time (Bowes 2014).
This methodology has the following advantages:
· Changes can be made at any time during the process
· Software/prototypes can be delivered much quicker as it can be worked on throughout the project
· It allows for continuous improvement on all project tasks.
The negatives of using this methodology are:
· Can be hard to understand initially.
· As the focus of the project is mainly on the software, documentation can become neglected and weak.
· It can become very inefficient if the methodology is implemented badly.
The feedback strategy that best fits/will be used in this project will be user feedback forms. These will be filled out after showing several users the final designs so that the final prototype can be as polished as possible at the end of this project.
After comparing the pros and cons of each project management model it is clear that the waterfall model is the most adequate for this project. The reason behind this is because the requirements of the project are already known and are unlikely to be changed at a later date plus documentation is very important for this project and cannot be put at risk of being neglected.
In a large project such as this one it is important to plan out the design process that will be carried out throughout the entirety of the project, especially when using the waterfall project management model as all requirements must be identified in advance as they cannot be changed later on in the project.
The first step that’s going to be taken during the design process of this project is to define the problem which will be done during the audit of the current archive website. The next step would be to analyse competitor websites and apps in order to collect information on what works well and what doesn’t work well for a video app/website. After that would come a brainstorming session of which ideas for the redesign would be written down/sketched out based on the information collected before. Development will then start on the chosen idea creating storyboards, wireframes and flow charts to further flesh out said idea. Gathering feedback from several sources through a questionnaire would be the next step in the process to gauge how effective the current design is. The final step of the design process would be to improve and polish the design into final clickable prototypes using the feedback received in the previous step.
148 hours must be dedicated to this project so the time will be broken up into 4 work weeks at 37 hours each week. Roughly 60 hours will be dedicated to research and 88 hours will be dedicated to designing planning and implementing the final designs.
Research & analysis
The moving image archive section of the website functions as designed and isn’t lacking any crucial features that a video streaming services needs to have however that being said whilst all features are there they aren’t necessarily in best place and some even a little too hard to find. With the video categories/genres being included in a list mixed up with singular videos it can be hard to find what you’re looking for at times which negatively effects the users overall journey.
In the current design information seems to be displayed in a way that doesn’t make much sense, the filters on the side are very random and specific, the categories are displayed alongside singular videos and important video properties are left out of the results list such as video length and genre.
The layout of the website is good in some places however poor in others, for example the video page is well structured and easy to use/navigate whereas the results page is weirdly structured showing results in different sized rectangles in a seemingly random order which severely affects the flow of the design and experience.
From a design standpoint the website has a decent design however it does not take advantage of many current design trends such as flat design which may affect the user’s decision to use their website. The use of a card/grid UI the only current design trend that the current website design does follow and is the most aesthetically pleasing part of the website. The current colour scheme of the website is a safe choice as there is no bold or bright colours used at any point of the design.
Current design trends
A design trend starting to be seen more across UI design are card based UI designs that originate from Google’s material design principles. These UI designs make use of cards in order to break down pieces of content into their own individual cards and allowing the user to navigate through them. This UI technique is very useful as it allows more information to be displayed on the screen at once but in more manageable chunks, allowing the user to quickly decide if that particular information appeals to them or not. Card UI is a very organised content management system therefore it is used to allow the user to filter and customise the content easily to their needs. This design technique also fits nicely with mobile first design approach as the cards work well on mobile and scale up well for tablets and desktop. Good examples of this UI trend are Facebook, Twitter and google and it is through these companies that this trend thrived and continues to thrive (Leeson 2016 a).
In recent UI trends bright vivid colours are starting to creep back in after the flat design trend took away a lot of colour in favour of simple and functional designs. The use of bright vivid colours and gradients allows a brand to create and display its brand personality more than something like a flat design would allow. This trend can be good for injecting feeling into a design/UI to help it stand out from all the other designs out there (Leeson 2016 b).
Flat design is a trend that started in 2013, it stepping away from flashy animations and illustrations and took the approach of creating minimalistic but functional designs that are heavily centred around the users experience. Interfaces that successfully implement flat design provide a very user-friendly user experience which can be very useful when designing something where the use is required to search and find content (May and Clum 2017).
Typography is a very powerful tool in UI design due to its ability to inject personality, set tone and even evoke emotions from users. The limits of typography have been pushed over the years due to the ever increasing resolutions of devices which has meant that current trends have seen big, bold, beautiful typography being implemented alongside other design trends to create edgy aesthetically pleasing designs (Leeson 2016 a).
10-Foot UI Design
With 3 of 5 households having their TVs connected to the internet 10-foot UI design has become increasingly important as we have had to rethink how we design and share web content. As a user sits in front of a TV their approach to thinking and way of interaction changes so 10-foot UI design takes this into consideration and provides simplicity with lightweight user interaction.
When designing a UI for TV the remote has to be taken into consideration due to there being a lack of a mouse/keyboard input. This means that how the design is interacted with and how navigation works is dependent on the remote being used with the device.
Distance limits the user’s ability to process information therefore a 10-foot UI design must keep the information density low by breaking down information into small chunks. According to Fitt’s Law larger scaled elements will allow users to identify buttons within the design and interact with the design quicker (Smyk 2017). Murgrabia (2016) states that because users are positioned far away from the screen it is important to be mindful of this when designing graphical elements and deciding on text size. Text size should be a minimum of 22px with generous line spacing and graphical elements should be bold and chunky.
Not all TVs display content from edge to edge so when designing for TV there should be a 27px gap between the top and bottom of the design and a 48px gap between the sides of the design, this is called the TV-safe area (Microsoft 2017).
TVs have a much higher gamma value than most other screens which must be taken into consideration when deciding on colours for a UI design. Pure white can be too bright to use especially in a dark room and can also create halos. Highly saturated colours such as bright red and heavy use of white is not advised. When choosing a particular white to avoid flickering for a design it is recommended to pick a white with a #f1f1f1 hex value (Potvin 2016).
Mobile first design
The concept of designing for mobile first consists of starting with the smallest screen first and working your way up and is a tenant of progressive enhancement. This design strategy focuses on designing for the hardest size first and easier sizes after which helps prevent the mobile experience from seeming watered down and unpolished as there is no risk of the designing not scaling down well (Gremillion 2016). This approach to designing will be taken during this project so the final product for both the Xbox app and mobile app give the user an equally rich experience.
After all the research that was carried out during this project the following points were brought to light and will be implemented on the final design for this project:
· Card UI — The final designs would greatly benefit from using a card/grid UI as it allows for simplistic navigation and allows the user to quickly decide if the content displayed on a certain card is relevant to them or not which would work well for this kind of project.
· Bold colours — This project could be benefited by the personality injected the comes with using bold bright colours if implemented well.
· Flat design — The final designs should conform to the flat design approach to make the user experience of the final prototype as friendly as possible.
· 10 foot UI design — All the principles that apply to 10 foot UI design such as consideration for the remote being used, the TV safe zone and TV gamma values will need to be taken into consideration when designing.
This project has many needs features and functions in order to meet the required specification. The needs of this project are as follows:
· Sketches — The first step of this project is to sketch out rough ideas for both the mobile and Xbox app designs so that all ideas have a visual representation and a design idea can be decided and expanded upon.
· User journey/storyboard — A user journey must be established before further improving on the designs decided upon in the sketching stage. This user journey will help guide the refinement of the design in the wireframing stage.
· Wireframing — Wireframes will be created in order to further refine the designs from the sketching stage and start to visually bring to life the design. At this stage most features that each prototype needs will be added into the design.
· Design — The design stage will be where all features and design elements will be created and implemented into the final design. It is at this stage that the decisions of what colour scheme, font, font sizes and final graphical element sizes are finalized.
· Prototypes — The final design will then be made into a clickable prototype so that the users can experience how the apps would work.
Features and functions that must be present in the final design in order to meet the requirements of this project are as follows:
· Four screens — As per the project requirements the final prototypes must have at least four pages each to show a substantial amount of the design and how it would function.
· Categories page — A categories page/navigation must be present that solves the issue of categories being hard to find that can be found in the current website design.
· Easy to use navigation — Ease of navigation on the current design is poor therefore the designs for the Xbox and mobile apps must fix this issue as ease of use is important for a rich user journey.
· Video descriptions — Every video on shown in the designs must have video descriptions so that the user can decide whether or not that content is for them quickly and easily.
· Featured slot on homepage — The homepage on both final designs must include a featured slot so that Moving image archive can promote and target specific video content to its users as the current design is currently missing this.
· Simplistic design — The design for the final prototypes must be as simplistic as possible partially due to the mediums that the project is dealing with and partially due to the current design is too cluttered and must be redesigned to reduce this issue to make their content more user friendly.
Design, Planning and implementation
Several sketches for each page were created with different layout/design ideas in mind. From each bunch of sketches a preferred design was chosen to be moved to the next stage to be refined into a more complete design idea.
User Interface Style Guide
A user interface style guide was made so as to keep a design structure throughout the project and make sure any elements designed for the project in the future would be kept consistent.
Story boards were created in order to plan out the users journey throughout the apps so that refining the design and creating the prototypes would be easier.
Medium fidelity wireframes
At this stage in the project the sketches and storyboards were used to create a more detailed and fleshed out visual representation of the initial design idea. It was at this stage more features were put into the design such as search button and download option.
The final deliverable of this project requires working prototypes, therefore prototyping tools must be compared to decide which tool is the best for this project. The three prototyping tools that were looked at are InvisionApp, MarvelApp and MockingBot. After using all three of these prototypes it was decided that InvisionApp was the best prototyping tool for this project as it allows for creating many different types of prototypes with ease of use, convenient sharing options and useful transition effects and features.
Using the medium fidelity wireframes a final design was crafted with all features and functions fully implemented and designed. A bright pink, white and black colour scheme was decided for the final design to help separate its apps from others already out on the market. Helvetica was the font that matched the design the best and helped it have a clean finish.
After showing the final designs to several users it became apparent that the final design was missing a few vital features. Things brought to light via feedback:
· The Xbox app was missing a back feature to take the user back to the previous page.
· Font sizes were too small on the Xbox app design.
· Less and bigger graphical elements were preferred on the mobile app design.
· The mobile app navigation menu was missing a ‘X’ button to collapse the menu.
The feedback received was then used to further refine the designs that had been created and all issues brought to light by the user feedback was corrected for the final prototype.
The mobile app prototype can be found HERE.
The TV interface (Xbox app) prototype can be found HERE.
Each page that was designed was added into a clickable prototype via InvisionApp very carefully making sure that all pages were linked correctly and all page effects were appropriate for use. During testing it was found that on the mobile design a fixed header could be applied so that the design scrolled like it would if it was an app on your phone, this feature was applied to the prototype as it added even more functionality to the final prototype.
The final design meets almost all of the goals set by the research conducted in the research stage of the project.
The final design implements a simplistic card/grid UI well in accordance to (Leeson 2016 a) which breaks up the content for the user and allows them to easily decide what content is relevant to them. The use of bold colours during this project was in the end a bad choice as the chosen colour scheme was not the best and didn’t inject the personality it was originally intended to inject into the project like Leeson (2016 b) stated that it should. Just like May and Clum (2017) stated the use of flat design in this project worked well as it provided highly functional and user friendly designs for both platform that this project dealt with. Using the 10 foot UI principles learnt from the research stage the final design benefits greatly from the low information density (Smyk 2017) and adhering to principles such as TV safe zone(Microsoft 2017) and minimum font size of 22px (Murgrabia 2016) the design was made both more user friendly and hardware friendly.
Throughout the waterfall methodology has been used to manage this project and make sure that everything was done and organised. This methodology worked well with this project because the requirements for the project were know very early into this project and as a single person working on a project the linear approach helped keep the project easy to understand and manage.
If this project was to be carried out again the same methodology and design process would be used however some decisions such are the colour scheme and platforms designed for would be changed as the colour scheme in this instance didn’t work well and it is harder to design a mobile app than a tablet app due to the lack of design real estate to work with.
Bowes, J., 2014. Agile vs Waterfall — Comparing project management methods [viewed 9 May 2017]. Available from: https://manifesto.co.uk/agile-vs-waterfall-comparing-project-management-methodologies/
Cousins, C., 2016. How to Design for Long-Form Content | Design Shack [viewed 11 May 2017]. Available from: https://designshack.net/articles/layouts/how-to-design-for-long-form-content/
ANON., 2017. DiscoverDesign Handbook [viewed 9 May 2017]. Available from: https://www.discoverdesign.org/handbook
Gremillion, B., 2016. A Hands-On Guide to Mobile-First Design [viewed 19 May 2017]. Available from: https://www.uxpin.com/studio/blog/a-hands-on-guide-to-mobile-first-design/
ISTQB EXAM CERTIFICATION, 2017. What is Waterfall model- advantages, disadvantages and when to use it? [viewed 9 May 2017]. Available from: http://istqbexamcertification.com/what-is-waterfall-model-advantages-disadvantages-and-when-to-use-it/
Leeson, J., 2016. Web Design Trends for 2017 — Future of Digital Web Design | Zazzle Media [viewed 11 May 2017]. Available from: https://www.zazzlemedia.co.uk/blog/digital-design-trends/#gref
Leeson, J., 2016. 10 top UI trends for 2017 [viewed 11 May 2017]. Available from: http://www.creativebloq.com/features/10-top-ui-trends-for-2017
May, T. and L. Clum, 2017. The beginner’s guide to flat design [viewed 11 May 2017]. Available from: http://www.creativebloq.com/graphic-design/what-flat-design-3132112
Microsoft, 2017. Designing for Xbox and TV [viewed 19 May 2017]. Available from: https://docs.microsoft.com/en-us/windows/uwp/input-and-devices/designing-for-tv#tv-safe-area
Murgrabia, M., 2016. Creating Web Content for TV — Opera TV — Opera TV [viewed 19 May 2017]. Available from: https://wiki.operatv.tv/display/OTV/Creating+Web+Content+for+TV#text
Potvin, P., 2016. Designing a 10ft UI — You.i TV — Medium [viewed 19 May 2017]. Available from: https://medium.com/you-i-tv/designing-for-10ft-ceeb202c1315
Smyk, A., 2017. Designing User Experiences for the 10-Foot UI | Creative Cloud blog by Adobe [viewed 19 May 2017]. Available from: https://blogs.adobe.com/creativecloud/designing-user-experiences-for-the-10-foot-ui/