R&D Toolkit
  1. Overview
      2. Overview
    1. Introduction
      2.
      1. Recent Updates
        2.
    2. Tools
      3.
      1. Research
        2.
      2. Delivery
        3.
    3. Resources
      4.
      1. R&D
        2.
      2. Websites
        3.
      3. Project Tracking
        4.
      4. Further Resources
        5.
  2. Research
      3. Research Tools
    1. Problem
      2.
      1. Discovery
        2.
      2. Prioritisation
        3.
      3. Project Scoping
        4.
      4. Framing
        5.
    2. Empathise
      3.
      1. Investigate
        2.
      2. User Interview
        3.
      3. User Insights
        4.
      4. Data
        5.
    3. Mapping
      4.
      1. Research Mapping
        2.
      2. User Mapping
        3.
      3. Organisation Mapping
        4.
    4. Synthesis
      5.
      1. Problem Reframing
        2.
      2. Define
        3.
      3. Feature Prioritisation
        4.
  3. Design
      4. Design Tools
    1. Ideation
      2.
      1. Warm Up
        2.
      2. Sketching
        3.
      3. Storyboarding
        4.
      4. Design Studio
        5.
  4. Delivery
      5. Delivery Tools
    1. Agile
      2.
    2. Scrum
      3.
      1. Overview
        2.
      2. Team
        3.
      3. Events
        4.
      4. Artifacts
        5.
      5. Glossary
        6.

marc.tools

A Product R&D Toolkit

Welcome. I'm Marc and this is a Toolkit to create things.
Design Tools    Ideation
Sketching

An overlooked but obvious method for communicating ideas, sketching is something that can be done by anyone, at anytime, in anyplace - perfect for rapid innovation.

In this section, we explore the reasoning and purpose for Sketching, the building blocks behind it, and how it will help lead us forwards throughout the Ideation phase.

Section Tools
Overview
Visual Alphabet
UI Icons
Sketch Log
AI Sketching
  
Ideation    Sketching
Tool Info
Category Sketching
Updated 18/07/23
Examples   PDF     Miro

What is Sketching?

Whilst software development can be a complicated and lengthy process, Sketching is a quick and simple method for introducing ideas in a visual way.

Because anyone can Sketch, it invites stakeholders and others in to the development process, casting the net wider and resulting in more ideas and inching a project forwards towards a solution.

Additionally, the rough approach to Sketching reduces pressure on things looking or being perfect, and reduces time spent on things - meaning we don't get anchored to ideas or designs, and move on quickly.

There is also a lot to be said for just starting, just picking up a pen and sketching out your ideas and thoughts for a project - positive momentum.

Why Sketch?

Sketching helps us on a number of levels. We can explore ideas, subjects and solutions rapidly, and then refine things further.

This therefore lends itself well to prototyping ideas - by visually communicating solutions, we can quickly gather feedback to help validate we are solving the right problem, and validate that we are solving the problem in the right way.

Tools

  • Paper
  • Pen(s)

Optional Tools

  • Camera (for recording)
  • Clock (for Timeboxing)
  • Stick it notes (for explaining further, or feedback)
  • Sticky dots (for voting)
  • UI Paper Templates

Process

Whilst there isn't a defined process beyond take a pen and start drawing, the Sketching method is applicable within over processes. For example;

  • Warm up Exercises
  • Design Studio
  • Prototyping
  • Agile iteration, particularly when working closer with a developer to quickly tweak things.
  • Wireframes
  • Low Fidelity Mock-ups
Further Resources
  Everything You Need to Know About UX Sketching - Toptal
  7 reasons for sketching in UX design - Invision
  Why designers sketch - Group Visual
  Visual Thinking for UX Designers - Stone Soup Creative
  
Ideation    Sketching
Tool Info
Category Sketching
Updated 18/07/23
Templates   PDF     Miro
Creator Dave Gray

As a means of bringing a consistent and speedy approach to Sketching, the Visual Alphabet is a great tool for helping participants to think visually.

Originally created as a means to aid visual thinking in education, it is for design what reading, writing and arithmetic is for the rest of the education system.

The theory is that if you can break down images in to basic symbols, then you can draw just about anything using the visual alphabet as building blocks.

Further Resources
  Forms, fields, and flows - Xplaner
  Visual Alphabet: Making Visual Thinking Visual and Fun - Carrie Baughcum/Youtube
  A Brief History of the Visual Alphabet - Vimeo/Xplan
  Visual Alphabet Poster - Xplan
  In defense of the visual alphabet - Dave Gray/Xplaner
  
Ideation    Sketching
Tool Info
Category Sketching
Updated 18/07/23
Templates   PDF     Miro

Deeper in to the Sketching process, whether ideating or creating prototypes, including normal User Interface elements in designs will help with further helping to visualise the idea.

This will also help to demonstrate the envisioned User Experience and how the various elements will tie in the with the user goal.

What are UI Icons?

Like other elements that make up a webpage, most users won't pay attention to them but will instantly know how to interact with UI icons. They are small little shapes and designs that indicate immediately to a user what they represent and what happens if they are interacted with.

They are common in the real world, particularly with infrastructure like trains or airport, so they translate well to product design.

They are also universal, language agonistic, and also accessible. The perfect companion for sketching and prototyping.

This cheat sheet is a small sample, but are generally the most used Icons and should cover an array.

Further Resources
  UI Icons: Explaining Every Single Type with Inspirational Examples - HTML Burger
  Material Icons - Google Fonts
  Font Awesome
  
Ideation    Sketching
Tool Info
Category Sketching
Updated 18/07/23
Templates   PDF     Miro

Whilst Sketching is very much about fast iteration, pushing through ideas and thoughts to arrive towards something tangible, there might also be some gold left behind. At the end of the day, if you are taking the time to think, analyse and sketch something, then surely it is worth saving.

A Sketch Log is a method of documenting a design studio or sprint for follow up studios, or as a general archive of ideas.

These sketches are great to look back on for inspiration for you next design exercise, or reminders as to why you didn't pursue a particular path. It can also be fun to have memories of those sessions to look back on and remind yourself why you do what you do.

  
Ideation    Sketching
Tool Info
Category Sketching
Updated 19/07/23
Templates   PDF     Miro

The point of this toolkit is for rapid product development, and whilst Artificial Intelligence is still in its infancy and largely unexplored in this field, the potential it holds to achieve that speed goal is huge.

One such area is for Sketching. If the core idea behind Sketching is to rapidly visualise ideas, then typing (or speaking) a prompt to an AI service could potentially aid this in a massive way.

Prompts

Quite simply, prompts are text based instructions that the AI service deciphers and translates to then create an output or response. In this instance, a visual output.

There is already a lot of discussion around the importance of crafting the right prompt, even to the point that it may become a career in its own right.

In this example our prompts will be for the purpose of a design, but the following Prompt Worksheet will help give a general overview on how to construct prompts.


Job Stories, How Might We's and Prompts

One interesting method for crafting a successful AI prompt to aid with sketching, design or prototyping is taking a HMW, and the Job Story that inspired it and formatting it in a way that the AI can understand.

Whilst it would be quicker to just ask the AI to create the entire UI, remember we are designing based on our previous validated research and feature prioritisation, and that AI is simply a tool to aid us in the ideation process.

A Job Story can help by adding further context to aid with creating the prompt, but focuses on the Job at hand rather than the persona;

When I want to go to a event that is sold out, I want to receive an alert to inform me when a ticket becomes available, so I can purchase the ticket quickly and go to the event.

and then with our HMW we can then convert them in to prompts. So if an example HMW might be;

How might we help the user to search for an event
How might we identify the events that are sold out
How might we allow a user to create an alert for a sold out event

our prompt could therefore look like this;

Prompt: A ticket alert system for informing a user when a ticket becomes available for a previously sold out event

We're basically rearranging our previous learnings in a way that the AI can use to generate visual solutions. By using a Job story and the HMWs, we can iterate the prompt to get us closer to something usable, and something we can build on.

This is of course simplistic, but remember we are only using this as a tool to help in our ideation process, not to create the end product.

Additionally, the benefit of using the AI is that it will also cover the smaller things we may sometimes overlook - the AI is using a vast resource of previously designed UIs to draw on, so it is doing a lot of the heavy lifting for us.

AI Services
  Uizard Autodesigner - Probably the best service for our needs in this use case.
  Diagram - Lots of cool things happening here, could potentially be as useful as Uizard.
  Figma - the UI design software also doing some very cool AI / autogenerating things.
  Vizcom.ai - A very interesting AI hybrid that combines a sketch with a prompt to create a render. Potentially less applicable in this instance, but worth a play around with.
  Runway - A more generic imaging AI, but might still come in handy when looking for something different or innovative.
  Midjourney - Another generic imaging service but still potentially helpful.

Further Resources
  What You Need to Know About AI Prompts - HackerNoon

Using the example prompt we created, the following artifact acts as an example of the output we can create using an AI service.