M
a
k
i
n
g

o
r
d
e
r

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e
s

b
e
t
t
e
r

f
o
r

u
s
e
r
s

a
n
d

b
u
s
i
n
e
s
s

Better experiences are better for business. With a brief to improve the commercial performance of EE's confirmation pages, we achieved this by improving the usability and visual design of the page.

P
r
o
j
e
c
t

g
o
a
l
s

0
1
R
e
-
e
n
g
a
g
e

u
s
e
r
s

p
o
s
t

p
u
r
c
h
a
s
e
A
n
a
l
y
t
i
c
s

d
a
t
a

s
h
o
w
e
d

t
h
a
t

t
h
e

v
a
s
t

m
a
j
o
r
i
t
y

o
f

u
s
e
r
s

l
e
f
t

t
h
e

w
e
b
s
i
t
e

p
o
s
t
-
p
u
r
c
h
a
s
e

a
n
d

t
h
a
t

m
a
n
y

u
s
e
r
s

t
h
a
t

w
o
u
l
d

b
e

e
l
i
g
i
b
l
e

f
o
r

u
p
g
r
a
d
e
s

o
r

a
d
d
i
t
i
o
n
a
l

p
u
r
c
h
a
s
e
s

d
o
n
'
t

e
n
g
a
g
e

w
i
t
h

t
h
e
i
r

o
f
f
e
r
s
.
0
2
R
e
d
u
c
e

c
u
s
t
o
m
e
r

s
u
p
p
o
r
t

c
o
s
t
s
A

s
i
g
n
i
f
i
c
a
n
t

a
m
o
u
n
t

o
f

c
a
l
l
s

w
e
r
e

b
e
i
n
g

d
r
i
v
e
n

b
y

t
h
e

e
x
i
s
t
i
n
g

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e

a
n
d

w
e
r
e

o
f
t
e
n

r
e
g
a
r
d
i
n
g

r
o
u
t
i
n
e

q
u
e
s
t
i
o
n
s

o
r

c
o
n
c
e
r
n
s
.
0
3
U
p
d
a
t
e

t
h
e

v
i
s
u
a
l

f
e
e
l

t
o

m
a
t
c
h

t
h
e

n
e
w

b
r
a
n
d
T
h
e

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e
(
s
)

w
e
r
e

v
e
r
y

o
u
t
d
a
t
e
d

a
n
d

u
s
e
d

o
l
d

c
o
m
p
o
n
e
n
t
s
.

W
e

a
l
s
o

w
a
n
t
e
d

t
o

i
n
c
l
u
d
e

m
o
m
e
n
t
s

o
f

d
e
l
i
g
h
t

w
h
e
r
e

p
o
s
s
i
b
l
e

t
o

m
a
k
e

t
h
e

u
s
e
r

e
x
c
i
t
e
d

a
b
o
u
t

t
h
e
i
r

n
e
w

p
u
r
c
h
a
s
e
.

C
h
a
l
l
e
n
g
e
s

0
1
B
a
l
a
n
c
i
n
g

f
u
n
c
t
i
o
n
a
l
i
t
y

w
i
t
h

c
o
m
m
e
r
c
i
a
l

a
s
k
s
E
E
'
s

e
x
i
s
t
i
n
g

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e
s

h
a
d

v
e
r
y

l
i
t
t
l
e

c
o
m
m
e
r
i
c
a
l

m
e
s
s
a
g
i
n
g

o
n

t
h
e
m

a
n
d

i
n
i
t
i
a
l

u
s
e
r

r
e
s
e
a
r
c
h

s
h
o
w
e
d

t
h
a
t

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e
s

s
e
r
v
e

a
n

i
m
p
o
r
t
a
n
t

f
u
n
c
t
i
o
n
a
l

r
o
l
e

f
o
r

u
s
e
r
s

w
a
n
t
i
n
g

t
o

r
e
v
i
e
w

t
h
e
i
r

o
r
d
e
r
.
0
2
L
i
m
i
t
e
d

b
a
c
k
e
n
d

e
n
g
i
n
e
e
r
i
n
g

r
e
s
o
u
r
c
e
F
o
r

t
h
i
s

p
r
o
j
e
c
t

w
e

u
n
f
o
r
t
u
a
n
t
e
l
y

d
i
d
n
'
t

h
a
v
e

a
n

a
v
a
i
l
a
b
l
e

b
a
c
k
e
n
d

d
e
v
e
l
o
p
e
r
.

T
h
i
s

m
e
a
n
t

t
h
a
t

w
e

h
a
d

t
o

u
s
e

o
n
l
y

f
r
o
n
t
-
e
n
d

c
h
a
n
g
e
s

t
o

r
e
p
a
c
k
a
g
e

t
h
e

d
a
t
a

t
h
a
t

w
a
s

a
l
r
e
a
d
y

o
n

t
h
e

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e

a
n
d

c
o
u
l
d
n
'
t

f
e
t
c
h

o
t
h
e
r

d
a
t
a
.
0
3
C
o
n
s
o
l
i
d
a
t
i
n
g

l
o
t
s

o
f

c
o
n
t
e
n
t
T
h
e
r
e

w
a
s

a

l
o
t

o
f

i
n
f
o
r
m
a
t
i
o
n

a
b
o
u
t

t
h
e

u
s
e
r
'
s

o
r
d
e
r

a
n
d

c
o
m
m
e
r
c
i
a
l

m
e
s
s
a
g
e
s

t
h
a
t

h
a
d

t
o

b
e

i
n
c
l
u
d
e
d

i
n

a
n

e
a
s
i
l
y

c
o
n
s
u
m
a
b
l
e

w
a
y
.

Three phones showing the updated order confirmation page UI

Confirmation screens vs emails

User research showed that users see order confirmation as essential proof of purchase while order confirmation screens (what you see once you’ve placed an order on a website or app) are seen as less important and more appropriate to advertise on.

Testing the existing pages validated that most of the most content was either of secondary importance or unnecessary and therefore didn’t have to be visible by default.

Initial ideas focussed on simplicity and scannability. We also thought about animation and giving the user a sense of excitement.

Our key hypothesis was that condensing all secondary information into accordions would improve usability and allow commercial content to be surfaced without annoying customers - which we were able to validate in user testing. We also discovered improvement opportunities, some as simple as adding a single word.

The final designs balance moments of delight with practical improvements to the page's information architecture and visual hierarchy.

A key lesson learned was to test key hypotheses early on, even if the idea is still very rough. This applies especially to technical possibilities, such as tech stacks or backend structure, and design concepts.

That’s all for this one.
Fancy one of these next?

A laptop and phone showing the EVOPACK web app

Making order confirmation pages better for users and business

Project goals

Re-engage users post purchase

Reduce customer support costs

Update the visual feel to match the new brand

Challenges

Balancing functionality with commercial asks

Limited backend engineering resource

Consolidating lots of content

Confirmation screens vs emails

Testing the existing pages validated that most of the most content was either of secondary importance or unnecessary and therefore didn’t have to be visible by default.

Initial ideas focussed on simplicity and scannability. We also thought about animation and giving the user a sense of excitement.

The final designs balance moments of delight with practical improvements to the page's information architecture and visual hierarchy.

A key lesson learned was to test key hypotheses early on, even if the idea is still very rough. This applies especially to technical possibilities, such as tech stacks or backend structure, and design concepts.

That’s all for this one.Fancy one of these next?

Creating a new brand and web app from scratch for a Swiss start up

How grouped alarms can improve the usability of one of world's most-used apps

I work across design and development to ensure the best possible experience

Affinity Publisher

Photoshop

Adobe XD

Protopie

After Effects

Affinity Photo

Spline

Adobe Illustrator

HTML5

React

JavaScript

TypeScript

Next.js

Figma

Framer

Affinity Designer

CSS3

Webflow

Jest

Sass

Git

jQuery

GraphQL

GitLab

Navigation

Let's connect

M
a
k
i
n
g

o
r
d
e
r

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e
s

b
e
t
t
e
r

f
o
r

u
s
e
r
s

a
n
d

b
u
s
i
n
e
s
s

P
r
o
j
e
c
t

g
o
a
l
s

R
e
-
e
n
g
a
g
e

u
s
e
r
s

p
o
s
t

p
u
r
c
h
a
s
e

R
e
d
u
c
e

c
u
s
t
o
m
e
r

s
u
p
p
o
r
t

c
o
s
t
s

U
p
d
a
t
e

t
h
e

v
i
s
u
a
l

f
e
e
l

t
o

m
a
t
c
h

t
h
e

n
e
w

b
r
a
n
d

C
h
a
l
l
e
n
g
e
s

B
a
l
a
n
c
i
n
g

f
u
n
c
t
i
o
n
a
l
i
t
y

w
i
t
h

c
o
m
m
e
r
c
i
a
l

a
s
k
s

L
i
m
i
t
e
d

b
a
c
k
e
n
d

e
n
g
i
n
e
e
r
i
n
g

r
e
s
o
u
r
c
e

C
o
n
s
o
l
i
d
a
t
i
n
g

l
o
t
s

o
f

c
o
n
t
e
n
t

That’s all for this one.
Fancy one of these next?

C
r
e
a
t
i
n
g

a

n
e
w

b
r
a
n
d

a
n
d

w
e
b

a
p
p

f
r
o
m

s
c
r
a
t
c
h

f
o
r

a

S
w
i
s
s

s
t
a
r
t

u
p

H
o
w

g
r
o
u
p
e
d

a
l
a
r
m
s

c
a
n

i
m
p
r
o
v
e

t
h
e

u
s
a
b
i
l
i
t
y

o
f

o
n
e

o
f

w
o
r
l
d
'
s

m
o
s
t
-
u
s
e
d

a
p
p
s