1 of 31

Plan Your Next Project in a Flash, Post-It Style

@alleyco

@alleyco

2 of 31

“A goal without a plan is just a wish.”

Larry Elder

@alleyco

3 of 31

About Me

  • Sr. UX/UI Designer @ Alley
  • Certified CSPO (Scrum Product Owner)
  • Worked on almost everything: branding, print, websites, desktop & mobile apps, VR, etc
  • LOVES design conferences
  • Prolific exclamation point user
  • Also has 2 dogs, which is the most important thing.

@alleyco

4 of 31

Our Team

  • Alley is a design and development agency based in NYC, with ~50 team members working remotely from all over the world.
  • We mostly communicate via Slack and video chat.
  • Our company practices agile (Scrum), like for real.
  • We have teams within the company. Each team has a Product Owner, Scrum Master, Front End Dev, Back End Dev, and Designer.

@alleyco

5 of 31

PAUSE!

I was on a roll, but this is important for today’s class :)

@alleyco

6 of 31

“How Might We” Note-Taking

During this workshop, if you have questions for me, you can write them down on a BIG YELLOW POST IT.

But, you should write it as a How Might We (or How Might I) question. Start with HMW or HMI, then phrase your question as a How Might We.

EXAMPLE

HMI utilize the post-it site map exercise for a print project?

@alleyco

7 of 31

UNPAUSE!

@alleyco

8 of 31

Successful Projects Need Great Kickoffs

Why do a kickoff?

  • Listen to project stakeholders
  • Define objectives
  • Start project planning
  • Get everyone excited!

Who do I need at at a kickoff?

  • Facilitator
  • Note Taker
  • All important stakeholders, from different departments if applicable.
  • Keep it to less than 15 people if possible.

@alleyco

9 of 31

Common Kickoff Challenges

  • No one wants to be in a meeting for such a long time.
  • Inability to get everyone in one room because of scheduling conflicts.
  • Lots of HOW and not a lot of WHY.
  • People get sidetracked.
  • It ends up lasting longer than expected.
  • People get irritated if they’re hungry, tired, or need coffee.

@alleyco

10 of 31

Prepping for Your Kickoff

  • Make it a 2 day affair if possible: ~2 hours on Day 1, ~3-4 hours on Day 2.
  • If the kickoff is during a lunch period, find a way to provide lunch.
  • Provide snacks.
  • Prepare an agenda with time boxes for each part of the meeting
  • Work 5-10 minute breaks into the workshop.
  • Bring all your supplies!
  • Optional: Prepare light music for WAT (working alone together) session.

@alleyco

11 of 31

Sprint: Solve Big Problems and Test New Ideas in Just 5 Days

A lot of these ideas are adapted from this book by the Google Ventures team. If you’re interested in learning more, I highly suggest picking up a copy.*

It’s basically a step by step break down of what it takes to solve big problems. The steps work for anything, whether it’s a project or planning a party.

*Not sponsored by Google Ventures.

@alleyco

12 of 31

Techniques for Websites, Products, Apps, Features, etc.

Since Alley primarily works on websites, I’ll be speaking about these activities in those terms. However, each and all of these ideas can be adapted to whatever type of project you’re working on.

If you have specific questions, please write them down on your HMW post its, and we’ll get to them at the end!

@alleyco

13 of 31

Tools of the Kickoff Trade

  • SUPER STICKY post-its in bright colors
  • SUPER STICKY wide post its
  • Papermate Flair Pens (enough for everyone attending the kickoff)
  • Regular Black Sharpies
  • Dot Stickers
  • Paperclips
  • Plain white paper for sketching
  • Whiteboard markers & eraser (hopefully there’s a whiteboard in the room, if not...well that’s unfortunate )

@alleyco

14 of 31

Why Post Its*?

  • They’re the perfect size.
  • They’re removable.
  • Different colors make it easy to categorize and organize thoughts.
  • You can stick them into fun shapes (or at least relevant shapes, like a site map!).
  • The physical act of writing, sticking, and moving is gratifying.
  • They’re not intimidating to clients who have never been part of this type of process before.

* I swear I’m not sponsored by Post Its. I’m just weirdly obsessed with them.

@alleyco

15 of 31

Day 1 Overview

  • Lightning Discussion
  • “How Might We” Activity
  • Optional: Sketching Activity (Working Alone Together session)

@alleyco

16 of 31

Lightning Discussion

EXAMPLE DESCRIPTION

We want to hear from team members representing different aspects/departments of the your work (research, communications, events). Please come prepared to briefly discuss your work and goals for the website. For each area, we’d like one representative to provide information along the following discussion points:

  • Tell us briefly about the nature of your work
  • Who are your priority audiences and what do they expect from you?
  • How does the website factor into your work and how might it in the future?
  • What would indicate a successful web redesign for you?

@alleyco

17 of 31

“How Might We” Questions Drafting

EXAMPLE DESCRIPTION

During the Day 1 discussions, we’ll ask each participant to listen and document compelling ideas for the website or comments (their own or their colleagues’) in the form of “How Might We…” questions—”HMW” for short. Each participant will write three HMW questions to share with the group. We will organize the questions into “affinity groups” (related by topic or objective) and then vote to determine the priorities for our work.

“How Might We” examples:

  • HMW represent all of our research areas on the homepage?
  • HMW make our reports more accessible?
  • HMW communicate our mission instantly on the website?

@alleyco

18 of 31

“How Might We” Prioritization

When it’s time for the HMW activity, start by having every participating member pick their top 3-5 HMW notes and stick them on a wall.

Next, dismiss the group for a short break while your team reads the HMWs. While doing so, think of categories for grouping similar HMWs, such as “branding” “media” “sales”, etc.

Write the categories in bold sharpie on new post its, and line these up. Organize the group’s HMWs under the relevant category.

@alleyco

19 of 31

“How Might We” Dot Voting

@alleyco

20 of 31

Turning “How Might We” into Project Objectives

The idea of the HMW exercise is to glean the most important project objectives. Once participants vote with their dot stickers, the facilitator will read out the ones with the most dots, and remove those from the crowd. On Day 2, they will be rewritten as Project Objectives, which you will then work with the client to prioritize.

REALLY BASIC EXAMPLE

HMW drive users to our shop page? = Drive users to our shop page.

@alleyco

21 of 31

Sketching: Working Alone Together

Timebox: 20 min.

  • Choose one page (usually homepage) for participants to sketch wireframes for, either Desktop OR Mobile. Only clients should sketch.
  • Hand out paper/pens.
  • Reassure that nobody will be judging anyone else on how straight their lines are.
  • Remind people not to look at anybody else’s work yet.
  • Put on your WAT music and let em go to town.
  • When everyone’s done, collect them and use masking tape to, again, stick em on the wall.

@alleyco

22 of 31

Sketching Dot Voting

Dot voting, again?!

OF COURSE, those dots are super adorable and they DO come in hot pink.

But for reals, this will be really helpful in jumpstarting your actual work.

@alleyco

23 of 31

Sketching Dot Voting

@alleyco

24 of 31

Day 1 Conclusion

CONGRATULATIONS!! You did it!

Well, almost. You’ve still got Day 2 coming up!

Use a paperclip to save a stack of the top-voted HMWs, another paperclip to save the rest (just in case), and another to keep the sketches together (with the top dots at the top.

If you’re paranoid that your dog will eat your homework, feel free to take photos of everything.

@alleyco

25 of 31

Day 2 Overview

Here’s the fun part! Invite 1-2 representatives (your primary contact) from the client to join you for the Day 2 workshop. It’s good to have 2-3 people from your team present. We usually have a designer, our Director of UX, and a project manager.

Activities

  • Site Map Development
  • Optional: Define Templates
  • Project Planning

@alleyco

26 of 31

Site Mapping

@alleyco

27 of 31

Templates

It’s preferred to do this with post its so you can just throw away ones that don’t work, but whiteboard works too.

We generally identify “templates” as a wireframe that could be used for multiple pages, for example, an article page. This helps developers out so they’re not coding each page individually.

@alleyco

28 of 31

Project Planning

@alleyco

29 of 31

Client Kickoff Conclusion

Okay, NOW you did it!!!!

Give yourself a pat on the back and your team a high five. You’re all set to start your project with a bunch of tools in your pocket.

You go, Glen Coco!

@alleyco

30 of 31

Your turn!

@alleyco

31 of 31

Thank You

Ivana Wong, Sr. UX/UI Designer

ivana@alleyinteractive.com

Instagram: @helloivana

alley.co

@alleyco

@alleyco