Designing websites for users

Designing websites for users

All too often we go from client's needs to designing and developing websites, why don't we consider changing our thinking and considering the user first? After all, they are the ones using the site the most right?

Presentation for WordCamp Auckland Conference in New Zealand, March 2017


Ngaire Ackerley

March 06, 2017


  1. Designing websites for users Ngaire Ackerley

  2. Who am I? • Digital Designer by

 • Freelance WordPress Designer and Developer • 6 years travelling the world & living in UK
 • Past organiser of WordPress London and presented in UK, USA, NZ • Blogger & Photographer
  3. When you start a web project, what

    are your first steps?
  4. Let’s make STEP 1: the user After all, they are

    the ones who will use it the most, right?
  5. Designing for users • User personas • User journey mapping

    • Navigation • Imagery and content • Layout • Fonts • Responsive and Accessible
  6. User Personas Who are the people we’re creating the site

  7. What is a user persona? • Represents a main type

    of user for your website • Shows their needs • How a user moves through website and what expectations they have • Helps identify features and functionality • User goals and values
  8. How to discover user personas • User research, analytics, speaking

    to users, clients • Identify key points from the research • Brainstorm • Separate the main personas into primary, secondary, and related categories. • Develop the appropriate descriptions of each personas background, needs, expectations and environment
  9. What a user persona looks like • Goals & Motivations

    • Current pain points/frustrations • Demographic data • Quote capturing their attitude general/towards the site • Short Bio • Technical ability & devices use/how often • Other brands/websites they may like
  10. Example: user persona Ricky, 30, South Auckland, Office worker, lives

    alone • Wants to volunteer or donate - help in some way • Used to be bullied as a child • Donations take too long, too much personal information is asked • Excited to help make a difference • Bit introverted, reads and watches tv, donates to street appeals, dreams of doing good in the world • Very tech-savvy, owns iPad, iPhone, Laptop, works on Desktop • Other brands/websites: BBC News, LinkedIn, Reddit
  11. User Journey Mapping How will the users use the website?
  12. • Series of steps of how a user might interact

    with the website (current / future) • Helps understand user behaviour • Helps identify functionality • Helps define navigation and interface requirements User Journey Mapping
  13. Creating a user journey • From the Persona’s think about

    the main tasks that each user persona wants to achieve • Context • Progression • Devices • Functionality • Emotion
  14. Example of a user journey

  15. Example of a user journey

  16. Example of a user journey

  17. Navigation How can we direct the user around our website?
  18. Navigation • Shorter the distance to reach the goal, the

    more motivated they will be to reach it • People are lazy, most websites need to be designed more for scanning than reading
  19. Example of navigation sitemap

  20. Imagery and Content What do the users need?
  21. Imagery and Content • Read and source imagery and content

    before designing to understand meaning, tone etc. • Work with the client • Create a brief style guide for the site to follow • Think about how we can create appropriate content to help the different user personas achieve their goals • People are attracted to imagery, faces, eyes • People are easily distracted
  22. Layout Making a website easy to use and a good

  23. Layout • Start with wireframes - identify the key elements

    and functionality • Return to user journeys and goals • How can you best present the content and imagery without overpowering the website? • Think about visual cues to direct user through their journey to their goals
  24. Text stuff Typography (Fonts)

  25. Typography (Fonts) • Web fonts - they aren’t the same

    as print fonts • Readability - different sizes, styles (bold, italics), glyphs, numbers • Avoid quirky fonts that break convention • Consider the letter and word spacing of a font before choosing it, make sure they are comfortable and easy to read • Choose complementary fonts carefully
  26. More about fonts • Consider styling of quotes, bullets, headings

    • Paragraph formatting • Consistency
  27. The internet is open to everyone everywhere

    Responsive and Accessible
  28. Responsive and Accessible • Let content, not device size determine

    breakpoints • Keep it fluid and logically flowing • Keep media queries simple • Balance accessibility & obtrusiveness • Test on as many devices/platforms as possible
  29. Review • User personas 
 Who are the people using

    our website and what are their goals? • User journey mapping 
 How will our users achieve their goals? What are their steps? • Navigation 
 Keep it simple and easy to use • Layout
 Keep it user focused and consistent • Typography/fonts
 Readability • Responsive & Accessible
 Design for content and as many people as possible
  30. Design for users key links • Personas: personas.html

    • User Journey: • Smashing Magazine (sign up for the newsletter): • design
  31. Thanks!