ux-playbook
HomeProjectsServicesContact
Search…
A Critical Reflective Journal (CRJ)
Module 1 - GDD710
Module 2 - UXD720
Week 1
Week 2
Week 3
Week 4
Week 5
Week 6
Week 7
Week 8
Week 9
Week 10
Week 11
Week 12
Module 3 - GDD730
Module 4 - UXD740
Module 5 - GDD750
Appendix
Powered By GitBook
Week 8
Abstract Our learning objectives for the week are:
  • Explain how visual design impacts the user experience.
  • Apply the basic tenets of visual design to fuel a better user experience.
  • Differentiate between good and bad visual design choices.
  • Design intuitive interactions using colour decisions.
  • Identify well-made typefaces and apply best practices for arranging and setting type.

Post 1: Design systems

Illustration: Raul Soria
I have created several design systems over the years using various programmes like InDesign, FreeHand and Fireworks. I can tell you from experience that it was horrendous. Maintaining them was near impossible as you had to print them out, and one person in the studio had to become the brand guardian who maintained it. Which, in turn, meant if that person was sick, left the company or lost momentum, the whole design system instantly became out of date.
Designers for years have been calling out for the digitisation of design systems, as have brands, who have seen positive customer sentiment for exposing their rationale and principles that surround the brands.
  • https://brand.uber.com/
  • https://creative.starbucks.com/
  • https://design.studio/work/airbnb
But what is a design system? A design system is a collection of reusable components that can be assembled to build products. Over the past ten years and since the standardisation of responsive design, designers such as Brad Frost have sought to bring order and hierarchy to the interface design process.
In 2013, Brad Frost coined the name for a block-based system: Atomic Design. Atomic design encourages breaking product design into smaller components rather than looking at each element as a unique design entity. When Frost formalised the atomic design methodology, his goal was to develop an approach that would make the design more modular.
He noticed that clients and colleagues referred to designs at a page level and rarely discussed the individual elements which combine to create those larger layouts and realised that we lacked a framework and terminology to bring the conversation down to an elementary level.
After researching how other fields framed the concept of modularity, Frost came across similarities in the study of matter composition and Chemistry.
In Chemistry, atomic elements have fixed properties that define them. For example, Oxygen and Hydrogen on their own are atoms with independent properties. However, when these elements are combined, they create molecules, which take on unique characteristics, made up of the atoms they contain.
Many companies have adopted Frost's approach, and several have published their design systems publicly. Google, for example, refers to their set of "atoms", "molecules", and "organisms" as the Material Design system. Salesforce's Lightning Design System and Apple's Human Interface Guidelines are other good examples.
But in a nutshell, Frost's Atomic Design methodology has five distinct stages, with the first three modelled after their equivalents in the Chemistry world. Each stage building on the previous and aggregates to create Templates and Pages.
Elements - A substance made of one type only
  • Colour
  • Grid
  • Typography
  • Spacing
  • Rules/lines/strokes
  • Elevation and Shadows
  • Image sizing
  • Iconography
  • Buttons
  • Inputs and Form elements
Components - A substance formed by a union of elements
  • Avatars
  • Button Groups
  • Calendars
  • Banners
  • Cards
  • Charts
  • Comments
  • Maps
  • Media players (Video & Audio)
  • Modals
  • Notifications
  • Pagination
  • Placeholders
  • Tables
  • Tooltips
  • Text-groups
Organism - A substance formed by a union of components
  • Header
  • Footer
  • Chatbots
  • 50:50
  • 25:75
Templates - 'Pages' formed by a union of Organisms
  • Home page
  • Index page
  • Section Page
  • Article page
  • Form page
Pages - Templates formed by variation of templates Pages have with real copy and data ready for UX testing and development handover
This list is not exhaustive. The reality is that teams will call organisms different things, but the underlining elements and components will be consistent as they follow development and coding practices.
Why do I need a design system? Design systems are great for cross-functional workflow, but only once the master core file with all the elements and components is set up. When this is done, numerous projects can be kicked off, ensuring consistency across the entire brand.
Here is an example of a file and design system I created for Mercedes-Benz.
As you can see from this workflow diagram, teams can retain autonomy while retaining consistency on a brand level.
Consistency is one of the core principles of proper design and user experience. A consistent design is intuitive, predictable and easy to understand. There are different forms of consistency to be found when building a design system.
Visual Consistency: Elements and components that look like they are made from the same mould and have high similarities in their visual properties. This relates to the sizing, colour, font, and anything that a user can see. Increasing the ability to learn how a product works.
Functional consistency: ensures the user is getting the outcome they would expect when using the application. It helps make the user feel safe and familiar with the product by increasing predictability.
Internal Consistency: Allows users to focus more on their actions and tasks across an application instead of taking the time and effort to learn the user interface and how the action should be carried out.
External Consistency: External consistency comes into play when the same user interface principles are be reused across different platforms.
If a user has to learn how to navigate and interact with your website, they would appreciate it if the mobile application functioned the same way. So external consistency can be achieved by keeping things familiar across different platforms, systems or products.
In conclusion With a growing design process and having different teams joining the production pipeline, it's necessary to make sure that everyone understands what they're working on and the resources they have at hand.
Instead of having individuals from the different teams roam different folders and files to seek the knowledge they need, a design system provides everyone with all the documentation they need to get familiar with the project. Fostering collaboration across the project spectrum. Helping developers, designers, UX engineers, and clients share a single shared source of truth. In conjunction with providing consistent experiences for users.
References
  1. 1.
    Frost, B. (2013). Atomic Design. [online] Brad Frost. Available at: https://bradfrost.com/blog/post/atomic-web-design/. ‌

Post 2: Content and engagement

Focusing on my problem statement:
I started to explore features that would encourage men to open up and talk to each other. I have a background in journalism and storytelling and have always known content to be king when it comes to engagement. Content is what makes a product unique.
However, a study of my user group suggested that articles alone won't cut it as male friendships are more likely to flourish in groups (David-Barrett et al., 2015) and seem to thrive in shared experiences.
The best way I thought of doing this was to brainstorm a few options. We already had features for finding, joining and paying in physical team activities.
So, "How can we make users feel comfortable enough to discuss other topics beyond girls and football?"
I started to research 'closeness' and look for existing studies on how people defined closeness and what they would want to know about an individual for them to consider them a friend.
A study conducted by Nathan W. Hudson and R. Chris Fraley of the University of Illinois ran a study with more than 150,000 participants to examine how much intimacy people want and how people defined and perceive intimacy (Hudson and Fraley, 2016)
Results indicated that it depended heavily on individual personality type.
People with high levels of attachment anxiety required more time, affection, and self‐disclosure to interpret a relationship as 'close'. In contrast, highly avoidant individuals required less time, affection, and self‐disclosure to define a relationship as 'close,' and they perceived more intimacy in vignettes than did their more secure peers.
In the study, participants used an eight-item scale to rate the minimum qualities a relationship must have for the participant to feel close to the other person.
Participants were presented with 18 single‐sentence vignettes created for this study that described a relationship between a man and a woman. Single‐sentence vignettes were used, rather than longer stories, to allow participants to rate multiple independent items that featured a wide array of indicators of relational closeness.
I liked this approach and recalled playing a similar ice-breaking game once. The categories of questions pertained to the following areas:
  • Love and relationships
  • Sex
  • Personality and emotions
  • Culture and taste
  • Family and relationships
  • Self
  • Work and money
  • Travel
  • Life and death
Using these categories as a starting point, I came up with a bunch of questions and surveyed a pool of 18 people, asking them the following:
The questions used were:
  1. 1.
    Which of your talents can you trace back to your childhood?
  2. 2.
    What advice would you give to the 16-year-old self?
  3. 3.
    What is/was your favourite lesson at school?
  4. 4.
    If you could be an animal for a day, what would you be?
  5. 5.
    Is there a pet you wish you had?
  6. 6.
    What are your happiest memories of your parents?
  7. 7.
    What have you done in the past that you're still embarrassed about?
  8. 8.
    Who decides how often you have sex in your relationship?
  9. 9.
    If there was one thing your partner could magically change about you, what do you think it would be?
  10. 10.
    If there was one thing you could change about your partner, what would it be?
  11. 11.
    What would your ideal pornography be like?
  12. 12.
    Which famous person of the opposite sex would make you consider sleeping with?
  13. 13.
    What is one small thing that annoys you about your partner which would be too tiny or bizarre to bring up?
  14. 14.
    Your partner mentions in passing that someone else is attractive. What do you do?
  15. 15.
    Your partner suggests inviting a third party to join you in bed. What would you do?
  16. 16.
    At what age do you feel someone stops being attractive?
  17. 17.
    What is a talent you would most like to have?
  18. 18.
    If you were given £20 million to set up a new business, what would it be?
  19. 19.
    What is your idea of a pointless job?
  20. 20.
    What is your idea of a meaningful job?
  21. 21.
    What is the thing that holds you back in your career?
  22. 22.
    Where have you been lucky in your career?
  23. 23.
    If all jobs were paid the same (and you had the skills), what job might have you pursued?
  24. 24.
    What sort of animal do you most identify with and why?
  25. 25.
    If you had to write your obituary, what would it say?
  26. 26.
    Whom do you admire and why?
  27. 27.
    What new skill would you like to learn?
  28. 28.
    If you knew you only had one year to live, how would you spend the next 12 months?
  29. 29.
    If you had to write a book about your life, what would be its title?
  30. 30.
    What secret have you wanted to get off your chest?
  31. 31.
    Is there anyone you regret losing touch with?
  32. 32.
    What makes a good friend?
  33. 33.
    Describe two things that you like doing with friends.
  34. 34.
    Do you consider your siblings your friends?
  35. 35.
    What do you like about your friends?
  36. 36.
    What are the nicest things your friends might say about you?
  37. 37.
    What's the kindest thing anyone's done for you?
  38. 38.
    What do you find most interesting about other people?
  39. 39.
    What do you imagine people say when they gossip about you?
  40. 40.
    Name two things you like eating.
  41. 41.
    What is your favourite film of all time?
  42. 42.
    What is your favourite book of all time?
  43. 43.
    Is there anything you are afraid of?
  44. 44.
    Do you have a hobby?
  45. 45.
    Could you ever be friends with a robot?
  46. 46.
    What music has influenced your attitude to life?
  47. 47.
    Imagine you were forced to write a poem: What would be the first two lines?
  48. 48.
    If you had to live somewhere else, where would it be?
Google form closeness questionnaire
The response was amazing, and I was able to whittle down the list to the below based on my responses.
  1. 1.
    Which of your talents can you trace back to your childhood?
  2. 2.
    What advice would you give to the 16-year-old self?
  3. 3.
    What is/was your favourite lesson at school?
  4. 4.
    If you could be an animal for a day, what would you be?
  5. 5.
    Is there a pet you wish you had?
  6. 6.
    What are your happiest memories of your parents?
  7. 7.
    What have you done in the past that you're still embarrassed about?
  8. 8.
    Who decides how often you have sex in your relationship?
  9. 9.
    If there was one thing your partner could magically change about you, what do you think it would be?
  10. 10.
    If there was one thing you could change about your partner, what would it be?
  11. 11.
    What would your ideal pornography be like?
  12. 12.
    Which famous person of the opposite sex would make you consider sleeping with?
  13. 13.
    What is one small thing that annoys you about your partner which would be too tiny or bizarre to bring up?
  14. 14.
    Your partner mentions in passing that someone else is attractive. What do you do?
  15. 15.
    Your partner suggests inviting a third party to join you in bed. What would you do?
  16. 16.
    At what age do you feel someone stops being attractive?
  17. 17.
    What is a talent you would most like to have?
  18. 18.
    If you were given £20 million to set up a new business, what would it be?
  19. 19.
    What is your idea of a pointless job?
  20. 20.
    What is your idea of a meaningful job?
  21. 21.
    What is the thing that holds you back in your career?
  22. 22.
    Where have you been lucky in your career?
  23. 23.
    If all jobs were paid the same (and you had the skills), what job might have you pursued?
  24. 24.
    What sort of animal do you most identify with and why?
  25. 25.
    If you had to write your obituary, what would it say?
  26. 26.
    Whom do you admire and why?
  27. 27.
    What new skill would you like to learn?
  28. 28.
    If you knew you only had one year to live, how would you spend the next 12 months?
  29. 29.
    If you had to write a book about your life, what would be its title?
  30. 30.
    What secret have you wanted to get off your chest?
  31. 31.
    Is there anyone you regret losing touch with?
  32. 32.
    What makes a good friend?
  33. 33.
    Describe two things that you like doing with friends.
  34. 34.
    Do you consider your siblings your friends?
  35. 35.
    What do you like about your friends?
  36. 36.
    What are the nicest things your friends might say about you?
  37. 37.
    What's the kindest thing anyone's done for you?
  38. 38.
    What do you find most interesting about other people?
  39. 39.
    What do you imagine people say when they gossip about you?
  40. 40.
    Name two things you like eating.
  41. 41.
    What is your favourite film of all time?
  42. 42.
    What is your favourite book of all time?
  43. 43.
    Is there anything you are afraid of?
  44. 44.
    Do you have a hobby?
  45. 45.
    Could you ever be friends with a robot?
  46. 46.
    What music has influenced your attitude to life?
  47. 47.
    Imagine you were forced to write a poem: What would be the first two lines?
  48. 48.
    If you had to live somewhere else, where would it be?
Most of the question removed were the random ones and ones about Sex, which is a rather delicate topic for most people.
Next steps So now I had my content, I had my next question to solve:
References
  1. 1.
    David-Barrett, T., Rotkirch, A., Carney, J., Behncke Izquierdo, I., Krems, J.A., Townley, D., McDaniell, E., Byrne-Smith, A. and Dunbar, R.I.M. (2015). Women Favour Dyadic Relationships, but Men Prefer Clubs: Cross-Cultural Evidence from Social Networking. PLOS ONE, 10(3), p.e0118329. ‌
  2. 2.
    HUDSON, N.W. and FRALEY, R.C. (2016). Adult attachment and perceptions of closeness. Personal Relationships, 24(1), pp.17–26. ‌
Previous
Week 7
Next
Week 9
Last modified 1yr ago
Copy link
Outline
Post 1: Design systems
Post 2: Content and engagement