Skip to content

Latest commit

 

History

History
179 lines (120 loc) · 10.4 KB

design-thinking-artifacts.md

File metadata and controls

179 lines (120 loc) · 10.4 KB
Raw

Design Thinking Guide

The instructions herein provide guidance on how a participating hackathon team can get started on the delivery of the requirements for their selected event track.

NOTE: These instructions are applicable to both event tracks.

Prerequisite Education

Getting Access to Mural

You will need access to Mural to participate in Design Thinking activites. Refere to the links below to get started:

Plenary Sessions

The following plenary sessions are recommended before beginning the hackathon. Please refer to the Participants Guide for the schedule of sessions.

Highly Recommended for Design Thinking track

Workshop Purpose
Atomic Accessability Design Overview Introduction to Atomic Design for Accessibility.
Atomic Accessibility Design Theme Builder Workshop Overview of the Theme Builder tool, how to use it, example use cases.
Design Thinking Recipe Introduction to Design Thinking and the prescribed recipe (set of exercises) to help create user- centered use cases for the event challenges.
Getting Started with Mural Overview of the collaboration tool, Mural. Hint: you will be utilizing Mural for the Design Thinking recipe.
Atomic Toolchain in Action Show-n-tell session demonstrating the integrated workflow of tools used by designers.
Atomic Accessability Design Theme Builder for Designers Workshop Learn how to use the Theme Builder for designing new components and theme.

Additional Sessions that might be beneficial

Workshop Purpose
Atomic Accessibility Design Theme Builder for Developers Overview of how Developers can best utilize the theme builder tool to create accessible solutions.

Sample Material

The following resources provide a bootstrap for participating hackers.

Description Template
Design Thinking Recipe Template Mural Template
Completed Sample Design Thinking Board Completed Sample DT Board
Use Case Story Story template
Playback Brief Template PowerPoint Template

Exit Criteria

Upon successful completion of this guide, the following hackathon checklist requirements will be produced:

Artifact Description
Design Thinking Mural Board URL to whiteboard used for team brainstorming.
Use Case Story Markdown file describing the use case with support by UML diagrams.
Playback Brief PowerPoint Presentation used to convey results of Design Thinking activities. This presentation should be used for the creation of the 2-min Concept Playback Pitch Video.

Design Thinking Recipe Instructions

Design Thinking Recipe

  1. Select a team member to create a new Mural Board from this recipe template. Instructions for how to copy this template can be found here.

The Design Thinking Recipe is broken down into 2 phases:

  • Phase 1: Frame
    • Teams should start here if they do not know WHO or WHAT their team is solving for
  • Phase 2: Define & Ideate
    • Teams should start here if their team has an idea of WHAT they are trying to solve for

Phase 1:

Step 1: Choose a Persona

As a team, determine a persona that you want to find a use case for.

  • Which of the following personas do you want to find a use case for for the Theme Builder tool?
  • Who will you be creating a solution for?
  • Think about how the tool could be applied, which of these personas best fits that application?
Persona Description
Designer Defines consistent design language components and style. Needs to be able to create accessible styling for content creators and developers with minimal effort.
Developer Implements design language in software systems that generate content. Needs to be able to create accessibly inclusive renderings with ease.
Content Creator Utilizes the design language to produce consistently styled content. Needs to publish accessible content without extra steps or effort.
Impaired Person A content consumer with one or more disabilities or disorders. Needs to be able to interact with accessible content to achieve goals.

Step 2: Brainstorm Activities

Once your team has chosen a persona, brainstorm as many tasks that persona needs to do as it relates to accessibility.

  1. Set 10 minutes on the timer
  2. Brainstorm what tasks your persona needs to do? What are their jobs? What activities does this persona do as it relates to accessibility?
  3. Discuss your stickies as a team
  4. Vote on the most important task and bring this idea to the next activity

Step 3: Scenario Map

Place your top voted task at the top of this activity. Now we are going to breakdown the steps taken by your persona to complete this task.

  1. Spend 5 minutes determining the high level steps that your user performs to complete the task your team has identified. Fill in stickies within the "steps" row
  2. Next, as a team, discuss what your persona is doing, thinking, and feeling during each step you have outlined. Add your notes to the board as stickies.
  3. Once you have filled in the board, spend 5 minutes and vote on any pain points or opportunities that your team discovered. Try to think of where the Atomic Theme Builder tool might be introduced to reduce or eliminate the pain point you discovered.
  4. Bring the top opportunity to the next activity.

Phase 2:

Step 4: Define the Problem

Note: the output of this activity will be used to fill out your Playback Brief

Now it's time for your team to clearly define the problem using the framework provided.

  1. Individually, start filling out the board. Add your thoughts to each column: WHAT, WHY, WHO, WHEN, WHERE, WOW

    • Hint if you completed Phase 1, you should already have the WHO & WHAT identified
    • For the WOW column, think of what positive experience your user would have if you were to solve this problem.

  2. Next, discuss your ideas as a group. If needed, vote on the most important stickies in each column.

  3. Finally, summarize each column into one concise statement at the bottom in the blue sticky note

Step 5: Reframe the Problem into an Opportunity

Now that your team has clearly defined what problem you are trying to solve, its time to reframe this statement into an opportunity statement.

  1. Start by taking your summarized WHAT & WHY and place these at the top of the board
  2. Next, spend 5-10 minutes individually brainstorming opportunity statements, utilizing the provided "How might we..." structure
  3. Discuss your opporunity statements as a team
  4. Vote on the team's favorite to move forward with

Step 6: Visualize your proposed solution

Jumpstart ideation by visualizing how this solution might work.

  1. Begin by reviewing the top "How Might We" statement that your team voted on
  2. Next, use the template to visualize solutions that would solve for your opportunity statement. You can either brainstorm 8 variations of 1 idea, or use the template as a storyboard and visualize how your user would interact with the proposed solution.
  3. Be sure to include notes & visuals within this exercise!
  4. Your team should now have a clearer understanding of what you want to build for the Hackathon.
  5. Go out and build!

Playback Brief

PlayBack Brief

To help you streamline creating a presentation for your hackathon project, we have created a Powerpoint template for you to use.

Develop Playback Brief

  1. Upon completion of Phase 2, Step 4, teams should take their output from the exercise to fill our their Playback Brief.
  2. Download a copy of the Playback Brief above
  3. Following the template provided, fill in information created from your Design Thinking Mural board.
  4. This Playback Brief should be used to produce your 2 minute concept video

Developing User Stories

It is highly recommended that participating teams leverage the sample use case story template to quickly and succinctly develop a story telling artifact that will meet the expectations of the judges.

Use Case Story

The objective here is to develop a human readable use case that can be easily consumed by business and technical readers.

Develop Story

  1. Make a copy of the provided story template file by replacing USECASE_NAME with the name of the team's use case.

    $ cp ./designs/story-template.md ./designs/USECASE_NAME.md

  2. Edit the story using the provided outline as a guide. Follow the provided inline template instructions. Feel free to augment the outline as needed. Leverage the ./designs/images resources as directed.

Developing Sequence Diagrams

Developing Sequence Diagrams

Familiarity with UML sequence diagrams is suggested:

Develop UML

  1. Pick a UML design tool (LucidCarts, PlantUML, other). Refer to suggested tools.
  2. Create a sequence diagram image and store it in the ./designs/images/uml folder. Since diagram are often modified/altered, it is advised that you store the source files used to produce the diagram in the ./designs/src folder.
  3. Sometimes, a single diagram is too busy and would benefit from segmenting the steps into multiple diagrams. If multiple diagram are required, repeat Step 2 for each required diagram.