Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Design Tips for the Non-Designer

552 views

Published on

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

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, Business Analysts and Quality Analysts will benefit from understanding the finer details of design. Developers will gain empathy for design and a better understanding of how to display content. Quality Analysts will learn how to quickly notice problems with a design before release.

It also demonstrates 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.

Published in: Design
  • Be the first to comment

Design Tips for the Non-Designer

  1. 1. DESIGN TIPS FOR 
 THE NON DESIGNER Because it’s all our responsibility to create awesome experiences for users 1
  2. 2. NOT EVERYONE IS 
 BORN A DESIGNER 2
  3. 3. OR ARE THEY? 3 It depends what we mean by design. Not everyone can create pixel perfect designs, BUT…
  4. 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. 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. 6 WHY IS DESIGN 
 IMPORTANT ?
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. USER JOURNEYUSER JOURNEY Prior to the workshop the business wanted 
 to solve the problems in this department.
  24. 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. 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. 26 Centre decisions around solving problems for your users to enhance their brand experience.
  27. 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. 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. 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. 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. 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. 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. 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. 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. 35 3 PAPER PROTOTYPES If there are tools like Pop App, 
 why would you use paper prototypes?
  36. 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. 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. 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. 39. A B Over lunch I sketched possible solutions.
 
 During the afternoon we tested the rough sketches with users.
  40. 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. 41 The following morning the new flow had been implemented across the iPhones and iPads.
 
 After launch we received 0 complaints from users.
  42. 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. 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. 44. 3 VISUAL DESIGN TIPS 1 VISUAL HIERARCHY 2 TYPOGRAPHY 3 WHITE SPACE & ICONS
  45. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 55 Good UI’s ensure all screen elements and 
 layout information match the prioritised 
 goals and tasks of the user.
  56. 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. 57. Simplify designs, you don’t need to define areas using lines and dividers. Adding white space can help 
 define areas.
  58. 58. Iconography is an effective way to communicate on our ever shrinking devices.
  59. 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. 60. 1 VISUAL HIERARCHY 2 TYPOGRAPHY 3 WHITE SPACE & ICONS These basic tips should help you in creating 
 better experiences for your users.
  61. 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. 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. 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. 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. 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. 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. 67. Emma Carter @ej_carter THANK YOU

×