Assignment Cover Sheet

MSc in User Experience Design

Student Name: Stephen Norman

Student Number: N00147768

Programme: MSc UX Design

Year of Programme: 2015

Module Name: Design Thinking

Assignment: Paper Prototyping and Evaluation

Assignment Deadline: 04/11/2015

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: 05/11/2015

DESIGN THINKING Paper Prototyping and Evaluation

NOVEMBER 5, 2015 STEPHEN NORMAN

Contents 1. Introduction: aim and objectives of the project ....................................................... 3

2. Methodology: overview of the methodology followed to complete the project ........ 3

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

2.2 User Research .................................................................................................. 4

2.3 Personas: rationale and description .................................................................. 4

2.4 Scenarios: rational and description ................................................................... 5

2.5 Prototypes: overview, storyboard, screen and other interface elements ........... 5

3. Results: heuristic evaluation of each prototype ...................................................... 8

3.1 Visibility of system status .................................................................................. 8

3.2 Match between system and the real world ....................................................... 8

3.3 Consistency and standards ............................................................................. 9

4. Discussion and conclusion: including self and peer evaluation .............................. 9

5. References and bibliography ................................................................................ 10

6. Appendix .............................................................................................................. 11

6.1 Personas ........................................................................................................ 11

6.2 Scenarios ........................................................................................................ 14

6.3 Final Prototype ................................................................................................ 16

6.4 Literature Review ............................................................................................ 21

1. Introduction: aim and objectives of the project

The aim of the project was to redesign Salud through the use of low fidelity paper

prototyping. These designs would be led by proto-personas, scenarios and a heuristic

evaluation session. The discussion will revolve around the process flow covering each

phase of the project and how it was conducted. The scope of the project focused on

two specific areas of the existing product; Patient Overview, and Dental section.

During the project the choice was made to cater the design towards tablets specific

devices only. All aspects will be discussed in the following sections.

2. Methodology: overview of the methodology followed to complete the project

The following methodology was conducted to fully appreciated the scope of the

project, as well as a basic understanding of the user; the dental practitioner.

2.1 Identifying Problems

Salud is a comprehensive application covering a range of dental exam utilities from

patient records, dental examinations and treatment planning. Reviewing the

software to fully digest the navigation created question. How does a dentist know

where they are? What is the information architecture, as there is no clearly defined

structure on where to proceed? This comprehensiveness could be prone to error

creation, and user frustration. As an example; Figure 1 highlights the locations of

multiple separate navigation structures. Another problem which theoretically could

cause a poor experience is the use of window layering. Multiple windows can

become unmanageable and the user could become intimidated and frustrated when

searching for the correct location. Reducing or eliminating this all together will

drastically reduce errors and increase productivity. A simple and structured

approached is required, beginning with the removal of all unnecessary items and

operate all screens through one view. A further discussion will be conducted in

Section 2.5 Prototypes.

Figure 1 – An image of Salud showing it’s multiple navigations.

2.2 User Research

Surplus to requirement, two interviews were conducted. The initial impromptu light

discussion was carried out during a dental exam. The entire journey was witnessed

and examined. The second interview was conducted over the phone. Questions

were asked about the current software in use and its problems and benefits.

Consensus being, robust, well use of colours, and efficient. However, lack easy

learnability. Taking on these results, three personas were created.

2.3 Personas: rationale and description

Dr. Jennifer Coady

Dr. Coady was created to address attributes such as efficient, time savings, detailed

and flexible system. Her pain points revolved around inefficient software costing

the potential to increase the customer turn over.

Dr. Coady is typical dentist in the height of her career. Juggling a busy lifestyle, she

is keeps her practice at the forefront of her life. A smoothly operating practice with

exceptional patient care to the daily routine is her main objective. She is to speed

with tablets and touch screen applications. However, they must still meet her

requirements or they are dropped.

Dr. John C. Murray PhD

Dr. Murray’s persona addressed a dentist who has extensive knowledge in the field.

However, a lack of understanding change and a hesitance to adapt to technology.

Any system which he approaches must be intuitive from the start. A sense of

familiarity is required as this persona type would much prefer to use pen and paper.

The system’s challenge needs to assimilate real world knowledge and adapt it

digitally.

As a consultant, his experience and knowledge come highly regarded. Even though

he finds it hard to adapt, he accepts any challenge as long as it meets his high

degree of standards and is an intuitive replacement to their hardcopy alternatives.

James O’Neill

The design requirement needed to address students – Salud’s other main user

group. Applications designed for students would need to be able to cope and

prevent the potential for large amounts of errors to occur during a stressful

examination.

James is a third year dental student committed to becoming a dentist. He would

prefer digital applications as they are quicker and easier to use. Having a cloud

based system means that he can access all his patient data whenever, where ever

and taking the pressure of his other duties.

2.4 Scenarios: rational and description

Two context scenarios were created to allow for designs to be built up using a

scenario catered to be their ideal experience. Additionally, a key path scenario was

also created to understand the interface interactions with the design as discuss by

Cooper et al. 2014. The key path scenario pinpointed many problems and also

some good designs which evolved in to a second iteration before the evaluation

discussed in Section 3.

Dr. Coady’s context scenario places her in a busy dental clinic with pressure from

management to increase patient turn over. It addresses many problems that would

occur outside the dental examination which add efficiency to the business model.

The context scenario designed for Dr. Murray places him in a role where he is

observing and evaluating the interactions of his students. By observing the speed

and ease of use, his hesitancy in the product is eliminated and has a proven that it

could also be useful in his general practice.

2.5 Prototypes: overview, storyboard, screen and other interface elements

Following the decision to base all designs on a tablet some initial sketches were

done. The designs were of the high priority input elements (See Fig. 2) such as the

teeth. Initial concept ideas were to base the design around a flat design user

interface. Flat designs appear to the user to be lighter and enable information to

be visualised clearer on smaller screen sizes. However, a skeuominimalism

approach using both flat and skeuomorphic designs could blend real world and light

weight to create a better design as discussed by Page, 2014.

Figure 2 – Early prototype of flat design UI teeth.

To gauge designs, competitor research was carried out resulting in a number of

designs having skeuomorphic, flat or both styles together. Using skeuomorphic

designs enabled the system to match the real world. Also adding colour created a

new level of visibility for each diagnosis (See Fig.3).

Figure 3 – Competitor dental diagnosis screen.

This addressed two issues; a real world similarity, which is easy to recognise

providing real-time visual feedback for each diagnosis. However, when interacting

with a tooth there is not enough pixel space to interact with precision. The solution

to this was to allow the system to recognised diagnosis type (ie: Cavity) , upon

selection zoom in to the tooth and overlay the selection with a grid. Each grid

represented an area on the tooth’s surface (See Fig. 4).

Figure 4 – Initial concept of the grid system being used to identify a localised diagnosis.

Early in its development the grid system was identified as a useful design, and

operated very well when placed with the key path scenario for Dr. Coady (See

Appendix 6.2 Scenarios).

As mentioned earlier, Salud’s navigation had no clearly defined information

architecture, the solution to which was to remove unneeded sections. As stated by

Dieter Rams:

“I believe designers should eliminate the unnecessary.

That means eliminating everything that is modish

because this kind of thing is only short-lived.”

- Dieter Rams

All patient related information was now store in the hamburger menu. This

eliminated the clutter and allowed for the main navigation to be created around a

clearer goal (See Fig. 5).

Figure 5 – Patient Hamburger menu

The question is, how effective is the new design? Will other users find it to be an

improvement?

3. Results: heuristic evaluation of each prototype

The following heuristic evaluation (Nielsen, 1994) has been designed to reveal

usability problems. Due to time the evaluations were brief, and only certain segments

were covered.

3.1 Visibility of system status

The prototype slides were laid out in a chronological order according to the key path

scenario. With each prototype screen represented a single step in the examination.

The method of explaining to the evaluators that this related to a key path scenario

was lost. It caused more confusion about the software as the user jumped around

the panels and became lost in the information overload. Following this learning the

final prototype was designed with a freer flow approach.

3.2 Match between system and the real world

The language was easily recognisable and there were no issues around navigating

or across the desired path. The system lacked feedback, or any clear reference to

giving information of the last known location. These items were also address by

bolding the menu text or highlighting it with a colour while also adding highlighted

circle under the selected tooth (Fig. 6).

Figure 6 – Upper Right, 3, 4, 5, 6 and 7 are selected.

3.3 Consistency and standards

During the evaluation there were differences between the overview and dental

prototype. The icons of the teeth consisted of fully skeuomorphic on the dental,

where it was skeuomorphic on the other. Questions arose as to why it had been

designed that way. This minor issue had been an overlooked, and was rectified in

the final prototype.

The heuristic evaluation went well for both prototypes. Some issues arose based on

communicating the prototypes across properly. These were learnings which will be

taken on board. When evaluating other prototypes, it was noted that the evaluation

consisted of voice recording or an easy method of recording the data. Using a rating

scale for each segment. These methods were a very organised approach to the

heuristic evaluation, and noted to be used in further evaluations.

4. Discussion and conclusion: including self and peer evaluation

The project set out to re-design the Salud by improving the user interface through

utilisation of two proto-personas and corresponding scenarios. Based on the research

and learnings taken from those personas, the new interface would be a very suitable

candidate to begin further user testing with a working prototype. The key problems

and pain points were all addressed. It’s unfortunate to not be able to carry on the

design any further. It would have been nice to see the fruit of our labour in action, or

in an interactive prototype.

During the process we worked very well together. A lack of understanding of persona,

and scenarios creation was intimidating at first. However, each of us had done parts

of this process before and were able to build up some very good and detailed models

of our ideas of who would engage with the product. The research carried out by Laura

came at such a benefit to the designs. As a team we were very fortunate to have been

able to get those interviews. It was also very good working with Sara; another great

designer. I really admired her hands on approach and creativity to the project. It was

comforting being able to speak the same language and bounce off ideas back and

forth. It was highly useful to all of us. The task came together very well, and we all

enjoyed working together. Being that this is running outside of work it does make it

more difficult to communicate, where if this was in a working environment there were

be many more face to face meetings, and or phone calls. However many Starbucks

(not my favourite at all) coffees later, and a few weekend meets I believe we

successfully delivered a well-designed prototype, and learned so many new things

along the way. Learning by doing, there is no better way.

5. References and bibliography

Cooper, A. (2014). About Face. Indianapolis, IN: Wiley.

Nielsen, J., & Mack, R. (1994). Usability inspection methods. New York: Wiley.

Nngroup.com,. (2015). 10 Heuristics for User Interface Design: Article by Jakob Nielsen.

Retrieved 1 November 2015, from http://www.nngroup.com/articles/ten-usability-

heuristics/

Simplestepsdental.com,. (2015). Your Dental Visit: What To Expect. Retrieved 1 November

2015, from http://www.simplestepsdental.com/SS/ihtSS/r.==/st.31855/t.32270/pr.3.html

YouTube,. (2015). Hard Tissue Exam. Retrieved 31 October 2015, from

https://www.youtube.com/watch?v=xYll-fL7voQ

YouTube,. (2015). 10 Usability Heuristics. Retrieved 1 November 2015, from

https://www.youtube.com/watch?v=hWc0Fd2AS3s

Page, T. (2014). Skeuomorphism or flat design: future directions in mobile device User

Interface (UI) design education. International Journal of Mobile Learning and

Organisation, 8(2), 130-142.

6. Appendix

6.1 Personas

6.2 Scenarios

Content Scenario for Dr. Coady

Context Scenario for Dr. Murray

Key Path Scenario for Dr. Coady

6.3 Final Prototype

6.4 Empathy Map