User Centered Design approach in a Drupal

agency: keep calm and carry on

Anna Hanchar @anna.hanchar

Agenda 1 What is UCD2

3

4

What is the challenge

Why UCD

What is our approach5 Our steps to follow6 How we test7 Tips and tricks

1

2

3

4

Why UCD

What is UCD

What is the challengeWhat is our approach

Agenda

5 Our steps to follow6 How we test7 Tips and tricks

User Centered DesignEarly focus on users and tasks

Launch and Maintenance

Design and implementation

Conceptual design

Usability evaluation

1 What is UCD2

3

4

Why UCD

What is the challengeWhat is our approach

Agenda

5 Our steps to follow6 How we test7 Tips and tricks

Client is NOT the user

Client defines how a website should look like

UCD is the link

Connects end-user and client

Usable products that end-users love

Happy customers and saved/earned money

1 What is UCD2

3

4

What is the challenge

Why UCD

What is our approach

Agenda

5 Our steps to follow6 How we test7 Tips and tricks

The challenge isHow to sell it?!

• “Awesome UX comes naturally” misconception

• Additional research/iterations/changes = additional budget

• Client knows the best

1 What is UCD2

3

4

What is the challenge

Why UCD

What is our approach

Agenda

5 Our steps to follow6 How we test7 Tips and tricks

Start early, walk together• Sell the client a product design process as a

whole

• Include specification workshops in the project scope

• Personas

• Customer journey

• Conversion goals

1 What is UCD2

3

5

What is the challenge

Why UCD

Our steps to follow

Agenda

4 What is our approach

6 How we test7 Tips and tricks

1. IA is essential

• Milestones (Header, Footer) • Clear structure and visual feedback

2. Important parts of UX

• What are the most essential workflows?

• Notifications?

• Emails created and translated?

Image source: http://speckyboy.com/2011/03/31/10-essential-web-application-usability-guidelines/

3. Wireframes and prototype are part of specification

4. Reduce to the max

4. Reduce to the max

Agenda 1 What is UCD2

3

4

What is the challenge

Why UCD

What is our approach5 Our steps to follow6 How we test7 Tips and tricks

We conduct UX testsRemote moderated usability test

• Participants are at home or what suits them best• Script via Google Forms• VC Software• Video and audio recording

We test

• Clickable prototype with the homepage designed

• Target users

• Go through tasks and think aloud

• Rate the experience before and after interaction

• Complete System Usability Scale

We do the homework

• Analysis of videos

• SUS and questionary results

Present results wisely

• Always propose a way how to solve a problem

• Wrap as nicely as possible and add some sugar

• Visualise

Results side effects

“Thank God you get this feedback, you made me very happy just now!”

Agenda 1 What is UCD2

3

4

What is the challenge

Why UCD

What is our approach5 Our steps to follow

7 Tips and tricks

6 How we test

Test and research

• As early as possible

• The most important interactions

• Embrace as much as possible of user experience

Rules to follow

• Never conduct usability tests shortly before launch

• UX researcher is not interaction designer discuss the results together

• Improvements can be implemented in different phases

Always improve

Have a hypothesis that a feature is not user friendly?

• Guerilla tests with a couple of people

• Elaborate a better solution

Login redesign

Work as a team

• Slack UX-channel

• Feedbacks of the team on (clickable) prototypes and designs

• Design critique is an input and not critique

• Share best practises and findings on Demofriday

It’s worth it!

• Save costs in the long run -> fewer change requests

• User friendly solutions and high quality

• Happy customers

Contribute

Drupal features can be improved

Create a solution (for your client)

Contribute this to drupal.org

Error messages

https://github.com/AmazeeLabs/ife

Questions?