18
Assignment Cover Sheet MSc in User Experience Design Student Name: Stephen Norman Student Number: N00147768 Programme: MSc UX Design Year of Programme: 2016 Module Name: Interaction Design Assignment: Interaction Design Project Assignment Deadline: 31/01/2016 I declare that that this submission is my own work. Where I have read, consulted and used the work of others I have acknowledged this in the text. Signature: Stephen Norman Date: 31/01/2016

Interaction_Design_Project_N00147768

Embed Size (px)

Citation preview

Page 1: Interaction_Design_Project_N00147768

Assignment Cover Sheet

MSc in User Experience Design

Student Name: Stephen Norman

Student Number: N00147768

Programme: MSc UX Design

Year of Programme: 2016

Module Name: Interaction Design

Assignment: Interaction Design Project

Assignment Deadline: 31/01/2016

I declare that that this submission is my own work. Where I have read, consulted and used the work of others I have acknowledged this in the text.

Signature: Stephen Norman Date: 31/01/2016

Page 2: Interaction_Design_Project_N00147768

Table of Contents 1. Introduction ................................................................................................................................ 3

2. The Current Design ..................................................................................................................... 3

2.1. Identifying Problems ........................................................................................................... 3

2.2. Hypothesis & Business Requirements ................................................................................ 3

2.3. Exploratory Research Methods ........................................................................................... 4

2.4. Findings ............................................................................................................................... 4

2.5. Personas .............................................................................................................................. 5

2.6. Scenarios ............................................................................................................................. 5

2.7. Interviews ............................................................................................................................ 5

3. Ideation ....................................................................................................................................... 7

3.1. Wireframes ......................................................................................................................... 7

3.2. Interactive Prototype .......................................................................................................... 7

4. Usability Testing .......................................................................................................................... 9

5. Conclusion & Self-Assessment .................................................................................................... 9

6. Bibliography .............................................................................................................................. 10

7. Appendix ................................................................................................................................... 10

7.1. Exploratory Questionnaire ................................................................................................ 10

7.2. Screener Questionnaire .................................................................................................... 10

7.3. Script ................................................................................................................................. 10

7.4. Consent Form .................................................................................................................... 11

7.5. Card Sorting ....................................................................................................................... 13

7.6. Personas ............................................................................................................................ 15

7.7. Interview Videos ............................................................................................................... 16

7.8. Task Mapping .................................................................................................................... 17

7.9. Wireframes ....................................................................................................................... 17

7.10. Interactive Prototypes ....................................................................................................... 18

Page 3: Interaction_Design_Project_N00147768

1. Introduction

This paper is set out to discuss and summarise the redesign of the An Post website through

multiple user research methods. However, the design itself is merely the result of the

research, and the paper will aim to focus predominantly on the research methods. It will

begin by discussing the research goals, and how they will be best addressed. From

establishing the goals, the discussion will then move to a detailed overview of the methods

used, their effectiveness and any problems that were encountered by the research team. It

will also aim to align the prototype design with the research conducted and discuss the testing

methods. Finally the design will be tested to ascertain if the research goals have been

understood.

2. The Current Design

It was decided to focus efforts on Anpost.ie as it contained many user interface (UI) and user

experience (UX) issues. Ideally, when conducting initial research of a particular website, the

business in question would share some internal statistics as a baseline for assessment.

However, for this project, these elements are merely a hypothesis formulated from the

research team’s opinions.

2.1. Identifying Problems

Initial findings were the website lacked any clear information architecture (IA), which

impaired the discoverability of many services. Mobile consideration is also lacking, although

it does have an M-Dot 1 which provides online via desktop site. This detracts from the UX as

the desktop site renders poorly on a mobile device and use of the touch elements is near

impossible. With 47%2 of the general market using a mobile device online, consideration must

be made for a mobile optimised platform. Although the development of a responsive site is

out of scope it can be considered that the project’s design will be aimed at functionality for

both desktop and mobile users.

2.2. Hypothesis & Business Requirements

A hypothesis was created from the problems encountered by the research team during their

initial study of Anpost.ie. Several issues emerged;

Lack of clarity of full suite of products and services offered.

Poor readability – Site uses own business “lingo”.

Confusion around target market; Personal & Business customers.

1 Mobile specific website not to be confused with Responsive Web Design 2 46.5% Findings from initial questionnaire. (http://bit.ly/1K6KmNi)

Page 4: Interaction_Design_Project_N00147768

The goals set from above were; Who is the customer? Which services are/are not being used,

why?

2.3. Exploratory Research Methods

2.3.1. Competitor Analysis

A competitor analysis was conducted prior to making a decision on which direction to take

the research. The purpose of which was to grasp an understanding of the postal sector. The

research was done on an ad-hoc basis, only collecting the team’s initial thoughts. The

competitors were DHL3, UPS4, NightLine5, and USPS6. A comparison was made to assess how

they structured their information, and were their popular services discoverable. Given more

time a SWOT7 analysis would have been used. On closer examination of USPS, information

like the “Quick Tools” tab was identified to be their priority services, and a similar approach

would be taken on restructuring An Post’s website. During this study the importance of the

“Calculate Postage” service and functionality was overlooked.

2.3.2. Exploratory Questionnaire

The research requirement was to cover both quantitative and qualitative methods, and it was

decided to progress this with an exploratory survey using Google’s form builder. This was

used for its ease of implementation, and effective user reach. The form would be constructed

in three sections. The first two were quantitative user segmentation questions. The third

section collected information on discoverability and user knowledge of services. The final

section four, covered the UI, and site performance. Users who answered “No” to “Do you

use AnPost.ie?” were sent to a hidden section, which asked the same final question as in

section four. This was done to allow segmentation of the data which would then compare

participants who had used the site vs. ones who hadn’t.

2.4. Findings

Following the study, it became apparent that some questions were not tailored correctly.

Questions in section three were too broad, opening it to a user’s own interpretation by

suggesting the discoverability of services were their commonly used services, instead tasking

them to find other less visible services. Also, it’s thought that the inconclusiveness of some

questions were due to the small sample size8.

The limitations of the questionnaire were that the participants who took part were known by

the research team. Attempts to randomise the audience were made by publishing the

questionnaire on Facebook, and within internal business connections of the research team.

3 http://www.dhl.ie/en.html 4 https://www.ups.com/ 5 http://www.nightline.ie/ 6 https://www.usps.com/ 7 https://en.wikipedia.org/wiki/SWOT_analysis 8 43 Users in total. 22 of which had used anpost.ie | 19 did not use the site.

Page 5: Interaction_Design_Project_N00147768

2.4.1. About the User

These findings enabled the team to begin to formulate a persona. These results the

questionnaire are as follows; of the participants 51% were female and 49% were male. 58%

of users were aged between 26 and 35. Participants were predominantly living in Dublin, but

users from Donegal also took part. Their primary device used was desktop at 49%, with

mobile 47%, and tablet 4%.

2.4.2. Features & Services

The results in this section enabled the structuring of the IA. The top services; calculate the

postage 64% (14 respondents out of 22), passport services and find a post office 41%. Results

were satisfying to the team, providing focus on element prioritisation.

2.4.3. About An Post (Section 4 & 5 Combined)

This section focused on site speed, and the UI. The data gathered was mostly inconclusive.

Possibly due to a lack of experience in such an exercise, questions created around the UI and

load times were not in line with the research goals and became of little or no importance in

final design. At the time these were felt to be important factors. The final section the

questionnaire did produce useful qualitative user insights. Users were asked to improve one

item leaving their feedback in a text box. This data directly resulted in persona pain points

and frustrations.

The questionnaire set out to answer the initial research goals. Although better planning could

have been achieved, the data was sufficient to create a persona, and begin the ideation phase.

2.5. Personas

Using the findings from the questionnaire such as; user segmentation, feedback and online

habits a persona; Ciaran Burton (See Appendix 7.7) was created. During the early stages a second

persona; Anna O’Brien was created, but later dropped because of her similarity to Ciaran’s

persona, and her information did not contribute enough to warrant project time.

2.6. Scenarios

Using the highest ranked services; Calculate Postage, and Find a Post Office, two scenarios

were created using Ciaran to address each. Due to time constraints of the project these were

kept quite simple which then didn’t offer enough information to aid the design. Ideally a key

path scenario would illustrate each phase of the process, and would have provided more

substantial information.

2.7. Interviews

In order to understand what the user was thinking, the decision was made to conduct one on

one interviews. These were chosen for their ability to record rich qualitative data.

Page 6: Interaction_Design_Project_N00147768

2.7.1. Screener Questionnaire

Prior to interviews, a screener questionnaire was designed to be sent out and collect

information on potential candidates by assessing their abilities and knowledge of the An Post

website. Due to time constraints, whilst this had been designed it was not used in the

research. Had this been used, it would have created more research opportunities such as;

scheduling a focus group, conducting a contextual study, or remote testing.

2.7.2. Consent Form

To ensure the project did not breach any ethical rules, a consent form was given to each

participant to read. They were made fully aware of the software being used, and what was

to be recorded. They would approve by signing and (See Appendix 7.5).

2.7.3. Script

To maximise data collection and control of the testing, a script was developed. It contained

four sections; user habits, predefined activities, wrap up questionnaire, and a card sorting

exercise. Due to the interview being one on one, it amounted to more effort required by the

researcher. Recording data while interviewing became a difficult task when operating alone.

In future this would require more than one observer to ensure a maximum amount of data is

recorded

2.7.4. Recording with Camtasia

Camtasia9 was chosen as it offered on screen and facial recording and was a known stable

platform. Unfortunately, issues arose with the recording and one interview was nearly lost

due to a framerate anomaly which caused an issue on playback. This rare event was only a

minor setback. The remaining interviews were recorded and analysed without any issues. On

review of the videos time was available to take quick notes. No full transcripts have been

produced a result.

2.7.5. Card Sorting

Adding a card sorting exercise to the interview was to establish two things; how does the user

perceive and organise the services, as well as do they understand the terminology? Could

this support the teams own initial findings? It proved to be invaluable, and resulted in a better

IA overall for the design. However, an oversight was made where the card sort offered users

with the full personal sitemap 10. The majority of these pages were information only and

offered no online service. These items were later moved to an FAQ.

9 https://www.techsmith.com/camtasia.html 10 http://www.anpost.ie/AnPost/Sitemap.htm

Page 7: Interaction_Design_Project_N00147768

3. Ideation All the interview data was stored on a master file (See Appendix 7.4) which contained each

participants card sort, their information and feedback based on the tasks. This was a main

resource for the designs.

3.1. Wireframes

Sketches were done for the homepage, and “Calculate the Postage”. The “Find a Post Office”

was never wire framed, instead only a task mapping was created. The paper prototypes were

not tested on users but were merely designed for approval before moving on to creating

interactivity.

3.2. Interactive Prototype

It was decided to use Axure as it would be a more capable platform for development and

testing. The design would focus on three pages; Homepage, “Calculate the Postage”, and

“Find a Post Office”. With the most attention being given to the “Calculate the Postage” due

to the previous research.

3.2.1. Homepage

The homepage was created to illustrate better use of IA using the research from the

questionnaire and card sorting exercise. In order to achieve this, the main navigation was

reworked, as well as the full page layout using an inverted pyramid structure. This resulted

in the most important services at the top, with the least near the footer. Since An Post were

not consulted, the team could remove unused services from the navigation without any client

issues.

3.2.2. Calculate the Postage

This page focused on how to improve user interactions while also reducing time taken to

reach the goal. The interview data confirmed the current process to be confusing and

misleading. The prototype aimed to present the user with only the required amount of

information at any given time to reduce errors.

3.2.2.1. Step 1 – Find your address

The user was presented with a search bar to locate their address (Link to Prototype in Appendix 7.11).

Should the search prove insufficient the user could select to enter their address manually.

This section proved problematic amongst the usability interviews. Users did not understand

why it was required to enter their address. This was initially created to address the parcel

collection service offered by An Post. However, this service is not promoted leaving the user

confused. Therefore, placement of this object will result in additional errors. This panel was

dropped from the second iteration. It was moved out of scope, and placed instead after the

user selected “Book Collection”. It would then empower the user to decide to avail of the

service.

Page 8: Interaction_Design_Project_N00147768

3.2.2.2. Step 2 – What is the destination?

Following on from the personal address entry, users were then required to put in a shipping

address. The search bar did not perform as expected. Users were confused as to what to

enter. On further analysis this was an oversight of the prepopulated text within the search

box. Updating the text allowed for further clarity on address instructions.

3.2.2.3. Step 3 – What will you be shipping?

The next step asked to select the size of item and give it an estimated weight. Options were

presented in four distinct images of various sized boxes with estimated weights. Each

allowing the user to select their item. This was retained as it was thought to be a rating factor

for pricing engine. Results were mixed during the evaluations, and were inconclusive on the

correct solution. Although a strong argument would be remove if not necessary, since the

field below requires an actual weight.

3.2.2.4. Step 4 – Shipping Rates

The current site requires the user to select a shipping method, then regardless of choice may

or may not display all available options. From the team’s perspective this was pointless and

why not just reveal all the options at once? The initial wireframe sketch displayed all options

equally, this was approved and rolled in to production. Below the shipping rates was a call to

action to “Buy Now”. This caused user confusion as it was not clear as to what would happen

next. Understanding this mistake the “Buy Now” option was updated to “Book Collection”,

which enabled the user to make a decision based on their own requirements.

3.2.3. Find a Post Office

On the current site finding a post office task was performed with difficultly amongst the users.

The problems stemmed from a poor UI. The map was display in a portrait layout which limited

the view. After selecting their county and town, the post offices would only appear if a

required service was selected from the dropdown. When looking up directions, entering the

user address only places a map marker on that location. To get directions the user then must

hover over the selected office and click “Plan Route”. A route is presented with small red

circles to indicate changes direction. The user would have to write down the directions, this

element is not available on mobile devices.

The prototype attempted to address these problems. But would need several more

iterations, as the initial usability proved a lack in understanding of what was to be entered in

the search bar. Common remarks were; “is this my address?”, or “Is this the Post Office

address?”. The thinking behind the design was similar to “Use Current Location” as on

Google. However, the delivery was not effective, and more testing is required.

Page 9: Interaction_Design_Project_N00147768

4. Usability Testing

A new set of participants were recruited for usability testing. The same script from the first

round of interviews would be used. This offered a level of control which could be measured.

However, a lack of team experience resulted in some task being skipped or dropped from the

interview. The assumption was that these activities were surplus to requirement, however

on reflection were in fact directly contributable to the IA and evaluation of the user focused

terminology. With some time remaining, some guerrilla usability testing was conducted. It

was completely unscripted and users were asked to review the pages. A consent form was

not required, all personal data and comments would remain anonymous. The findings proved

invaluable and were incorporated into the second iteration. It would have been beneficial,

given the time, to run through additional studies such as remote usability sessions to assess

performance, and running an A/B test to validate the design.

5. Conclusion & Self-Assessment

The team set out to develop the An Post site using qualitative and quantitative methods. This

had been achieved through use of a questionnaire and conducting several interviews.

Challenges arose with the ability to conduct interviews as a team. It became difficult and

disjointed as each team member was off doing their own interview. This made collaborative

efforts of analysing the results time consuming.

In hindsight, there are simpler ways to develop an interactive prototype, which involves

sending the user to a new page on every interaction. I believe this is a better method for

rapid prototyping. The path chosen to add functionality to objects for a first time Axure user

proved an ineffective use of time. Although immensely proud of the work, the time value and

lack of proper functionality left it with much room for improvement.

Despite some challenges during the project lifecycle, it proved to be very educational, and

many learnings have been taken on board for future developments.

Page 10: Interaction_Design_Project_N00147768

6. Bibliography

Rohrer, C. (2014). When to Use Which User-Experience Research Methods. Nngroup.com. Retrieved 7 January

2016, from https://www.nngroup.com/articles/which-ux-research-methods/

Nielsen, J. (2004). Card Sorting: How Many Users to Test. Nngroup.com. Retrieved 7 January 2016, from

https://www.nngroup.com/articles/card-sorting-how-many-users-to-test/

Usability.gov,. (2013). Card Sorting. Retrieved 3 January 2016, from http://www.usability.gov/how-to-and-

tools/methods/card-sorting.html

Davies, M. B., & Hughes, N. (2014). Doing a successful research project: Using qualitative or quantitative

methods. Palgrave Macmillan.

7. Appendix

7.1. Exploratory Questionnaire

http://bit.ly/1QAyVwZ

7.2. Screener Questionnaire

http://bit.ly/1OZj9v0

7.3. Script

http://bit.ly/1PJdCWF

7.4. Data Sheet

http://bit.ly/1OZD11f

Page 11: Interaction_Design_Project_N00147768

7.5. Consent Form

7.5.1. Lilana Hoffman

Page 12: Interaction_Design_Project_N00147768

7.5.2. Orla Dillon

Page 13: Interaction_Design_Project_N00147768

7.6. Card Sorting

Figure 1 - Team Card Sorting Exercise.

Figure 2 - First Round Interview Card Sort.

Page 14: Interaction_Design_Project_N00147768

Figure 3 – Jade’s Card Sort #1.

Figure 4 - Jade's Card Sort #2

Page 15: Interaction_Design_Project_N00147768

Figure 5 - Card Sorting Comparison Chart.

7.7. Personas

Figure 6 - Final Persona used for design.

Page 16: Interaction_Design_Project_N00147768

Figure 7 - Second Persona. Not used in design.

7.8. Interview Videos

7.8.1. Initial Interviews

https://vimeo.com/152905566

https://vimeo.com/152905415 Password: N00147798IaD7

https://youtu.be/ZVzKXPHN0TA (Bad recording)

7.8.2. Usability Interviews

https://vimeo.com/152905643 Password: N00147798IaD7

https://youtu.be/RXtoJZQIUlI

Page 17: Interaction_Design_Project_N00147768

Figure 8 - Calculate Postage Initial Figure 10 - Calculate Postage

Final

Figure 9 - FInd a Post Office.

7.9. Task Mapping

7.10. Wireframes

7.10.1. Homepage

Page 18: Interaction_Design_Project_N00147768

7.10.2. Calculate the Postage

7.11. Interactive Prototypes

7.11.1. Prototype (1st Iteration)

Homepage: http://neiic2.axshare.com/#p=home

Calculate the Postage: http://neiic2.axshare.com/#p=calculate_postage

Find your nearest Post Office: http://neiic2.axshare.com/#p=find_post_office

7.11.2. Prototype (2nd Iteration)

Homepage: http://neiic2.axshare.com/#p=home_v2

Calculate the Postage: http://neiic2.axshare.com/#p=calculate_postage_v2

Find your nearest Post Office: http://neiic2.axshare.com/#p=find_post_office_v2