Geri Reid: Creating design systems

In week 3 of Spring term, we were joined by design systems and accessibility consultant Geri Reid. Geri divulged information about life not always going the way you expect and the journey she took to be where she is today. Geri’s path is relatable to young people and the struggles that they face, with a positive outcome.

 

Early life

Geri comfortably shared her experience of parental expectations and the struggle with undiagnosed OCD, leading to her dropping out of school and getting a tattoo. She then chose to travel around the world, flicking between random jobs, with the feeling of being lost and struggling with the sense of being left behind due to everyone around her graduating and getting jobs, while she still worked on understanding what she wanted to do. The Internet came about and had Geri hooked; to this day, it “still feels like magic” to be able to code HTML and create a whole web site. Geri then felt ready to take on Uni and received a BA at UAL, learning how to code and design before working an entry-level coding job. She found success through someone taking a chance on her, and she likes to do the same for undergrads today. She proceeded to work in the UX/UI design field, and reflected with positivity that the job she has today wasn’t even invented until she reached her 40s. Things we study today didn’t exist when she began her education.

‘The job you end up enjoying probably hasn’t been invented yet’ – Geri Reid  

Design systems

A design system is a collection of reusable elements, guided by a clear set of standards, that can be assembled to make stuff.

Massimo Vignelli was famous for his redesign of NYC subway signage, a design system he created to aid people through their everyday journeys. Up until mid-1960s, subway signage was unclear and disorganised; signage was overcrowded and overlapping. Vignelli used rational shapes, which are the result of deep cultural sensitivity, with shapes and colours to create an understanding of direction. The work of Vignelli indeed shows a timeless validity housed in its pragmatic, rational, and visually forceful nature.

 

the1970 New York City Transit Authority Graphics Standards Manual ...

‘Standards Manual’ –  by Massimo Vignelli 

 

When Geri worked at large companies like Lloyds Bank, she noticed that the headers were never the same size or placement, which made it look like a scam website due to a lack of consistency. Design systems work when you break the designs into small, reusable chunks. This works for all aspects of design, not just UX/UI. An important thing to note is that when you break down the design, each element becomes known as an ‘Atom’; they are smaller components that create larger products. Brad Frost had the idea of atomic design, and to find out more, Geri suggested buying his book, Atomic Design. It stems from the metaphor of small atoms forming into molecules and then organisms to create templates, pages, or products. With further research, it has become known to us as designers that there is a layer before atoms, called design tokens, the foundation of a system: colour, typography, grid, and spacing.

 

The Atomic design process using instagram example steps.

 

When working on your design system, you will begin with your brand colours and create a design system ramp, a great website to use that was suggested during the talk by Geri is Leonardo (leonardocolor.io). Good colour contrast is essential for accessibility, this is beneficial to the 2.2 billion people worldwide with forms of visual impairments are able to read the content. Colour Contrast Checker will give you an instant pass or fail result for how well your contrast is working with your background. A useful way of scaling your typefaces for websites comes from free websites such as Typescale – Create stunning typography, generate CSS, and find inspiration. Another website that will be useful to you as a designer is Gridlover it is another free tool that Geri loves to use to help her split up the CSS and show her the underlying grid. A system that Geri helped design and shape herself is the NewsKit design system, made from code libraries to help create news formats for companies like TheSun, etc. NewsKit provides information on how to structure and utilise visual appearance to create fluidity and enables agile project management scheduling for designers, giving them objectives to complete, similar to Padlet for students.

 

Digital accessibility

It is all about removing barriers that prevent interaction with or access to websites, digital tools, and technologies by people with disabilities. Disabilities are not always visible and can be situational or temporary, for example, a broken arm or being outside with light glare. Geri expresses the importance of being thoughtful with your design. Web Content Accessibility Guidelines (WCAG): Understanding WCAG 2.2 – Service Manual – GOV.UK (www.gov.uk). The four main principles of WCAG  are Perceivable, Operable, Understandable and Robust. Being excluded is like a punch in the gut, and leaving people out does not meet accessibility standards. Ability bias is unintentional and typically typically because we base our designs around ourselves and people we know. You will make mistakes and won’t make a perfectly accessible product the first time around, but this is how, as designers, we learn and improve. Be messy and experiment; before having a system, test and test and test again. Geri personally takes the approach of creating whole screens before breaking things down into her atoms and molecules, especially as some elements are reusable.

‘ You can apply a system to any sort of design’ – Geri Reid.

Below are examples of websites and books Geri shared that are very good at helping you understand and implement accessibility:

 

geri@gerireid.com

@gerireid

 

Conclusion

Geri’s talk was relatable and extremely valuable for students of all years, particularly for UX/UI projects. Her presentation was informative, covering her journey, design systems, and accessibility in design. She shared her wisdom and supplied lots of free websites that will be valuable to projects across students studies, and they spoke of wanting to watch the recording again as it was so informative. Geri ended her presentation by saying, ‘Everything you design and build leaves a legacy. Make yours a good one.’

 

‘Excellent and highly informative. Truly riveting.’  – Part 1 student 

‘Amazing speaker, and relevant to our practice across design disciplines.’  –  Department Lecturer

Greg Bunbury: Ethical design

In Week 8 of Autumn Term, we were joined by Greg Bunbury a Graphic designer and consultant, as well as a sessional lecturer here at Reading. In this session, Greg spoke of real-life experiences, gave the students interactive elements throughout his presentation and really engaged with why ethical design is so crucial to today’s industry.

 

What is ethical design? 

Greg began by approaching the students with the trolley problem. This warmed them into understanding the most drastic form of moral principle. Greg states that as designers we do not always see the consequences of our ethical choices. Things get complex, and that is why Ethical design is so important.

Ethical design is all about respect – using a broad approach to design products/services or experiences that priorities moral principles/values. Ethical design is not just about something looking good or doing its job–  it must also contributes positively to society. Ethics is considered a route to advocacy and activism but in itself it is a different construct. Ethics can lead to advocacy and activism but that isn’t what ethics is. Most humans have a moral compass allowing them to be respectful and honest. However, this doesn’t stop them from being ignorant when it comes to understanding world issues to allow for ethical progression.

‘Design is about intention not delivery’ – Greg Bunbury

A good guide to follow is the ethical pyramid which represents respect beginning with human rights, leading to human efforts, and onto human experiences. Greg says that ‘ethics is not politics. It is moral human behaviour, a study of right and wrong.’

 

What is design?
A screenshot from Greg’s presentation explaining what design is.

Why is Ethical design Important?

Unethical design causes harm. Unethical design affects people in many different ways: physically, through financial strain, sleep deprivation, or the taking of personal data. People can feel betrayed by design, and can be affected emotionally and financially. Exclusion by design can be extremely debilitating for some people. For example, making a building inaccessible to wheelchair users by excluding ramps and lifts and disabled toilets is cruel. Design can also be ageist, biased, racist, employee greenwashing, or generally conceal rather than reveal truths.

Dark patterns are a seriously unethical way of mistreating humans basic rights, issues such as hidden costs, opting into handing over data to use their sites, roach motel, forced continuity and covert spam. Design should be clear and ethical and this is the key to great design.

I-can't-breathe-george-floyd-brixton-brotherhood-media-greg-bunbury
‘ I can’t breathe’ billboard designed by Greg Bunbury.

How can you bring ethics into your design work?

  1. Learn what you think – there’s nothing worse than having an opinion but no understanding of why you hold this opinion. People challenge and question you in life and you need to be prepared with why you think what you think.

2. Learn to ask powerful questions – question the suppliers you chose, the printers, your advisors, the images that you choose.

3. Learn to say ‘no’ – If something isn’t right or ethical say ‘no’, avoid dark patterns and choose a better path.

‘WHY?’ is such a strong question to ask yourself and others it challenges us to understand our choices and the choices of others. So next time you go to say ‘yes’ to something think about why your saying yes in a deeper perspective.

Never lose sight of your purpose and values in design.

Conclusion

Greg offered an extremely insightful talk that every student learned from. He made it clear how important being ethical in your design work is and the success to being more ethical. He covered a wide range of topics within his presentation such as the trolley problem is unrealistic and you will not necessarily see the effect that your design has on people but questioning why will be key to being as moral as you can be. Design is so much more than being creative it is about portraying a message, being inclusive and making it user friendly. Greg’s work and words are truly empowering and his passion and honesty in his journey and experience is inspiring to young designers searching for their place in design.

 

‘ I really liked how Greg highlighted and warned people of the potential mistreatment of freelance designers so that students can be more wary when handling clients should they choose to be freelancers, issues such as no credit of the work or even denying the work you created and not paying etc.’  – Part 2 student 

‘Seeing the emotional side of design and also seeing Greg’s work was amazing’ – Part 2 student

‘Greg’s insight into ethical design should be mentioned much more along this course’ – Part 3 Student