Design Club


I ran a series of design thinking workshops at a London secondary school.

Here's a case study on my experience of working through the design process with teenagers.

A student hand colours an app interface mockup
Aspiring UI designer at work!

What problem does it solve?

Learning a basic design process of research, discovery, ideation and iteration allows kids to think through problems and design useful and usable solutions. As a mother to two teenagers I've found design thinking to be lacking in the school curriculum. The future needs people-centred designers and thinkers! I wanted to volunteer some time to pass on this simple skill.

Starting a Design Club

I discovered Design Club, a social enterprise on a mission to inspire the next generation of designers. The initiative was just kicking off and had run a few pilot sessions. The founders were very welcoming and had produced some fantastic resources for volunteering in schools. I had run a primary school Code Club for 4 years and had some experience volunteering in schools so this iniative seemed like a good fit. I eagerly signed-up.

I spent my Christmas down-time contacting secondary schools near Old St, London offering a free, weekly after-school Design Club. I arranged to visit a school in Islington who were super keen to run a club and we agreed a start date. I then got to work running through the suggested curriculum and decided how to structure the sessions. The school offered the club to students in Year 7-8, so kids aged between 12-14. I had 12 students initially sign up.

Define a challenge

I ran an initial kick-off session to give an overview of the design process and what we would be making over the coming weeks. We did some fun, creative warmups then defined our challenge. We would be designing and app that solves a problem for a person. For the first project we agreed we would all work on the same challenge but students could work in groups or individually.

Sheet with different projects and voting stickers
I stuck a series of potential challenges to the wall, talked through and gave out voting stickers. The winner was to design an app that helps people 'save money'.

We had an initial think about how an app might help people and why saving money might be important to them.

Who's it for?

We then chose a person to design for and created a user profile to measure our design decisions against. We thought about what our person's financial situation might be like and their attitude towards money.

Hand drawn user profiles
Getting to know our users

Empathise with your person

It's important to get to know the people you're designing for so you understand their needs.

I ran a session on people who live in difference places and have different needs. We looked at Facebook users in India accessing the app on old smartphones with 2g connections. I talked about my visits to the Digital Accessibility Centre and showed how Blind, low vision and mobility impaired people use assistive technology to access apps. This was a really successful session, the students seemed super engaged and keen to get outside their comfort zone.

We then mapped out 'a day in the life' of our person to see what someone does in a normal day, what their habits and frustrations are, and where we might be able to design something that fits their routine. We also built an Empathy Map where we picked a situation related to our person saving money and thought about what they are seeing, saying, feeling, hearing and thinking. This helped us generate ideas.

Gather inspiration

Now we had defined our challenged and our user, we did some research into existing apps and looked at how they solved problems. This was also useful from an information architecture perspective as we started to think about how apps are structured.

We talked about the importance of branding and making our app visually appeal to our person. It was time to get creative! We made mood boards around the theme of our app - and a lot of mess in the classroom. The students decided on an app name and tagline and used their moodboards as inspiration for a logo.

A student cuts up magazines to make a design moodboard
I sacrificed my old Dazed and Confused collection to a very messy moodboard session!

Brainstorm feature ideas

The students began to note down ideas that might help their person to save money. They presented their ideas to the class and I asked everyone to write each presenter at least one post-it with a further suggestion. This was a successful collaborative session and the students came away with lots more ideas.

Their ideas for saving money included:

  • Swapping with people locally
  • Learning to cook your own meals, rather than ordering expensive takeaways
  • Comparing the best deals in shops
  • Sourcing local ingredients
  • Finding good makeup deals and beauty product recommendations
  • Getting credits or cashback for gaming

The students then prioritised up to 3 main ideas to use for their app.

Students at a table look at printed out images of apps from the app store
We looked at existing apps to get inspiration for feature ideas

Prototype

I ran the next session on information architecture. We looked at elements that are common to apps; hamburger menus, navigation, icons, buttons, log-in screens, etc. I showed some photographs from our walls at Lloyds showing how users click through screens and explained the importance of making a plan or wireframe before beginning any detailed design work.

A hand drawn wireframe of a student's app
A student's app wireframe, thinking through the user journey

With wireframes ready the students then began to draw out their screens. We photographed each screen and uploaded to Marvel. Marvel allows you to make a clickable prototype of your app from your hand-drawn screens. It proved a great way of creating a 'real' app without a tool imposing technical or coding constraints.

A student's hand drawn app design
Drawing out UI to create a clickable Marvel prototype

Test

The students' prototypes were ready for testing and feedback. We split into teams and ran mini tests on each others work asking open and closed questions. This was a really noisy, fun session.

Children this age seem very influenced by social media likes, numbers and scores. It's worth bearing this in mind when designing tests as scoring each others apps out of 10 resulted in some upset designers. It's certainly one for me to iterate on for future!

Reflect

After testing, the students reflected on the project, looked at the feedback they had received and thought about how they could improve their app. The first time I ran the session the students did this independently but it then occurred to me to run it like a sprint retrospective.

The following project I ran the reflect session like a retro and some interesting collective thinking came out. This helped me shape the following term and get the group working together as a team towards the same shared goals.

Post it notes on a whiteboard, showing happy, meh, and sad sections
Design Club retro. A colleague joked the post-it "I ran out of time to finish my app" summed up his design career! At least I'm setting kids realistic expectations :)

As a designer I take it for granted everyone can think through a basic design process. It's a simple skill that's worth sharing. Huge thanks to Design Club for setting up this brilliant initiative to bring design thinking to kids who might not otherwise get this experience. If you're interested in become a volunteer mentor, check them out.

A sofa of design club volunteer mentors at a meetup.
On a panel of mentors at a Design Club meetup.

Continue reading

Scaling accessibility with a design system

Prev project

Rebranding Halifax across the digital estate

Next project
Headshot of Geri Reid, a white woman with long dark hair, wearing a blue and white striped top, looking off to the side

About me


I've designed digital products for the past two decades.

As design and accessibility lead on NewsKit design system, I helped some of the UK's largest media and broadcast brands to design at scale. I was design lead on the Constellation design system at Lloyds Banking Group and set up design system foundations at Checkout.com and BPP. Way back, I designed digital products at UBS and Bank of America.

Over time, my design roles have become more strategic: planning, training and writing technical specs and docs. My work on systems has also made me a keen accessibility advocate. Through care and attention, I've learned how a design system can provide a solid foundation for product accessibility.