UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf ·...

12
UX Design Report By Daniel Phillips B00064912

Transcript of UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf ·...

Page 1: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

UX Design ReportBy Daniel Phillips B00064912

2WellClik UX Design Report

INTRODUCTION 3

CLIENT FEEDBACK amp IMPLEMENTATION 4

PSYCHOLOGICAL FACTORS 5

INTERACTION DESIGN PRINCIPLES 6

MOBILE DESIGN PRINCIPLES 7

USABILITY TESTING 8

RESULTS OF USABILITY TEST 9

HIGH FIDELITY PROTOTYPE 10

SUMMARY 11

CONTENTS

3WellClik UX Design Report

INTRODUCTION

PROBLEM STATEMENT

BANK OF IRELANDrsquoS ldquoBE AT YOUR BESTrdquo APP

Wellclik is a booking App that connects wellness providers with new customers in a safe and secure way Wellcliks clients are Wellness and Fitness providers Wellclik users are fitness enthusiasts that come to the App not only to book an wellness appointment but to access extra content such as tutorials recipes and to get tips and motivation from the groupThat makes Wellclik different from itrsquos competitors is they provide ratingsreviews and qualifications of all there wellness providers and they make it easy to find a class anywhere in the world

The Wellclik App was designed to link wellness and fitness providers with clients in a safe and secure on line environment and allow the providers to provide feedback and tips to the clients Wellclik has observed that the booking Apps currently available on the market only provide a place to book an appointment and do not provide anywhere for wellness and fitness providers to give tips extra content and motivation Wellclik intends to fill this gap in the market by providing a secure area for wellness and fitness providers to interact with their clients and provide them with the motivation they need

As part of Bank of Irelandrsquos ldquoBe At Your Bestrdquo programme Wellclik has been commissioned to provide a wellness and fitness booking App exclusively for Bank of Ireland staff The ldquoBe At Your Bestrdquo programme was introduced in 2013 to support the overall mental and physical well-being of Bank of Ireland staff so they could survive and thrive in an ever more competitive and challenging work environment What the Bank of Ireland ldquoBe At Your Bestrdquo App will provide is a quick and easy way to find and book wellness and fitness classes in or close to anyone of Bank of Irelandrsquos branches nationwide

4WellClik UX Design Report

CLIENT FEEDBACK amp IMPLEMENTATION

As the Bank of Ireland ldquoBe At Your Bestrdquo App is a unique product and after consultation with the client a full review of the low fidelity prototype was required Clarification of the functionality required for the App was arrived at and certain changes were requested

bull The client has indicated that filtering results based on location is more preferable than the use of a class search method

bull Through research it has been discovered that Geo-location could prove problematic in arearsquos such as Dublin and a search based on county should be used

bull The client has also confirmed that only push notification will be required for this specific App

bull A list view of classes available is preferable over a calender viewbull The client has also requested that the cancellation of a class is made

easy These changes have been implemented into the new design and we are now confidant that the prototype will fully meet the clients needs

5WellClik UX Design Report

PSYCHOLOGICAL FACTORS

A number of Psychological factors were taken into account when developing the ldquoBe At Your Bestrdquo App Firstly the login process was simplified Studies have show the average humans cognitive memory has the ability to store seven pieces of information this can be increased by chunking the data into smaller more manageable parts As most users of this App may have many different passwords and user names on all the different account they hold To make login easier the decision was made to remove the process of needing to remember the password each time the user logs in and they only need to login once when installing the App

The App has taken a number of heuristics into account when developing the main features for examplebull The Scarcity heuristic was applied when designing the ldquoDeal of the

Weekrdquo screen meaning people are more motivated to purchase a class if the perceive there are a limited number of places left

bull The Naive Diversification heuristic was applied when designing the login screen and profile screen by giving the user less options and fields to fill out the user is more likely to fill out those screen correctly It was also applied to the ldquodeals of the weekrdquo screen by using the userrsquos purchase history to only show current deals they may be interested in

bull The Fluency heuristic was used when developing the search option for available class The App makes the process easier by auto populating a drop-down menu as you type a location Then the results of available classes are listed with your purchase history in mind Meaning if you have choose to book a yoga class on your last five purchases the available yoga classes will be first on your results list

The App also takes into account the Pavlovian Reflex to insure users will return to the App by providing visual and auditory cues when getting notifications When a user receives a new notifications the phone will give an auditory cue that a new notification has been posted and when you open the App the amount of new notifications are shown in red beside the notifications tab in the menu bar

6WellClik UX Design Report

INTERACTION DESIGN PRINCIPLES

When designing the functionality and navigation of the App interaction design principles were taken into account and guidelines from the Nielsen Norman Group were followedHow these guidelines were implemented into the design are as follows

Fittsrsquos Lawbull Command buttons links menu items and all other interactive

elements are distinguished from non-interactive elements by a large coloured click-able box surrounding the text

bull Drop-down menursquos have been avoided where possible and click-able tabs have been used instead Where drop-down menus have been used the auto populate feature has been applied to avoid excessive scrolling

bull Large click-able arearsquos have been designed for all interactions and space has been afforded between links on the same row ie the navigation menu

ReadabilityTo maximize readability all text has been placed on a pale or white background The Google font Roboto has been used to ensure type will be uniform across all devices Text has also been kept to a minimum height of 15px and text on a center aligned text has been avoided

ColourAs approximately 10 of males have some form of colour blindness the App does not rely solely on colour as a visual cue and uses a text secondary cue to convey information

Efficiency of the UserWhen presented with a error message it has been written telling the user specifically what the error is and how it can be remedied

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 2: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

2WellClik UX Design Report

INTRODUCTION 3

CLIENT FEEDBACK amp IMPLEMENTATION 4

PSYCHOLOGICAL FACTORS 5

INTERACTION DESIGN PRINCIPLES 6

MOBILE DESIGN PRINCIPLES 7

USABILITY TESTING 8

RESULTS OF USABILITY TEST 9

HIGH FIDELITY PROTOTYPE 10

SUMMARY 11

CONTENTS

3WellClik UX Design Report

INTRODUCTION

PROBLEM STATEMENT

BANK OF IRELANDrsquoS ldquoBE AT YOUR BESTrdquo APP

Wellclik is a booking App that connects wellness providers with new customers in a safe and secure way Wellcliks clients are Wellness and Fitness providers Wellclik users are fitness enthusiasts that come to the App not only to book an wellness appointment but to access extra content such as tutorials recipes and to get tips and motivation from the groupThat makes Wellclik different from itrsquos competitors is they provide ratingsreviews and qualifications of all there wellness providers and they make it easy to find a class anywhere in the world

The Wellclik App was designed to link wellness and fitness providers with clients in a safe and secure on line environment and allow the providers to provide feedback and tips to the clients Wellclik has observed that the booking Apps currently available on the market only provide a place to book an appointment and do not provide anywhere for wellness and fitness providers to give tips extra content and motivation Wellclik intends to fill this gap in the market by providing a secure area for wellness and fitness providers to interact with their clients and provide them with the motivation they need

As part of Bank of Irelandrsquos ldquoBe At Your Bestrdquo programme Wellclik has been commissioned to provide a wellness and fitness booking App exclusively for Bank of Ireland staff The ldquoBe At Your Bestrdquo programme was introduced in 2013 to support the overall mental and physical well-being of Bank of Ireland staff so they could survive and thrive in an ever more competitive and challenging work environment What the Bank of Ireland ldquoBe At Your Bestrdquo App will provide is a quick and easy way to find and book wellness and fitness classes in or close to anyone of Bank of Irelandrsquos branches nationwide

4WellClik UX Design Report

CLIENT FEEDBACK amp IMPLEMENTATION

As the Bank of Ireland ldquoBe At Your Bestrdquo App is a unique product and after consultation with the client a full review of the low fidelity prototype was required Clarification of the functionality required for the App was arrived at and certain changes were requested

bull The client has indicated that filtering results based on location is more preferable than the use of a class search method

bull Through research it has been discovered that Geo-location could prove problematic in arearsquos such as Dublin and a search based on county should be used

bull The client has also confirmed that only push notification will be required for this specific App

bull A list view of classes available is preferable over a calender viewbull The client has also requested that the cancellation of a class is made

easy These changes have been implemented into the new design and we are now confidant that the prototype will fully meet the clients needs

5WellClik UX Design Report

PSYCHOLOGICAL FACTORS

A number of Psychological factors were taken into account when developing the ldquoBe At Your Bestrdquo App Firstly the login process was simplified Studies have show the average humans cognitive memory has the ability to store seven pieces of information this can be increased by chunking the data into smaller more manageable parts As most users of this App may have many different passwords and user names on all the different account they hold To make login easier the decision was made to remove the process of needing to remember the password each time the user logs in and they only need to login once when installing the App

The App has taken a number of heuristics into account when developing the main features for examplebull The Scarcity heuristic was applied when designing the ldquoDeal of the

Weekrdquo screen meaning people are more motivated to purchase a class if the perceive there are a limited number of places left

bull The Naive Diversification heuristic was applied when designing the login screen and profile screen by giving the user less options and fields to fill out the user is more likely to fill out those screen correctly It was also applied to the ldquodeals of the weekrdquo screen by using the userrsquos purchase history to only show current deals they may be interested in

bull The Fluency heuristic was used when developing the search option for available class The App makes the process easier by auto populating a drop-down menu as you type a location Then the results of available classes are listed with your purchase history in mind Meaning if you have choose to book a yoga class on your last five purchases the available yoga classes will be first on your results list

The App also takes into account the Pavlovian Reflex to insure users will return to the App by providing visual and auditory cues when getting notifications When a user receives a new notifications the phone will give an auditory cue that a new notification has been posted and when you open the App the amount of new notifications are shown in red beside the notifications tab in the menu bar

6WellClik UX Design Report

INTERACTION DESIGN PRINCIPLES

When designing the functionality and navigation of the App interaction design principles were taken into account and guidelines from the Nielsen Norman Group were followedHow these guidelines were implemented into the design are as follows

Fittsrsquos Lawbull Command buttons links menu items and all other interactive

elements are distinguished from non-interactive elements by a large coloured click-able box surrounding the text

bull Drop-down menursquos have been avoided where possible and click-able tabs have been used instead Where drop-down menus have been used the auto populate feature has been applied to avoid excessive scrolling

bull Large click-able arearsquos have been designed for all interactions and space has been afforded between links on the same row ie the navigation menu

ReadabilityTo maximize readability all text has been placed on a pale or white background The Google font Roboto has been used to ensure type will be uniform across all devices Text has also been kept to a minimum height of 15px and text on a center aligned text has been avoided

ColourAs approximately 10 of males have some form of colour blindness the App does not rely solely on colour as a visual cue and uses a text secondary cue to convey information

Efficiency of the UserWhen presented with a error message it has been written telling the user specifically what the error is and how it can be remedied

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 3: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

3WellClik UX Design Report

INTRODUCTION

PROBLEM STATEMENT

BANK OF IRELANDrsquoS ldquoBE AT YOUR BESTrdquo APP

Wellclik is a booking App that connects wellness providers with new customers in a safe and secure way Wellcliks clients are Wellness and Fitness providers Wellclik users are fitness enthusiasts that come to the App not only to book an wellness appointment but to access extra content such as tutorials recipes and to get tips and motivation from the groupThat makes Wellclik different from itrsquos competitors is they provide ratingsreviews and qualifications of all there wellness providers and they make it easy to find a class anywhere in the world

The Wellclik App was designed to link wellness and fitness providers with clients in a safe and secure on line environment and allow the providers to provide feedback and tips to the clients Wellclik has observed that the booking Apps currently available on the market only provide a place to book an appointment and do not provide anywhere for wellness and fitness providers to give tips extra content and motivation Wellclik intends to fill this gap in the market by providing a secure area for wellness and fitness providers to interact with their clients and provide them with the motivation they need

As part of Bank of Irelandrsquos ldquoBe At Your Bestrdquo programme Wellclik has been commissioned to provide a wellness and fitness booking App exclusively for Bank of Ireland staff The ldquoBe At Your Bestrdquo programme was introduced in 2013 to support the overall mental and physical well-being of Bank of Ireland staff so they could survive and thrive in an ever more competitive and challenging work environment What the Bank of Ireland ldquoBe At Your Bestrdquo App will provide is a quick and easy way to find and book wellness and fitness classes in or close to anyone of Bank of Irelandrsquos branches nationwide

4WellClik UX Design Report

CLIENT FEEDBACK amp IMPLEMENTATION

As the Bank of Ireland ldquoBe At Your Bestrdquo App is a unique product and after consultation with the client a full review of the low fidelity prototype was required Clarification of the functionality required for the App was arrived at and certain changes were requested

bull The client has indicated that filtering results based on location is more preferable than the use of a class search method

bull Through research it has been discovered that Geo-location could prove problematic in arearsquos such as Dublin and a search based on county should be used

bull The client has also confirmed that only push notification will be required for this specific App

bull A list view of classes available is preferable over a calender viewbull The client has also requested that the cancellation of a class is made

easy These changes have been implemented into the new design and we are now confidant that the prototype will fully meet the clients needs

5WellClik UX Design Report

PSYCHOLOGICAL FACTORS

A number of Psychological factors were taken into account when developing the ldquoBe At Your Bestrdquo App Firstly the login process was simplified Studies have show the average humans cognitive memory has the ability to store seven pieces of information this can be increased by chunking the data into smaller more manageable parts As most users of this App may have many different passwords and user names on all the different account they hold To make login easier the decision was made to remove the process of needing to remember the password each time the user logs in and they only need to login once when installing the App

The App has taken a number of heuristics into account when developing the main features for examplebull The Scarcity heuristic was applied when designing the ldquoDeal of the

Weekrdquo screen meaning people are more motivated to purchase a class if the perceive there are a limited number of places left

bull The Naive Diversification heuristic was applied when designing the login screen and profile screen by giving the user less options and fields to fill out the user is more likely to fill out those screen correctly It was also applied to the ldquodeals of the weekrdquo screen by using the userrsquos purchase history to only show current deals they may be interested in

bull The Fluency heuristic was used when developing the search option for available class The App makes the process easier by auto populating a drop-down menu as you type a location Then the results of available classes are listed with your purchase history in mind Meaning if you have choose to book a yoga class on your last five purchases the available yoga classes will be first on your results list

The App also takes into account the Pavlovian Reflex to insure users will return to the App by providing visual and auditory cues when getting notifications When a user receives a new notifications the phone will give an auditory cue that a new notification has been posted and when you open the App the amount of new notifications are shown in red beside the notifications tab in the menu bar

6WellClik UX Design Report

INTERACTION DESIGN PRINCIPLES

When designing the functionality and navigation of the App interaction design principles were taken into account and guidelines from the Nielsen Norman Group were followedHow these guidelines were implemented into the design are as follows

Fittsrsquos Lawbull Command buttons links menu items and all other interactive

elements are distinguished from non-interactive elements by a large coloured click-able box surrounding the text

bull Drop-down menursquos have been avoided where possible and click-able tabs have been used instead Where drop-down menus have been used the auto populate feature has been applied to avoid excessive scrolling

bull Large click-able arearsquos have been designed for all interactions and space has been afforded between links on the same row ie the navigation menu

ReadabilityTo maximize readability all text has been placed on a pale or white background The Google font Roboto has been used to ensure type will be uniform across all devices Text has also been kept to a minimum height of 15px and text on a center aligned text has been avoided

ColourAs approximately 10 of males have some form of colour blindness the App does not rely solely on colour as a visual cue and uses a text secondary cue to convey information

Efficiency of the UserWhen presented with a error message it has been written telling the user specifically what the error is and how it can be remedied

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 4: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

4WellClik UX Design Report

CLIENT FEEDBACK amp IMPLEMENTATION

As the Bank of Ireland ldquoBe At Your Bestrdquo App is a unique product and after consultation with the client a full review of the low fidelity prototype was required Clarification of the functionality required for the App was arrived at and certain changes were requested

bull The client has indicated that filtering results based on location is more preferable than the use of a class search method

bull Through research it has been discovered that Geo-location could prove problematic in arearsquos such as Dublin and a search based on county should be used

bull The client has also confirmed that only push notification will be required for this specific App

bull A list view of classes available is preferable over a calender viewbull The client has also requested that the cancellation of a class is made

easy These changes have been implemented into the new design and we are now confidant that the prototype will fully meet the clients needs

5WellClik UX Design Report

PSYCHOLOGICAL FACTORS

A number of Psychological factors were taken into account when developing the ldquoBe At Your Bestrdquo App Firstly the login process was simplified Studies have show the average humans cognitive memory has the ability to store seven pieces of information this can be increased by chunking the data into smaller more manageable parts As most users of this App may have many different passwords and user names on all the different account they hold To make login easier the decision was made to remove the process of needing to remember the password each time the user logs in and they only need to login once when installing the App

The App has taken a number of heuristics into account when developing the main features for examplebull The Scarcity heuristic was applied when designing the ldquoDeal of the

Weekrdquo screen meaning people are more motivated to purchase a class if the perceive there are a limited number of places left

bull The Naive Diversification heuristic was applied when designing the login screen and profile screen by giving the user less options and fields to fill out the user is more likely to fill out those screen correctly It was also applied to the ldquodeals of the weekrdquo screen by using the userrsquos purchase history to only show current deals they may be interested in

bull The Fluency heuristic was used when developing the search option for available class The App makes the process easier by auto populating a drop-down menu as you type a location Then the results of available classes are listed with your purchase history in mind Meaning if you have choose to book a yoga class on your last five purchases the available yoga classes will be first on your results list

The App also takes into account the Pavlovian Reflex to insure users will return to the App by providing visual and auditory cues when getting notifications When a user receives a new notifications the phone will give an auditory cue that a new notification has been posted and when you open the App the amount of new notifications are shown in red beside the notifications tab in the menu bar

6WellClik UX Design Report

INTERACTION DESIGN PRINCIPLES

When designing the functionality and navigation of the App interaction design principles were taken into account and guidelines from the Nielsen Norman Group were followedHow these guidelines were implemented into the design are as follows

Fittsrsquos Lawbull Command buttons links menu items and all other interactive

elements are distinguished from non-interactive elements by a large coloured click-able box surrounding the text

bull Drop-down menursquos have been avoided where possible and click-able tabs have been used instead Where drop-down menus have been used the auto populate feature has been applied to avoid excessive scrolling

bull Large click-able arearsquos have been designed for all interactions and space has been afforded between links on the same row ie the navigation menu

ReadabilityTo maximize readability all text has been placed on a pale or white background The Google font Roboto has been used to ensure type will be uniform across all devices Text has also been kept to a minimum height of 15px and text on a center aligned text has been avoided

ColourAs approximately 10 of males have some form of colour blindness the App does not rely solely on colour as a visual cue and uses a text secondary cue to convey information

Efficiency of the UserWhen presented with a error message it has been written telling the user specifically what the error is and how it can be remedied

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 5: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

5WellClik UX Design Report

PSYCHOLOGICAL FACTORS

A number of Psychological factors were taken into account when developing the ldquoBe At Your Bestrdquo App Firstly the login process was simplified Studies have show the average humans cognitive memory has the ability to store seven pieces of information this can be increased by chunking the data into smaller more manageable parts As most users of this App may have many different passwords and user names on all the different account they hold To make login easier the decision was made to remove the process of needing to remember the password each time the user logs in and they only need to login once when installing the App

The App has taken a number of heuristics into account when developing the main features for examplebull The Scarcity heuristic was applied when designing the ldquoDeal of the

Weekrdquo screen meaning people are more motivated to purchase a class if the perceive there are a limited number of places left

bull The Naive Diversification heuristic was applied when designing the login screen and profile screen by giving the user less options and fields to fill out the user is more likely to fill out those screen correctly It was also applied to the ldquodeals of the weekrdquo screen by using the userrsquos purchase history to only show current deals they may be interested in

bull The Fluency heuristic was used when developing the search option for available class The App makes the process easier by auto populating a drop-down menu as you type a location Then the results of available classes are listed with your purchase history in mind Meaning if you have choose to book a yoga class on your last five purchases the available yoga classes will be first on your results list

The App also takes into account the Pavlovian Reflex to insure users will return to the App by providing visual and auditory cues when getting notifications When a user receives a new notifications the phone will give an auditory cue that a new notification has been posted and when you open the App the amount of new notifications are shown in red beside the notifications tab in the menu bar

6WellClik UX Design Report

INTERACTION DESIGN PRINCIPLES

When designing the functionality and navigation of the App interaction design principles were taken into account and guidelines from the Nielsen Norman Group were followedHow these guidelines were implemented into the design are as follows

Fittsrsquos Lawbull Command buttons links menu items and all other interactive

elements are distinguished from non-interactive elements by a large coloured click-able box surrounding the text

bull Drop-down menursquos have been avoided where possible and click-able tabs have been used instead Where drop-down menus have been used the auto populate feature has been applied to avoid excessive scrolling

bull Large click-able arearsquos have been designed for all interactions and space has been afforded between links on the same row ie the navigation menu

ReadabilityTo maximize readability all text has been placed on a pale or white background The Google font Roboto has been used to ensure type will be uniform across all devices Text has also been kept to a minimum height of 15px and text on a center aligned text has been avoided

ColourAs approximately 10 of males have some form of colour blindness the App does not rely solely on colour as a visual cue and uses a text secondary cue to convey information

Efficiency of the UserWhen presented with a error message it has been written telling the user specifically what the error is and how it can be remedied

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 6: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

6WellClik UX Design Report

INTERACTION DESIGN PRINCIPLES

When designing the functionality and navigation of the App interaction design principles were taken into account and guidelines from the Nielsen Norman Group were followedHow these guidelines were implemented into the design are as follows

Fittsrsquos Lawbull Command buttons links menu items and all other interactive

elements are distinguished from non-interactive elements by a large coloured click-able box surrounding the text

bull Drop-down menursquos have been avoided where possible and click-able tabs have been used instead Where drop-down menus have been used the auto populate feature has been applied to avoid excessive scrolling

bull Large click-able arearsquos have been designed for all interactions and space has been afforded between links on the same row ie the navigation menu

ReadabilityTo maximize readability all text has been placed on a pale or white background The Google font Roboto has been used to ensure type will be uniform across all devices Text has also been kept to a minimum height of 15px and text on a center aligned text has been avoided

ColourAs approximately 10 of males have some form of colour blindness the App does not rely solely on colour as a visual cue and uses a text secondary cue to convey information

Efficiency of the UserWhen presented with a error message it has been written telling the user specifically what the error is and how it can be remedied

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 7: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

7WellClik UX Design Report

MOBILE DESIGN PRINCIPLES

When designing the screens for the ldquoBe At Your Bestrdquo App Google material design and mobile design principles were followed In these research studies the following has been identifiedbull 94 of Apps on the market are used in portrait orientationbull 49 of user operate their phone using a single handbull 75 of user rely on their thumb to operate their phoneIn line with this research the navigation menu has been placed at the bottom of the screen and all buttons have been placed within easy reach by the thumb and have large click-able arearsquos

The design has also followed the guideline of content over navigation by allowing the user to book a class straight from the ldquoavailable classesrdquomenu without needing to go to the individual page to book from therethis allows the user to book a class within 3 clicks from opening the App

Tap target size has also been taken into consideration with large click-able arearsquos around all buttons and interactive elements and a 10px margin between target areas

As mentioned earlier in this report and following Googlersquos material design the typeface Roboto has been used throughout the App with a minimum pixels height of 15px all buttons and navigation have also been designed with Googlersquos best practice in mind

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 8: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

8WellClik UX Design Report

USABILITY TESTING

OVERVIEW

METHODOLOGY

FINDINGS

As part of the development process usability tests were carried out with the high fidelity prototype to test the functionality design and layout of the App Random members of the public were asked to test the App and perform five tasks1 To log into the App 2 Find a Yoga class in Blanchardstown 3 Book and pay for that class4 Find and read their notifications5 Find the upcoming classes and cancel one of them The results of these tests were then studied and changes were made to the final design

In conducting the usability tests the guerrilla method of testing was used Whereby five random members of the public were invited to take part in the testThe participants were thanked for their involvement The context of the test was explained to them and how long it will take and participants were encouraged to think aloud while performing the tasks so an honest reflection of how the App was performing could be ascertained and potential changes to the design could be identifiedDuring testing the only interaction the facilitator had with the participants was to tell them the tasks His main role was to observe them performing the tasks and record difficulties they may be having preforming the tasksTasks were rated by S = successful F = failure and P = partial success This meant if the participant was able to preform the task quickly and with no prompting that was awarded a S if the task could not be performed on first attempt or prompting was needed by the facilitator the task was given a P and if the participant could not preform the task the task was given a F

From the results of the usability tests performed (results on next page) certain changes were identified and implemented into the design The changes were as followsbull The icon for deal of the week should be changed to make it more

clear bull Cancellation should be accessible from the class page and from the

notification message bull The colour of the cancellation button should be changed to

distinguish it from other buttonsbull A visual indication of new notifications on the home screen would

be a good addition bull The ability to access class information from the available class list

was assumed and link should be provided on class icon The positive feedback from the testing was as followsbull Logging into App was intuitive and easybull Participants like the colour scheme and thought it matched the

Bank of Ireland brandbull Finding an available class was easy and took less time than

competitor applications bull Booking and paying for a class was simple and participants liked

the remember details featureThe results of these usability tests have been implemented into the prototype

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 9: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

9WellClik UX Design Report

RESULTS OF USABILITY TEST

Barbara

Andrea

Shane

Andrei

Geraldine

Task 1 Log into App

Task 2 Find Yoga Class inBlanchardstown

Task 3Book and pay

for class

Task 4 Find and readnotifications

Task 5 Find upcoming classes

and cancel one

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S was able to find log into App with no prompting

S went through the necessary steps in order to find the yoga class

S found the class and said it was where she would expect it to be

S found the class with no prompting

S found the class and remarked how easy it was compared to App he uses

S found the class and liked the layout of the available classes list

S was able to book and pay for class and liked the remember me feature

S was able to book and pay

S was able to book and pay and liked the confirmation message

S was able to book and pay

S was able to book and pay and liked that the class had been updated into timetable

P needed prompting to distinguish between deal of the week and notification icons

S was able to find notifications and read them

P was confused between notification icon and deal of the week icon

P found notifications but thought deal of the week icon looked too similar

P was able to find notifications but needed prompting

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

F found upcoming classes but thought cancellation could be done from class page

F found upcoming classes but couldnrsquot find cancellation page

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 10: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

10WellClik UX Design Report

HIGH FIDELITY PROTOTYPE

httpspreviewuxpincom3e78188086e44575097243182a52e34b37efd1a7pages67403773

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 11: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11

11WellClik UX Design Report

SUMMARY

Through consultation with the client applying interaction and mobile design principles and extensive testing WellClik has provided a product that will allow for easier location and payment of wellness and fitness classesIn the design and testing process problem arearsquos were identified and solutions implemented into the final design to provide an App that should perform seamlesslyWellClik feel confidant that this product will more than satisfy our clients needs and will provide a way to book and pay for wellness and fitness classes that is currently unavailable on the market today

BIBLIOGRAPHY

GOOGLE 2014 Components [online] [Accessed 6 May 2017] Available from World Wide Web wwwmaterialioguidelinescomponentsbottom-navigationhtml

TOGNAZZZINI Bruce 2014 First Principles of Interaction Design [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwasktogcomatcprinciples-of-interaction-design

YOCCO Victor 2015 Think Fast Using Heuristics to Increase Use of Your Product [online] [Accessed 6 Apr 2017] Available from World Wide Web wwwsmashingmagazinecom201507using-heuristics-to-increase-use-of-your-product

Page 12: UX Design Report - dpdesigns.codpdesigns.co/wp-content/uploads/2017/05/UX-Design-Report.pdf · USABILITY TESTING 8 RESULTS OF USABILITY TEST 9 HIGH FIDELITY PROTOTYPE 10 SUMMARY 11