Design Tips for the Non-Designer

DESIGN TIPS FOR THE NON DESIGNERBecause it’s all our responsibility to create awesome experiences for users

1

NOT EVERYONE IS BORN A DESIGNER

2

OR ARE THEY?

3

It depends what we mean by design.

Not everyone can create pixel perfect designs, BUT…

4

UNDERSTANDING YOUR USER

SOLVING A PROBLEM

INTUITIVE ANDEASY TO USE

ESTHETICALLY PLEASING AND

ON-BRAND

…design isn’t just about that. It’s about…

5

UNDERSTANDING YOUR USER

SOLVING A PROBLEM

INTUITIVE ANDEASY 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

WHY IS DESIGN IMPORTANT ?

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.

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?

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’.

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.

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’.

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

“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

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.

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

15

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:

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.

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:

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.

3 USER JOURNEYSHelp 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.

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

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.

USER JOURNEYUSER JOURNEY

Prior to the workshop the business wanted to solve the problems in this department.

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.

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

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

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.

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.

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

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

MVP Minimum 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

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

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

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

3 PAPER PROTOTYPESIf there are tools like Pop App, why would you use paper prototypes?

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

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

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.

A B

Over lunch I sketched possible solutions.

During the afternoon we tested the rough sketches with users.

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

The following morning the new flow had been implemented across the iPhones and iPads.

After launch we received 0 complaints from users.

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.

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.

3 VISUAL DESIGN TIPS

1

VISUAL HIERARCHY

2

TYPOGRAPHY

3

WHITE SPACE & ICONS

45

1 VISUAL HIERARCHYUsers 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.

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

USE FONTS AND LAYOUT TO CREATE HIERARCHY

Number of Sites: Active Sensors: Active Alerts: Total Alerts: Energy Used:

14 44 36 51 1.056kWh

14 SITES

44 SENSORS

1.056 kWh ENERGY USED

36 ACTIVE ALERTS

51 TOTAL ALERTS

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

2 TYPOGRAPHYOften 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.

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.

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"

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

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

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

Good UI’s ensure all screen elements and layout information match the prioritised

goals and tasks of the user.

56

3 WHITE SPACE & ICONSDon’t try and use every ounce of space and push back on stakeholders who keep wanting to add more.

Less is more!

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

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

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.

1

VISUAL HIERARCHY

2

TYPOGRAPHY

3

WHITE SPACE & ICONS

These basic tips should help you in creating better experiences for your users.

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….

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.

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

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

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

“You can have the best technology in the world but if it doesn’t resonate

with your user you’ve failed”

e j carter

Emma Carter @ej_carter

THANK YOU