UXdevelopment

Roy Scholten,

Drupaljam 2015

Business

DesignTechnology

Process

Definition Execution

Double Diamond

Define the right

problem/

opportunity

Find the right

solution

Definition Execution

Define the right

problem/

opportunity

Find the right

solutionPlan ShipInsight

Definition Execution

Define Design DevelopDiscover

Plan ShipInsight

Definition Execution

Define the right

problem/

opportunity

Find the right

solution

Define Design DevelopDiscover

Plan ShipInsight Diverge DivergeConverge Converge

Definition Execution

Define the right

problem/

opportunity

Define Design

Find the right

solution

DevelopDiscover

Definition Execution

Plan ShipInsight

In more detail

DiscoverFrame the opportunity: “Why?”

‣ Market

‣ Customer

‣ Product strategy

Discover

Market

‣ Who are the

competitors?

‣ How do they

differentiate?

‣ Market trend

analysis

Customer

‣ Persona

‣ User feedback

‣ Analytics

Product

strategy

‣ Value proposition

‣ Elevator pitch

‣ Prioritisation

Frame the opportunity: “Why?”

DefineFormulate the plan: “What?”

‣ Visual & interaction concept

‣ Experience strategy

‣ Content strategy

‣ Technical analysis

Define

Concept

‣ Design mockups

‣ Customer journey

maps

‣ Scenarios (epics)

Experience

‣ Design principles

‣ Engagement

metrics

Content

‣ Key messages

‣ Messaging

architecture

Formulate the plan: “What?”

DesignDeliver the optimal solution: “How?”

‣ Design exploration

‣ Interactive prototyping

‣ Content modelling

Design

Form

‣ Sketching

‣ Storyboards

‣ Style tiles

Function

‣ Wireframes

‣ Interactive

prototyping

‣ Usability testing

Content

‣ Sitemap

‣ Content modelling

Deliver the optimal solution: “How?”

DevelopDeliver the optimal solution: “How?”

‣ Detailed design

‣ Content production

‣ Code

Develop

Design

‣ Detailed mockups

‣ Component based

style guides

Content

‣ Content

production

Code

‣ Backend (content

model)

‣ Frontend (visual

design and

interactions)

Deliver the optimal solution: “How?”

Design makes

strategy

concrete

Define Design

Design supports

engaging

experiences

DevelopDiscover

Definition Execution

Plan ShipInsight

Tools

Design

Form

‣ Sketching

‣ Storyboards

‣ Style tiles

Function

‣ Wireframes

‣ Interactive

prototyping

‣ Usability testing

Content

‣ Sitemap

‣ Content modelling

Deliver the optimal solution: “How?”

Define Design Develop

Form

Function

Content

Design

Define Design Develop

Form

Function

Content

UX development

Design & development

Creative briefPrototypeContent model

Creative brief

Creative brief: making sure

that everybody is working

on the same project

Creative brief

Define Design Develop

Form

Function

Content

Short form creative brief

‣ Project objective

‣ Personas

‣ Scenarios

‣ Design principles

Short form creative brief

‣ Objective = Why. What are the business goals?

‣ Personas = Who. Target audience

‣ Scenarios = What. What do people want to

achieve?

‣ Principles = How. The values that drive how it

will work

Content model

Content model: a

formal representation

of structured content

as a collection of

content types & their inter-

relationships.

Content model

Define Design Develop

Form

Function

Content

It’s not about pages

Content

model

Content model

‣ Different content types

‣ Fields per content type

‣ Relationships between types

Training & Events

Industry topics

Resource library

Consumer topics

News

AboutContact

Training & Events

Industry topics

Position

papers

Facts &

Figures

TopicSuccess

stories

Position

papers

TopicSuccess

stories

Position

papers

Facts &

Figures

Topic

Resource library

Facts &

Figures

Re-

sources

Videos

Info-

graphics

Market

data

Case

studies

Slides

Consumer topics

Article

Success

storiesVideo

Article

Success

stories Video

Article

Video

Article

News

Blog

News-letters

Industry

news

About

StaffJobsContact

Content model

Industry topics

Resource library

Consumer topics

News

About

Content model

Concept Design Implement

Resources

Prototype

Prototype: an early

sample, model or

release of a product,

built to test a concept or

process or to act as a

thing to be learnt from

Prototype

Define Design Develop

Form

Function

Content

Static deliverables are

static

Why prototype?

Easier to understand =

better feedback

Responsive!

Share the URL, use it

on your own device

Forces you to use real

content, working links

Prototypes can be

tested

Prototyping is a team

sport

Dus!

Define Design DevelopDiscover

Plan ShipInsight

Double Diamond

Define the right

problem/

opportunity

Find the right

solution

UX development

Work together to

fill the gaps

Instead of (only) wireframes…

UX development

Creative briefContent modelPrototype

Dankuwel

Resources‣ Content modelling

‣ Short form creative brief

‣ UX checklist on github

‣ Usability rules of thumb

‣ The Pragmatic Designer’s 10 Things

‣ Books & more books

‣ All photos via New Old Stock