Live More new Guides on the way! Get notified by signing up to the Guides newsletter.

Contributed by

Blood Cancer UK, is a UK-based charity dedicated to funding research into all blood cancers including leukaemia, lymphoma and myeloma, as well as offering information and support to blood cancer patients.

Use this Guide to help you create websites and digital services. It shows you how to use particular tools in useful ways at different stages of the design process, with 2 templates. It doesn't explain how to do every stage. It offers links to more detailed resources when it doesn't explain a stage.

Steps to using Miro, Figma and ChatGPT to support a design process

Choose an online whiteboard (Miro)

You’ll need an online whiteboard for several tasks. Whiteboards give you and other stakeholders somewhere visual to explore, collaborate and test insights and ideas.

They work well for:

  • Gathering research - because you can add screenshots and other types of data. They aren’t so good for interview note making though.

  • User journey mapping

  • Workshops

  • Presentations - they can be good for showing people what is happening and why.

Choose a sketching tool (Figma)

Online sketching tools help you move from having ideas to visualising them. Use these tools to make outlines, wireframes and prototypes of any part of your digital service or website. You can copy and screenshot things you make and add them to Miro too.

Choose an AI content tool (ChatGPT)

AI content tools can support some design processes. They rely on good prompts and questions to generate good content. Content can be used as it is, edited to suit or to help you reflect. You should always check their accuracy.

Choose a spreadsheet tool (Excel)

You’ll need a tool for logging user interview and testing session notes. Excel works well because it enables you to record notes side by side for each interview or test. You could use another spreadsheet tool too, like Google Sheets. These embed better into Miro boards.

Blood Cancer UK used MS Office suite. But it doesn’t have tools for researching, designing. And PowerPoint didn’t give them the creative freedom they needed. They didn’t have a budget for a big design platform so they combined several existing and cheaper tools instead.

“The words UX or user experience make designing sound more complicated than it is. It’s a lot about learning to empathise with people’s experience of your service or website.” - Ben Sykes, UX and Innovation Lead, Blood Cancer UK

It’s worth spending learning to use Miro, Figma and ChatGPT. It will save you time and make it easier to implement the steps in this Guide.

There are several ways to learn.

  1. YouTube videos - you can learn skills for all of these tools. Youtube is the most common way that our Guide contributors learn to use tools.

  2. Online workshops - Miro and Figma both offer free workshops.

  3. Knowledge hubs and community support spaces - Miro and Figma both have searchable versions.

  4. Trial and error. Play around with each tool. Try things out. Try their templates. They are all very forgiving tools.

You can also copy an existing website or page into Figma and edit it. This saves time and is easier than designing something from scratch. One way to copy a website is to use Builder.io.

Blood Cancer UK have learnt to use these tools via different methods.

Miro

They learnt by:

  • observing how others used it as a facilitation tool

  • participating in Miro webinars

  • dragging things around on the board and making a mess.

Figma

They learnt by:

  • playing about with it like Miro

  • watching YouTube videos while doing tasks

  • taking a £15 online training course with Udemy - after their early prototypes turning out quite messy.

ChatGPT

They learnt by:

  • reading articles about how to prompt it effectively.

  • trial and error - typing in prompts.

They already knew enough about how to use Excel.

To learn to use Figma to design interfaces you could take the Udemy Figma UX UI course.

Set up one board. You will use it for each design stage.

Add an index frame first. This should show your board contents and link to each one.

Then add 4 large, equal sized frames for:

  • Discover - where you’ll add insights and other assets from your user research (Steps 4-6)

  • Design - where you’ll put things like ideas and prototypes and insights from testing ideas (Step 8+9)

  • Develop - where you’ll add screenshots of your final solution, and insights from testing it (Step 10)

  • Deliver - where you’ll add visual data and notes as you monitor delivery (Step 11)

Make these 4 frames equal in size. This will help you use the same size post-its for each one.

Then add a link to each frame to the index frame.

You could save time by copying Blood Cancer UK's Miro template for designing user-centred services.

The template includes a knowledge board, persona templates and prioritising and problem statement templates. Many of these are based on user-centred design advice from CAST’s Digital Toolkit.

Blood Cancer UK’s framework uses one Miro board that takes anyone in their organisation step by step through the design process.

Write a problem statement and set up a knowledge board. Then you'll want to set up some user interviews. These links will help you:

Your interview script is an important part of the user research process. The script includes questions and prompts to ask your research participants.

ChatGPT can help you write your script. But don’t just ask it to write you some questions. You need to give it specific, detailed prompts. Tell it what output you want. When it can see what you have already written it does a good job of filling in the gaps.

For example “Give me 10 questions for a user interview. The interview topics are X, Y and Z. Here are some questions that I have written that I want you to improve.”

Here’s another example: “This is my problem. These are my existing questions. What are 3 other questions could I ask?”

Or you could write the script yourself and use ChatGPT whenever you get stuck on a question or theme. Then you could ask it to reword a single question or give you ideas for questions to get more depth from the interview.

If you want it to write an introduction to the interview then tell it how long you want the introduction to be.

Don’t let ChatGPT generate ideas for you without giving it good prompts first. And be ready to edit its wording to suit your participants.

Setup an Excel document for writing your interview notes. Add your participants across the top and your questions down the side.

Copy this online version of Blood Cancer UK's Excel document for interview notes.

Blood Cancer UK run all their user interview scripts through ChatGPT first. The suggestions it generates helps them think through their questions.

They often have to make small changes to how questions are worded. This is because ChatGPT isn't accurate enough.

After completing your user interviews add your notes to your Miro board and plan a synthesis workshop.

You could use ChatGPT to help you with this. Try using it to:

  • Summarise a single participant’s user interview notes (make sure notes are anonymised first)

  • Summarise large amounts of simple data - for example, several responses to one question (try asking it “what are the key things that people say in relation to question X”)

  • Plan a workshop - to recommend agendas or for help to cut out activities to make the workshop shorter.

This can help you reflect and check what you are doing. It's useful if you don’t have a colleague to give you feedback.

Add any other research outputs to the board.

Synthesise your data on your Miro board. You could also annotate your insights to make it easier for others to understand your thinking. This will also help you when you return to the board after a break.

Use this guide to synthesising user interview notes.

Read this article about how the Shared Digital Guides team synthesised 7 types of user research data.

Sometimes Blood Cancer UK use ChatGPT to help create or shorten a workshop agenda. They always check and edit anything it creates.

They also use it to recommend steps to improving insights from synthesis workshops. For example they ask it to find common themes if notes haven’t generated clear insights or if a card sort activity is inconclusive.

Sometimes if they are short on time they use ChatGPT to help summarise user interview notes. They paste in the anonymised interview notes and ask it to pull out themes or summarise what the participant said. Then they do manual work on the data because ChatGPT isn’t reliable enough to do it accurately.

You’ll want to report to stakeholders at different times in your project. Your first report will be what you learnt from user research.

You could:

  • Take screenshots of insight statements from Miro and add them to a PowerPoint or Google Slides presentation

  • Present on your Miro board, using frames to create a presentation that shows people key things

  • Create a separate board for presenting and copy or screenshot things onto that board.

You could also use Miro's video function or a tool like Loomio to record yourself explaining the insights from your board while navigating it. You can then share this with others.

Blood Cancer UK used to write reports in a word document. Most people found these dull and difficult to engage with. They couldn’t see what the report referred to.

Now they use PowerPoint for design reports. They add screenshots from the Miro board directly to the slides.

Occasionally they might share their screen and present their findings directly from Miro, using frames.

They also annotate their boards in visually distinct ways. For example they might add green post-its for things that people say work well and red for negative feedback. Then they can screenshot these directly into the presentation.

Ideation - generating ideas - usually follows the research stage. You can use Miro to run virtual ideation sessions with people you support and other stakeholders.

You can run a session with 3-10 people. Aim for diverse voices and a broad range of backgrounds. Include people who may not be so warm to your organisation. You’re ideating because there is a problem to solve.

Try to include at least one person who doesn’t have experience of your work. They could be from another team in your organisation.

You’ll need 2 facilitators for more than 5 people. Aim for a session no longer than 2.5 hours. Include a 10 minute break.

Make sure you start with or include an individual ideation activity in the session. This helps quieter people to participate. Be sure to refer back to your research. You might give people an insight and a problem statement and ask them to write their thoughts down.

After the activity, ask everyone to share their ideas. Keep going until everyone has run out of ideas. Group similar ideas together.

Use Catalyst’s guide to 6 ideation activities.

Use this guide to finding user research participants. It works for finding people for any involvement activity.

Blood Cancer UK have a good involvement network. This helps them avoid having the same people take part in involvement activities.

Their template includes ideation space and templates for activities.

They use individual and group activities. They use individual activities to make sure everyone gets heard and group activities to choose and build on ideas.

Towards the end of an ideation session they vote on 2-3 ideas to take forward for hypothesis testing.

You can use Figma to design low fidelity prototypes. Or you can ask a designer to do this for you. If you use a designer they should take part in your ideation workshop.

Only prototype things you need to test. This includes new ideas and things you can’t find out in other ways (for example interviewing people, adding a question to your website, or analysing your site analytics).

Figma is still a fairly new tool for most charities. If no one else in your organisation has experience, look for support with your prototype designs.

Blood Cancer UK have learnt to use Figma themselves. They did this before they employed a professional user experience designer.

Sometimes they use the Builder.io Figma plugin. It lets them copy a webpage into Figma so they can then explore ways of changing it. They delete parts and change the title, images and content.

This is easier than starting with a blank screen.

Learn more about Builder.io.

Test your prototype in Figma.

Show the designs to people and ask them what they think the designs are for, or what the designs make them want to do. If you’ve made them clickable then give people tasks so they can try them out.

Use an Excel sheet to make notes on what people do and say.

Then copy your prototype designs into Miro as screenshots. Use post-its to annotate them with your notes on what people did and said, or didn’t do. Synthesise them in the same way as Step 6 and add insights to your annotations.

For ideas on running a testing session read Catalyst’s how to test your website with your users

Blood Cancer UK test their prototypes:

  • with people they support. They use Excel to make notes while on the call. Immediately afterwards they use these notes to annotate prototype screenshots in Miro.

  • through 3rd party testing sites. They run unmoderated (unsupervised) testing on designs using testing sites like usabilityhub.com and maze.co. These sites also have their own testing panels you can pay to use.

Once testing is complete you might iterate your prototype and test again. Eventually you’ll be ready to report and make recommendations for next steps. Next steps could include proceeding to a build or implementation phase.

Add any new learning and insights to your Miro board. If you have any analytics from testing your prototype as a live product or service include these.

Make a report using the same methods as Step 7. Add screenshots to a slide deck or show annotated notes in Miro.

Blood Cancer UK keep all their data and insights in Miro. They include annotations and visual data from Google Analytics and other sources.

They use screenshots of its contents for any PowerPoint reports. They think about what stakeholders want to see and how they might prefer to digest the information.

They include recommendations and suggested next steps in their reports.

Further information