Slides from a presentation I did at the October 2018 User Experience Professionals Association meetup which focused on the UX or retail. My talk summary: Jon will take you through a project where “traditional” UX tools were dropped in favour of using web technologies to design an updated eCommerce experience for Clarks. By focusing on designing things right through prototyping, cxpartners are helping Clarks to deliver a customer-centric eCommerce experience to their customers. He’ll explain how working with developers to produce HTML prototypes can reduce risk in design, produce better testing results, and ensure a smooth delivery process of new and updated digital services to a wider audience of users.

1. GettingdesignrightwithHTML
prototypesforClarks
Jonathan Brace
jon.brace@cxpartners.co.uk
@cxjon

3. https://www.thinkwithgoogle.com/intl/en-gb/consumer-insights/top-mobile-user-friendly-sites-2018/

5. More efficient
Better user testing results
Greater flexibility
Reduced risk in the design
Accelerated time-to-value

19. More efficient
We can re-use existing HTML, CSS and
Javascript from the existing site rather than
‘spoofing’ patterns, interactivity and
content and easily design for multiple
viewports

21. https://github.com/UKHomeOffice/posters/blob/master/accessibility/dos-donts/posters_en-UK/accessibility-posters-set.pdf
Designing for
accessibility
!"
!"
XyL
dASe
i
XyL
dASe
i
XyL
dASe
i
https://github.com/UKHomeOffice/posters/tree/
master/accessibility/dos-donts/posters_en-UK
!"
https://github.com/UKHomeOffice/posters/tree/
Designing for
accessibility
!"
Designing for
accessibility
!"
https://github.com/UKHomeOffice/posters/tree/
master/accessibility/dos-donts/posters_en-UK

22. https://rebrn.com/re/an-excellent-example-of-universal-design-making-something-access-1033911/

24. Better user testing
results
Testing with code allows us to test a
prototype that is closer to the real thing and
to test with a wider audience

25. Delivery details
1 Major change required
This is the page that is most affected by the
implementation of omnichannel strategy.
The ‘Order summary’ on the current page has been
removed and inserted into the delivery module.
This is because it was ineffective and couldn't
handle more than 3 SKUs.
New messaging has been added about why the
users delivery options have been constrained.
Further to that new consignment modules have
been created to group items. These communicate
how many packages you could expect to receive
over estimated delivery time frames.
1
1
1
1
1

28. Greater flexibility
Using web technologies enables flexibility
in design, supporting an iterative, agile
approach as we learn about how customers
use our prototype

30. Reduce risk in the
design
Ensures designs are technically feasible and
achievable within time and budget
constraints

31. Users were shown a scenario
where they received updates
about their deliveries through
SMS. Giving them the
opportunity to amend their
delivery location and time.
This was extremely well
received by users and could be
an example of how Clarks start
to think about delivery of the
future (phase 3 and beyond?).
Conversational
eCommerce
Messages Clarks
Hi Lara, we are ready to
deliver your shoes to you today
at 2pm. Will you be in?
That’s ok. We can still get it to
you. Please choose an
alternate delivery option:
a) Leave in a safe place
b) Deliver to neighbour
c) Deliver to depot
d) Wait and retry tomorrow
Thanks! We will leave it in a
safe place. Could you describe
it please?
No sorry.
A.
Just leave it in my bin store
right of the front door. Thanks

32. @stuccharlton @cxJon

33. Usable Feasible
UX
Visual Design
Technology

34. Valuable
Client / Organisation
Usable Feasible
UX
Visual Design
Technology

35. The magic
happens here
Valuable
Client / Organisation
Usable Feasible
UX
Visual Design
Technology
https://www.jeffgothelf.com/ https://jpattonassociates.com/

36. Accelerated time-to-value
working in a cross-functional team allows
for greater precision & clarity, leading to
faster more efficient delivery.

37.
Technical​ ​Approach
Clarks​ ​Omnichannel​ ​Fulfilment​ ​Journey
Date:​ ​17th​ ​August​ ​2017
Author:​ ​Jonathan​ ​Brace
cxpartners​ ​will​ ​be​ ​prototyping​ ​updates​ ​required​ ​to​ ​be​ ​made​ ​to​ ​the​ ​UK​ ​website,​ ​for​ ​the
omnichannel​ ​fulfilment​ ​journey,​ ​using​ ​web​ ​technologies.​ ​This​ ​statement​ ​outlines​ ​a​ ​brief,​ ​high-level
technical​ ​approach​ ​to​ ​this​ ​prototyping.
● All​ ​code​ ​written​ ​will​ ​be​ ​for​ ​the​ ​fulfilment​ ​journey​ ​prototype,​ ​not​ ​for​ ​the​ ​live​ ​website.​ ​It​ ​is
the​ ​design​ ​and​ ​interactive​ ​behaviour​ ​of​ ​the​ ​service​ ​that​ ​we​ ​are​ ​creating​ ​code​ ​for​ ​and​ ​so​ ​it
is​ ​not​ ​intended​ ​to​ ​be​ ​used​ ​in​ ​production​ ​environments.
● In​ ​general​ ​we​ ​will​ ​follow​ ​the​ ​development​ ​direction​ ​set​ ​by​ ​the​ ​current
http://www.clarks.co.uk​​ ​website,​ ​utilising​ ​the​ ​same​ ​Javascript,​ ​​ ​CSS​ ​libraries​ ​and​ ​HTML
patterns​ ​that​ ​are​ ​in​ ​use​ ​on​ ​the​ ​site​ ​(where​ ​we​ ​can).
● We​ ​will​ ​extract​ ​static​ ​versions​ ​of​ ​the​ ​pages​ ​on​ ​the​ ​Clarks​ ​website​ ​to​ ​be​ ​used​ ​as​ ​the​ ​basis​ ​of
the​ ​prototype.​ ​We​ ​will​ ​endeavour​ ​to​ ​recreate​ ​the​ ​live​ ​site’s​ ​user​ ​journey​ ​as​ ​closely​ ​as
possible,​ ​​ ​but​ ​​ ​reliance​ ​on​ ​external​ ​data​ ​sources​ ​delivered​ ​to​ ​the​ ​site​ ​via​ ​a​ ​REST​ ​API,​ ​and
consumed​ ​by​ ​the​ ​site​ ​using​ ​AJAX,​ ​means​ ​these​ ​pages​ ​will​ ​not​ ​have​ ​the​ ​current​ ​website’s

38. More efficient
Better user testing results
Greater flexibility
Reduced risk in the design
Accelerated time-to-value

39. Jonathan Brace
jon.brace@cxpartners.co.uk
0117 9303530
@cxjon
Thank you

40. tamlyn.driver@cxpartners.co.uk
0117 9303530