This presentation is aimed at teams who either do not have the luxury of a designer on their team, or they have a designer that works in silo to their team. Small teams of developers, BAs and QAs will benefit from understanding the finer details of design. Developers will gain empathy for design and a better understanding of how to display content. QAs will leave knowing how to quickly notice problems with a design before release. You will also learn how to ensure the product you are building is ‘on brand’ and ‘user-centric’, and why this is important to ensure the success of your product. Some people have the misconception that design is just creating ‘pretty pictures’. This is not the case; there is a science to creating the right ‘pretty picture’.

1. DESIGN TIPS FOR
THE NON DESIGNER
Because it’s all our responsibility to create awesome experiences for users
1

2. NOT EVERYONE IS
BORN A DESIGNER
2

3. OR ARE THEY?
3
It depends what we mean by design.
Not everyone can create pixel perfect designs, BUT…

4. 4
UNDERSTANDING
YOUR USER
SOLVING
A PROBLEM
INTUITIVE AND
EASY TO USE
ESTHETICALLY
PLEASING AND
ON-BRAND
…design isn’t just about that. It’s about…

5. 5
UNDERSTANDING
YOUR USER
SOLVING
A PROBLEM
INTUITIVE AND
EASY TO USE
ESTHETICALLY
PLEASING AND
ON-BRAND
We may not all be able to do the 4th one,
BUT… we can all certainly do the first 3.

6. 6
WHY IS DESIGN
IMPORTANT ?

7. 7
AND DO USERS
REALLY CARE ?
I’m sure we’ve all had bad experiences with a new product we’ve bought,
an app or simply just finding our way round a store.
Having a bad experience can often turn us away as a customer and living
in such a connected world we are more than happy to share our bad experiences
with friends on social media.
These bad experience can seriously damage a brand,
which can result in brands quickly loosing market share.

8. MATURITY OF MARKETPLACE
Jared Spool
When we’re building a new product or improving an existing one.
When’s the right time to think about design?

9. MATURITY OF MARKETPLACE
Jared Spool
TECH PHASE
Jared Spool sums it up really well in his diagram.
The majority of companies start in the ‘Technology Phase’.

10. MATURITY OF MARKETPLACE
Jared Spool
TECH PHASE FEATURE PHASE
They then move into the ‘features phase’ where they start packing in as
many features as possible. Products use the number of features to out do
competitors. Users start complain it’s now too hard to use.

11. MATURITY OF MARKETPLACE
Jared Spool
TECH PHASE FEATURE PHASE EXPERIENCE PHASE
Products soon become bloated with too many features making the product hard
to use. An outsider then launches a competing product that doesn’t have all the
‘features’ BUT it offers a much better experience. NOW everyone is talking about
the ‘experience’.

12. MATURITY OF MARKETPLACE
Jared Spool
TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE
Later it doesn’t matter ‘who’s’ product you have any more, we’ve now entered the
‘commodity phase’. For example, TomTom are no longer a unique GPS product
with a great user experience, they’re now a the basis of Apple Maps.

13. 13
“You can have the best technology
in the world but if it doesn’t resonate
with your user you’ve failed”
e j carter

14. 14
1
GET INTO
YOUR
CUSTOMERS
MIND
2
TESTING ON
HUMANS
3
THE ICING
ONTOP OF
THE CAKE
We can all ensure we’re creating delightful experiences
for customer using the 3 areas below. Tools you can use for
each of these will be explained in the following slides.

15. GET INTO YOUR
CUSTOMERS MIND
Customers are the advocates for your brand,
if it doesn’t resonate with them, it will fail.
15

16. GET INTO YOUR CUSTOMERS MIND
1
GAIN
CUSTOMER
KNOWLEDGE
2
EMPATHISE
WITH USERS
3
CREATE &
UNDERSTAND
USER
JOURNEYS
Over the next few slides you will learn some tools to help you:

17. GAIN CUSTOMER KNOWLEDGE
DON’T MAKE ASSUMPTIONS ABOUT USERS.
Get out on the street and speak with them
What are they talking about on social
media regarding your product?
Speak to other areas of the business that might
have insights, such as; call centres,
check-out staff, customer services etc.

18. EMPATHY
THINK & FEEL
SEE
SAY & DO
HEAR
PAIN GAIN
Once you have some good insights, start building persona’s and empathy maps.
Create your empathy maps in teams. You should cover:

19. A final map looks like this. You can use the information from this to help with
the creation of a User Journey and Writing Story Cards when developing.

20. 3 USER JOURNEYS
Help us understand how a user gets from A to B,
what actions they are undertaking to complete
their task, moments of frustration and confusion.
Mapping user journeys can help us develop
new products or improve existing ones.

21. USER JOURNEYUSER JOURNEY
SYSTEMS
PROCESS
Write the various processes
a user takes from A to B
ACTIONS The various actions
QUESTIONS
Questions they have
along the way
PAIN POINTS
Pain points and
frustrations
HAPPY MOMENTS Things that work well
A B
Example: User calculates
price for customer
Example: User downloads
latest calculator
Does the customer have an
existing account with us?
Example: Why does it take
so long to download?
Example: Price instantly
approved,
Are there any back-end
systems the tool is using

22. USER JOURNEYUSER JOURNEY
This user journey was completed with a team of 20 people. The team
consisted of users and different departments within the business.
The pink post-its clearly show the pain points a user is facing.

23. USER JOURNEYUSER JOURNEY
Prior to the workshop the business wanted
to solve the problems in this department.

24. USER JOURNEYUSER JOURNEY
After completing the user journey we could clearly see that if we solved the
problems in this area it would then solve their original problem and more.

25. 1
GAIN
CUSTOMER
KNOWLEDGE
2
EMPATHISE
WITH USERS
3
CREATE &
UNDERSTAND
USER
JOURNEYS
The 3 tools you have just learn’t will help you understand
your customers better; and, enable you to build better
products that resonate with users.

26. 26
Centre decisions around
solving problems for your users to
enhance their brand experience.

27. TESTING ON HUMANS
27
When creating a new product or improving pain points on an existing product.
It’s paramount you test on your users to ensure you’re not causing more pain
and that the idea works before investing too much time and money.

28. 3 WAYS TO TEST ON HUMANS
1
QUICK &
DIRTY
PROTOTYPING
2
USING MVP’S
3
PAPER
PROTOTYPES
We can quickly test our ideas using using the below tools.

29. PLANQUICK AND DIRTY PROTOTYPING
Pop App is a great tool that requires no coding skills. You can quickly upload sketches and
create interactive touch gestures. This tool allows you to quickly test ideas with users

30. 30
USING MVP’S
SOMETIMES YOU NEED MORE THAN
POP APP TO VALIDATE AND IDEA.
We we’re implementing a new feature
into a banking mobile app:
•It was aimed at a new target market
•It was going to receive a large advertising campaign
•We didn’t want to launch something that didn’t
resonate with a user

31. 31
MVPMinimum Viable Product
Launching an MVP of the new feature allowed us to test the
idea in the marketplace before we wasted time and money
building something that users had no appetite for.

32. 32
A smart banner was created to let users know about the new feature, encourage them to try
it out and give feedback. A smart banner also allowed users who were not interested in the feature
to still see their balances rather than being faced with an annoying full screen advert.

33. 33
Although the MVP was functional, it’s UI was still very basic.
The team started receiving feedback on the MVP within a day of launch.
The feedback helped us priorities the next phase. Items we’d originally placed as
‘out of scope’ were more important to users than some of the items ‘in-scope’

34. 34
Together with Face to Face customer testing and an MVP allowed us
to launch a polished solution which resonated with users.
The feature went onto win multiple awards for it’s innovation and user experience.

35. 35
3 PAPER PROTOTYPES
If there are tools like Pop App,
why would you use paper prototypes?

36. 36
PAPER PROTOTYPES
Implementing Touch ID into a mobile bank app, within 6 weeks and a team of 9.
Due to the services we needed to call on and using an API we needed the technology
to have priority over the design in the initial few weeks..

37. 37
We suspected the Apple API would cause issues for users due to the ‘modal’ design and restrictions.
We didn’t want to launch a new feature users had been asking for to then have complaints
about usability. Users would blame our brand rather and the Apple API.

38. 38
QUICK USER TESTING IN 1 DAY
•We tested the current build on users to give them the
full experience of adding a fingerprint to the device
and then logging into the app.
•During the course of a morning we’d tested on several
users which validated our concerns with the API, in
particular the modal design which we had very little
control over.

39. A B
Over lunch I sketched possible solutions.
During the afternoon we tested the rough sketches with users.

40. 40
QUICK USER TESTING IN 1 DAY
•At the end of the day we gathered the entire
team together, including the product owner.
•Shared the results from user testing
•Decided on the best approach as a team. Although
option A was easier to implement, option B gave a
better experience. We decided as a team we’d work
late to implement option B.

41. 41
The following morning the new flow had been implemented across the iPhones and iPads.
After launch we received 0 complaints from users.

42. 1
QUICK &
DIRTY
PROTOTYPING
2
USING MVP’S
3
PAPER
PROTOTYPES
The 3 tools you have just learn’t gives you the flexibility
to choose the right way to test an idea for your project.

43. THE ICING ONTOP
OF THE CAKE
43
Adding the extra finishing touches can really enhance the experience
for your user and puts your brand in a really strong position.

44. 3 VISUAL DESIGN TIPS
1
VISUAL
HIERARCHY
2
TYPOGRAPHY
3
WHITE SPACE
& ICONS

45. 45
1 VISUAL HIERARCHY
Users are time poor, they want to complete tasks
quickly and easily.
Creating visual hierarchy allows pages to be scanned
quicker and information easier to digest.

46. VISUAL HIERARCHY
This layout is perfect for a
book but for a website or app
it doesn’t direct the user to
the information they need.
Breaking the layout up using
different font sizes, colour and
images gives the content a
pecking order and helps guide
the user to what is most
relevant to them.

47. 47
USE FONTS AND LAYOUT TO CREATE HIERARCHY
Number of Sites:
Active Sensors:
Active Alerts:
Total Alerts:
Energy Used:
14
44
36
51
1.056kWh
14SITES
44SENSORS
1.056 kWh
ENERGY USED
36ACTIVE ALERTS
51TOTAL ALERTS

48. CREATE HIERARCHY USING COLOUR
Colour is another way to add hierarchy and direct a user.
The Android action buttons instantly grabs the eye’s attention.

49. 49
2 TYPOGRAPHY
Often one of the items people don’t take into consideration
or understand the consequences if the wrong typeface or
size is chosen.
Choosing the right font and size suitable to the media you
are working with and audience can mean the different
between an ok and truly awesome experience.

50. READABILITY
50
Making line lengths too long results in eye tracking problems.
Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle, Benjen Stark, to join the Night's Watch, but
becomes disillusioned when he discovers that its primary use is that of a penal colony for criminals, meant to
keep "wildlings", human tribesmen in relative anarchy north of the Wall, in check. At the Wall, Jon unites the
recruits against their harsh instructor and protects the cowardly but good-natured and intelligent Samwell Tarly.
Jon hopes that his combat skills will earn him assignment to the Rangers, the military arm of the Night's Watch,
but instead is made a steward (and thus potential successor) to the leader of the Watch, Lord Commander Jeor
Mormont. Benjen, who had led a small party of Rangers beyond the Wall, fails to return, and six months later,
the dead bodies of two of the Rangers from his party are recovered beyond the Wall, but soon re-animate as
wights, which kill six men and threaten Mormont, who is saved by Jon.
When word of his father's execution reaches Jon, he attempts to join Robb against the Lannisters but is
prevented by his comrades and persuaded by Mormont to remain loyal to the Watch. Mormont then declares his
intention to find Benjen — dead or alive — and to investigate the disappearance of many wildlings and the dark
rumors surrounding "the King-Beyond-the-Wall": a deserter from the Night's Watch known as Mance Rayder.

51. READABILITY
51
Making them too short
causes the eye’s to
wrap to quickly.
Narrow blocks of text
are more suitable
when pulling quotes
out of long text.
Jon Snow, the bastard son of
Eddard Stark, is inspired by his
uncle, Benjen Stark, to join the
Night's Watch, but becomes
disillusioned when he discovers
that its primary use is that of a
penal colony for criminals, meant
to keep "wildlings"

52. READABILITY
52
8-14 words per line is a comfortable reading length.
Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle,
Benjen Stark, to join the Night's Watch, but becomes disillusioned when
he discovers that its primary use is that of a penal colony for criminals,
meant to keep "wildlings", human tribesmen in relative anarchy north of
the Wall, in check. At the Wall, Jon unites the recruits against their harsh
instructor and protects the cowardly but good-natured and intelligent
Samwell Tarly. Jon hopes that his combat skills will earn him assignment
to the Rangers, the military arm of the Night's Watch, but instead is
made a steward (and thus potential successor) to the leader of the
Watch, Lord Commander Jeor Mormont. Benjen, who had led a small
party of Rangers beyond the Wall, fails to return, and six months later.
8 - 14

53. READABILITY
53
Altering the leading can make reading more
comfortable for a user.
Jon Snow, the bastard son of Eddard Stark, is inspired by his uncle,
Benjen Stark, to join the Night's Watch, but becomes disillusioned when
he discovers that its primary use is that of a penal colony for criminals,
meant to keep "wildlings", human tribesmen in relative anarchy north of
the Wall, in check. At the Wall, Jon unites the recruits against their harsh
instructor and protects the cowardly but good-natured and intelligent
Samwell Tarly. Jon hopes that his combat skills will earn him assignment
to the Rangers, the military arm of the Night's Watch, but instead is
made a steward (and thus potential successor) to the leader of the
Watch, Lord Commander Jeor Mormont. Benjen, who had led a small
party of Rangers beyond the Wall, fails to return, and six months later.
LEADING

54. ONE APP, ONE TYPEFACE FAMILY
54
Design doesn’t mean using every filter and effect in Photoshop!
2 fonts are more than enough, but choose a font family which gives you a variety of weights.
Ensure your font is on-brand and reflects the right ‘tone of voice’

55. 55
Good UI’s ensure all screen elements and
layout information match the prioritised
goals and tasks of the user.

56. 56
3 WHITE SPACE & ICONS
Don’t try and use every ounce of space and push
back on stakeholders who keep wanting to add more.
Less is more!

57. Simplify designs, you don’t need to
define areas using lines and dividers.
Adding white space can help
define areas.

58. Iconography is an effective way to communicate on our ever shrinking devices.

59. KEEP ORDER AND PLACEMENT CONSISTENT
59
A study found that it’s easier for a user to adapt to a change in icon
appearance, but far harder for them to adapt to a change in icon location.

60. 1
VISUAL
HIERARCHY
2
TYPOGRAPHY
3
WHITE SPACE
& ICONS
These basic tips should help you in creating
better experiences for your users.

61. Jared Spool
MATURITY OF MARKETPLACE
61
TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE
Looking back at Jared Spools example. Technology
will always run through the 4 phases, BUT….

62. Jared Spool
MATURITY OF MARKETPLACE
62
TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE
EXPERIENCE PHASE
To make our products truly successful we need to have the
experience phase starting with the technology and running
in parallel through all the phases.

63. Jared Spool
MATURITY OF MARKETPLACE
63
DARK AGES UX INFUSED
TECH PHASE FEATURE PHASE COMMODITY PHASEEXPERIENCE PHASE
EXPERIENCE PHASE
To make this shift a success it’s the business model that needs to change. Business models need to
start driving Design Thinking across the entire organisation. This new model is adopted by many
start-ups which is why we see so many disrupting longstanding brands.

64. 64
TECHNOLOGY
WORKS
MEETS BUSINESS
NEEDS
DELIGHTFUL AND
MEANINGFUL
EXPERIENCE
Companies should only allow a product to be launched
if it meets the above three criteria.
BUT…We also need to define what good enough is to
avoid over refining an idea and never getting to market.

65. 65
1
GET INTO YOUR
CUSTOMERS MINDS
• GAIN CUSTOMER
KNOWLEDGE
• EMPATHY
• USER JOURNEY
2
TESTING ON
HUMANS
• QUICK & DIRTY
PROTOTYPING
• USING MVP’s
• PAPER PROTOTYPES
3
THE ICING ONTOP
OF THE CAKE
• VISUAL HIERARCHY
• TYPOGRAPHY
• WHITE SPACE & ICONS
You should now have a basic understanding of the
tools you can use to help you with the 3 areas below.

66. 66
“You can have the best technology
in the world but if it doesn’t resonate
with your user you’ve failed”
e j carter

67. Emma Carter
@ej_carter
THANK YOU