Design Process Deep Dive (2017)

This is a design process deck from my time at Buuuk when I was running the studio. We used this deck to onboard new team members, and it served as a work-in-progress document that we updated periodically to facilitate conversations about the process we followed and the methodologies we used. It functioned as a cheat sheet or a summarised reference for any new team members or interns that we would bring on.

Transcript

2. Case Study: eCertis Project Timelines Design Process Case Study: Audi Tools Case Study: NEA Tools Kickoffs Case Study: BIG Design Management … 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Project Process Design Process Phases of a design process Design Management Project Client Team Collaborators Design Discovery Case Studies
4. INITIAL EMAIL CONTRACT KICKOFF CARD SORTING DESIGN DOCS Project Hub — Notion Timeline — Google Sheets Card Sorting — Offline, Notion & Freehand to present Presentatio(Wireframe s etc) — Invision Project & Freehend Wireframes (Invision) Mockups (Invision) IA & WORKFLOW MOCKUPS WIREFRAME CONCEPTS (WIREFRAME) EXPLORATION CLIENT MANAGEMENT NOTES Meetings Daily Calls Managing expectations Delivering UI vs Exploration Nav Sharon Sharon Nav Nav Nav, Sharon, Alim, Xinyi Nav, Sharon, Alim, Xinyi Sharon
6. LEAD SALES REQUIREMENTS ESTIMATES NEGOTIATION CONTRACT BRIEF PRE SALES The sales team may get in touch with the design team to check if a request is within our area of expertise/possible etc. Usually this is a good time to go to meet the client: To make a good impression Get to know the client Ask questions about the project — anythign that you think the sales team may not cover Get enough info to be able to make estimates Talk to them about our process Explain how we are different Remember, if you forget anything in this meeting you can always ask the Sales team to check again — it's ok. This is usually where the Sales team will most definitely need the design team to: Check feasibility Check team bandwidth Get effort estimates to make cost estimates Strongly recommend that this becomes a standard procedure. (We added some stuff for this into Notion as well in the Project Hub). This is where the Sales team has to give all the details to the various teams (design, development, pm, finance etc.). As the design team usually starts first, this is a very crucial step. Find out what the clients expectations are what has been promised when do things need to be delivered any important dates? people who we'll be working with any red flags any important agreements? anything in the contract that's different to the ordinary? decide who works on the project prepare for kickoff KICK OFF PREP MAKE SURE EVERY KICK OFF IS PREPPED — I would recommend a prep meeting atleast 3 days before actual kick off. Kickoff is usually led by the design team but someone else can initiate it (Sales or Sam if dev involved) A few things to cover today: Kickoff format what to prepare before the kickoff Invite people for the kickoff - who should be there at the kickoff Go through the contract Prep timelines/schedules — with design teams milestones 1. 2. 3. 4. 5. KICK OFF A kickoff outline: Introduce yourself Introduce everyone around the table Ask the client to introduce themselves "can we also get a round of introductions from your side?" Summarize the project Point out the design team members and their roles (who should they ask questions to? who will reply to emails? who will make sure milestones are met? Bring up the schedule Go through the process (explain the different stages of the schedule) Explain the milestones that you have set Ask for any questions Start with the design process … 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. New leads may come as emails from our website or calls to the office line or referalls to Mohan or the Sales Team. CAPEX — Capital Expense OPEX — Operating/Opera tional Expense
9. “Can you draw something?” “Yes, sure”
10. “Can you draw something for me?” “Yes, sure. What would you like me to draw?”
11. “Can you draw something for me? I want to hang a poster in my house.” “Yes, sure. What would you like me to draw and how big do you want it to be?”
12. “Can you draw something for me? I want to hang a poster in my house.” “Yes, sure. What would you like me to draw and how big do you want it to be?” Also, do you want it coloured or black & white? How about a photograph instead?
13. “Can you draw something for me? I want to hang a poster in my house.” “Yes, sure. What would you like me to draw and how big do you want it to be?” Also, do you want it coloured or black & white? How about a photograph instead? I'm not sure but it's quite a big wall. I like coloured better. That's not a bad idea!
15. “Yes, sure. What would you like me to draw and how big do you want it to be?” Do you have a particular mountain in mind? Ok I can do that. How big is the wall again? Do you think A2 would be big enough? (show them a sample) Also, do you want it coloured or black & white? Great, it'll take me 2 weeks and I can do it for $500. “Can you draw something for me? I want to hang a poster in my house.” A mountain maybe? I have a big wall. Not really, my kids like the outdoors. Can you pick? Hmmmm.... A2? I think so. Coloured! Sounds good! Thanks!
16. Oh? It's a coloured mountain on A2!? It's Mount Everest! Well, all you told me was to draw a mountain! Sorry, I've spent all this time — I have to charge! Hey, this isn't what I had in mind! Yes, but I thought it would be more of a scenery with a lake and stuff. Yes, but my kids don't climb Mount Everest! Can I get a refund? ★☆☆☆☆ "Terrible illustrator. I paid $500 and didn't even get a painting of what I wanted!"
18. SOME IDEAS: Show them rough sketches after a day or two Make a mood board, review with them to get some idea of the style they like Show a rough colour test Show them the illustration WIP to reduce chances of a surprise even more.
19. MORE IDEAS: Offer to visit their house to measure the wall Discover their wall colour — now you can suggest a colour scheme that will look better Also check their furniture & decor colour — that might give you more ideas on the colour scheme You might see other things around the house to give you hints of the style they like This also gives you a chance to talk to them and build a relationship You could do a rough full size sketch and take it over to test on the wall You might also be able to suggest a better size Could be smaller, they'll be happy Could be bigger, their decision
20. COLLECT INFORMATION CREATE DELIVER IDEATE Ask questions, find out what needs to be done. Execute. Draw/Design/Build whatever it is that needs to be delivered. Explore. Sketch. Brainstorm. Doodle. Make rough sketches based on references or the ideas that come to your mind. PROCESS Analyze the initial information that you've gathered. Mark out the assumptions. Highlight where things need to be confirmed. Highlight where information is limited. Go out and verify the assumptions, gather more information and talk to the right people.
21. COLLECT INFORMATION CREATE DELIVER Ask questions, find out what needs to be done. Execute. Draw/Design/Build whatever it is that needs to be delivered.
22. COLLECT INFORMATION CREATE DELIVER IDEATE Ask questions, find out what needs to be done. Execute. Draw/Design/Build whatever it is that needs to be delivered. Explore. Sketch. Brainstorm. Doodle. Make rough sketches based on references or the ideas that come to your mind. WIREFRAME REQ. GATHERING UI DESIGN ASSET DELIVERY GATHER EXPLORE FOCUS
23. COLLECT INFORMATION CREATE DELIVER IDEATE Ask questions, find out what needs to be done. Execute. Draw/Design/Build whatever it is that needs to be delivered. Explore. Sketch. Brainstorm. Doodle. Make rough sketches based on references or the ideas that come to your mind. PROCESSING INFO Analyze the initial information that you've gathered. Mark out the assumptions. Highlight where things need to be confirmed. Highlight where information is limited. Go out and verify the assumptions, gather more information and talk to the right people. PLAN Review your plan — including time, effort & see how you're going to execute. You may need to add more time than planned now that you have more info.
24. COLLECT INFORMATION CREATE DELIVER IDEATE Ask questions, find out what needs to be done. Execute. Draw/Design/Build whatever it is that needs to be delivered. ASSET DELIVERY
25. COLLECT INFORMATION CREATE DELIVER IDEATE Ask questions, find out what needs to be done. Execute. Draw/Design/Build whatever it is that needs to be delivered. Explore. Sketch. Brainstorm. Doodle. Make rough sketches based on references or the ideas that come to your mind. RESEARCH Analyze the initial information that you've gathered. Mark out the assumptions. Highlight where things need to be confirmed. Highlight where information is limited. Go out and verify the assumptions, gather more information and talk to the right people. PLAN Review your plan — including time, effort & see how you're going to execute. You may need to add more time than planned now that you have more info. GATHER EXPLORE FOCUS PREPARE
26. COLLECT INFORMATION CREATE DELIVER IDEATE Kickoff Requirements documents Scope documents Timelines Milestones Platforms Collaborators … Art direction UI design Micro interactions … Wireflows Flowcharts Wireframes Prototypes … RESEARCH User Interviews Stakeholder Interviews Usability Testing Customer Journey Maps Service Blueprints Wireflows Card Sorting Surveys Focus Groups … PLAN Revised timelines Prioritization of requirements Revised scope Revised budgets Revised deliverables Revised milestones Revised collaborators Revised platforms … GATHER FOCUS PREPARE EXPLORE Asset generation Asset delivery Asset handoff
27. COLLECT INFORMATION CREATE DELIVER IDEATE Kickoff Requirements documents Scope documents Timelines Milestones Platforms Collaborators Project Canvas … Wireflows Flowcharts Wireframes Prototypes … RESEARCH User Interviews Stakeholder Interviews Usability Testing Customer Journey Maps Service Blueprints Wireflows Card Sorting Surveys Focus Groups Project Canvas … PLAN Revised timelines Prioritization of requirements Revised scope Revised budgets Revised deliverables Revised milestones Revised collaborators Revised platforms … GATHER FOCUS PREPARE EXPLORE Asset generation Asset delivery Asset handoff
29. PROJECT CANVAS is a tool that can be helpful to: prepare all the info you need involve the client in rethinking their strategy & priorities show the client where the gaps are plan research & justify it before executing
39. INITIAL EMAIL REQ GATHERING ESTIMATES CUST. JOURNEY MAPS REVISED CUSTOMER JOURNEY MAPS WIREFRAMES CONCEPTS (WIREFLOW) Mohan, Adam Adam, Nav Adam, Nav, Sam REVISED REQ DARK NEW PO WE SUGGEST DESIGN DISCOVERY ESTIMATES KICKOFF Adam, Nav Adam, Nav Nav, Jong, Sharon Hengsin (PO), Odelia (PM), Shirley (Consultant) & Matthew (Junior ??) Nav, Jong, Sharon Jong, Sharon Jong, Sharon Jong, Sharon BRIEFING & KICKOFF PREP Nav, Jong, Sharon
40. COLLECT INFORMATION CREATE DELIVER IDEATE Kickoff Requirements documents Scope documents Timelines Milestones Platforms Collaborators Project Canvas … Wireflows Flowcharts Wireframes Prototypes … RESEARCH User Interviews Stakeholder Interviews Usability Testing Customer Journey Maps Service Blueprints Wireflows Card Sorting Surveys Focus Groups Project Canvas … PLAN Revised timelines Prioritization of requirements Revised scope Revised budgets Revised deliverables Revised milestones Revised collaborators Revised platforms … GATHER FOCUS PREPARE EXPLORE Asset generation Asset delivery Asset handoff
42. Customer Journey Maps/ Empathy Maps Service Blueprints 5 Whys Mood boards Sitemaps Wireframes Mockups Gut Feel Test Look Mock Analyze 5 Min Design Spar Design Reviews Project Canvas Flow Charts Affinity Mapping Kanban Boards Surveys Focus Groups Remote Usability Testing Guerrilla Usability Testing Man- on- street Usability Testing Scripted/Moderated Usability Testing A/B Testing Un- moderated Usability Testing White Boarding Post It’s Hero’s Journey Card Sorting Story Boards Mashup- prototype Top 5 Effort/Impact Analysis How- now- wow Matrix SWOT Analysis How would McDonalds do it? Opposite thinking Crazy 8's Atomic Design Golden Path User diaries Brainstorming Personas Role Playing CUST DISCUSSIONS TOOLS MISC RESEARCH TEAM EXERCISES
43. Questions to ask ourselves When/Why might we use this method? What outcome should we expect? How is this outcome useful? How can we show/present this outcome to the client? What can prevent this method from having a successful outcome? 1. 2. 3. 4. 5.
44. http://www.designkit.org/methods https://gamestorming.com/ http://designresearchtechniques.com/ https://www.mindtools.com/brainstm.html https://www.nngroup.com/articles/ux- workshop- exercises/ https://www.intercom.com/blog/running- design- workshops/ https://www.boardofinnovation.com/tools/opposite- thinking/ https://www.designorate.com/design- thinking- tools- reverse- brainstorming/ https://www.fastcompany.com/1672917/the- 8- steps- to- creating- a- great- storyboard Resources
45. ⬆ Discuss your users various journeys Highlight/Create the ideal path 1. 2.
46. List/Post- it your story Then sketch it 1. 2. ⬆
47. ⬆
48. ⬆
49. ⬆ Impact Effort Low Low High High High Impact & High Effort High Impact & Low Effort Low Impact & Low Effort Low Impact & High Effort
50. ⬆
52. BRIEF Strongly recommend that this becomes a standard procedure. (We added some stuff for this into Notion as well in the Project Hub). This is where the Sales team has to give all the details to the various teams (design, development, pm, finance etc.). As the design team usually starts first, this is a very crucial step. Find out what the clients expectations are what has been promised when do things need to be delivered any important dates? people who we'll be working with any red flags any important agreements? anything in the contract that's different to the ordinary? decide who works on the project prepare for kickoff KICK OFF PREP MAKE SURE EVERY KICK OFF IS PREPPED — I would recommend a prep meeting atleast 3 days before actual kick off. Kickoff is usually led by the design team but someone else can initiate it (Sales or Sam if dev involved) A few things to cover today: Kickoff format what to prepare before the kickoff Invite people for the kickoff - who should be there at the kickoff Go through the contract Prep timelines/schedules — with design teams milestones 1. 2. 3. 4. 5. KICK OFF A kickoff outline: Introduce yourself Introduce everyone around the table Ask the client to introduce themselves "can we also get a round of introductions from your side?" Summarize the project Point out the design team members and their roles (who should they ask questions to? who will reply to emails? who will make sure milestones are met? Bring up the schedule Go through the process (explain the different stages of the schedule) Explain the milestones that you have set Ask for any questions Start with the design process … 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. Kickoffs
53. Kickoff Prep Checklist Figure out who will attend from Buuuk … … and send invites to everyone attending well in advance Make sure the invite is clear and has all the info needed Make sure you get the address & contact for a person at the client before hand Ask who will attend from the client side (feel free to suggest who you think should attend) Mornings (in the first half of the week) are usually better Remember: Overiew > Goals > Details
54. Kickoffs (Gather & Prepare) Hello Intros Project Summary What the project is about What we're supposed to deliver Timeline review Key Milestones How we'll work (what to expect from the various stages, when updates happen, what happens with delays, what software we'll use etc) Key team members from Buuuk (team leads, point of contact, lead designers, PM, tech leads etc.) Anything we missed? Today … (Project Canvas) 1. 2. 3. 1. 2. 4. 1. 5. 6. 7. 8.
55. COLLECT INFORMATION CREATE DELIVER IDEATE Kickoff Requirements documents Scope documents Timelines Milestones Platforms Collaborators Project Canvas … Wireflows Flowcharts Wireframes Prototypes … RESEARCH User Interviews Stakeholder Interviews Usability Testing Customer Journey Maps Service Blueprints Wireflows Card Sorting Surveys Focus Groups Project Canvas … PLAN Revised timelines Prioritization of requirements Revised scope Revised budgets Revised deliverables Revised milestones Revised collaborators Revised platforms … GATHER FOCUS PREPARE EXPLORE Asset generation Asset delivery Asset handoff