UX/UI Workshop: Prototyping magic

  • Published on
    12-Apr-2017

  • View
    820

  • Download
    3

Embed Size (px)

Transcript

<ul><li><p>Prototyping magicUX/UI Workshop:</p><p>October 2015</p></li><li><p>Westtech Ventures x Goodpatch</p><p>UI/UX Workshop: Prototyping MagicAGENDA</p><p>2</p><p>BORIS </p><p>INTRO </p><p>UI PROTOTYPING </p><p>MINDSET </p><p>- Design Thinking- Divergent vs Convergent- MVP vs MLP</p><p>PROCESS </p><p>- Goodpatch Design Process</p><p>- Importance of milestones</p><p>TOOLS</p><p>JAN </p><p>DESIGNER - DEVELOPER COLLABORATION WORKFLOW - Concept stage- Wireframing- High-res Designs- Pixel-perfect</p><p>TRANSPARENT COMMUNICATION </p><p>TOOLS </p></li><li><p>Westtech Ventures x Goodpatch</p><p>Boris Milkowski,Managing Director, Goodpatch Berlin</p><p>INTRO</p><p>3</p><p>boris@goodpatch.com </p><p>At Goodpatch since July 2013 </p><p>- Masters in Media Design, Keio University, Japan </p><p>- CEMS Masters in International Mgmt, </p><p>University of St.Gallen, Switzerland </p><p>Previous companies: </p><p>Deutsche Bank, Puma, Filippa K, Porsche</p></li><li><p>GOODPATCH</p><p>Intro</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Team at 4 years anniversary on Sep 1, 2015INTRO</p><p>5</p></li><li><p>Westtech Ventures x Goodpatch 6</p></li><li><p>Westtech Ventures x Goodpatch</p><p>A UI Design Company at heartINTRO</p><p>7</p><p>Beyond platform or device, the user interface is what </p><p>you interact and ultimately fall in love with. </p><p>Intuitive and beautiful design is our specialty.</p><p>UI Design UX Design Strategic Design Development</p><p>Through iterative prototyping and relentless user tests, we identify all parts of the user </p><p>experience. </p><p>All for the wow! </p><p>By matching organizational capabilities with genuine needs, </p><p>we help you make the right product decisions. We love to be </p><p>involved from the start.</p><p>What sets us apart from other design firms is our ability to </p><p>make design reality. From web to iOS and Android, we have </p><p>amazing engineers on both the front-end and back-end.</p></li><li><p>Westtech Ventures x Goodpatch</p><p>2 StudiosINTRO</p><p>8</p><p>TOKYO BERLIN</p></li><li><p>MINDSET</p><p>Prototyping Magic #1</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Stanfords ME310(2011- 2013)</p><p>INTRO</p><p>10</p></li><li><p>Westtech Ventures x Goodpatch</p><p>What is design thinking?MINDSET</p><p>11</p></li><li><p>Westtech Ventures x Goodpatch</p><p>MINDSET</p><p>12</p><p>What is design thinking?</p><p>human-centered innovation</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Divergent vs convergent thinkingMINDSET</p><p>13</p></li><li><p>Westtech Ventures x Goodpatch 14</p></li><li><p>Westtech Ventures x Goodpatch 15</p></li><li><p>Westtech Ventures x Goodpatch 16</p></li><li><p>Westtech Ventures x Goodpatch 17</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Divergent vs convergent thinkingMINDSET</p><p>18</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Divergent vs convergent thinkingMINDSET</p><p>19</p></li><li><p>Westtech Ventures x Goodpatch 20</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Divergent vs convergent thinkingMINDSET</p><p>21</p></li><li><p>Westtech Ventures x Goodpatch</p><p>What is prototyping?MINDSET</p><p>22</p></li><li><p>Westtech Ventures x Goodpatch</p><p>PrototypingMINDSET</p><p>23</p><p>Important: The goal of a prototype is not the actual prototype.Its all about the learning.</p></li><li><p>Westtech Ventures x Goodpatch</p><p>PrototypingMINDSET</p><p>24</p><p>Learning: - Cans need grip Slippery when wet&gt; Matters to athletes as to seniors- Unique haptics can be fun for user- Identified opportunity space: Packaging - Further investigation in packaging and manufacturing</p></li><li><p>Westtech Ventures x Goodpatch</p><p>ChallengeMINDSET</p><p>25</p><p>But how can we make sure we learn?</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Key to learning: DocumentationMINDSET</p><p>26</p><p>Tool tip:</p><p>We also use</p></li><li><p>Westtech Ventures x Goodpatch</p><p>MVP vs MLPMINDSET</p><p>27</p><p>MVPMinimal Viable Product</p><p>A Minimum Viable Product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort. Eric Ries, Lean Startup </p><p>&gt; validated learning</p></li><li><p>Westtech Ventures x Goodpatch</p><p>MVP vs MLPMINDSET</p><p>28</p><p>MVPMinimal Viable Product</p><p>A Minimum Viable Product is that version of a new product which allows a team to collect the maximum amount of validated learning about customers with the least effort. Eric Ries, Lean Startup </p><p>MLPMinimal Lovable Product</p><p>It s better to build something that a small number of users love, than a large number of users l ike. </p><p>Sam Altman, Y Combinator </p><p>&gt; validated love&gt; validated learning</p></li><li><p>Westtech Ventures x Goodpatch</p><p>MVP vs MLPMINDSET</p><p>29</p></li><li><p>PROCESS</p><p>Prototyping Magic #2</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Goodpatch Design Process - OverviewHOW WE WORK</p><p>31</p><p>GO</p><p>OD</p><p>PATCH</p><p> DESIG</p><p>N PRO</p><p>CESS</p><p>OVERVIEW</p><p>Goodpatch applies its own design process which leads us through every project. </p><p>It all starts with identifying Problems Worth Solving, followed by a team building with the client in form of a design kickoff. </p><p>Through prototyping we develop the initial Minimal Lovable Product (MLP). </p><p>Good software is never done and this is also how we imagine our client relationship while continuing working with you towards product vision, </p><p>beyond the first launch. </p></li><li><p>Westtech Ventures x Goodpatch</p><p>Goodpatch Design Process - Before LaunchHOW WE WORK</p><p>32</p><p>BEFORE LA</p><p>UN</p><p>CH</p><p>GO</p><p>OD</p><p>PATCH</p><p> DESIG</p><p>N PRO</p><p>CESS</p></li><li><p>Westtech Ventures x Goodpatch</p><p>HOW WE WORK</p><p>33</p><p>POST LA</p><p>UN</p><p>CH</p><p>Goodpatch Design Process - Post Launch (Here the real work starts)</p><p>GO</p><p>OD</p><p>PATCH</p><p> DESIG</p><p>N PRO</p><p>CESS</p></li><li><p>Westtech Ventures x Goodpatch</p><p>ChallengePROCESS</p><p>34</p><p>Projects always take much longer. How can we deliver on time?</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Challenge: How to deliver on time?PROCESS</p><p>35</p><p>- Choose public release dates with important external events(Promised App Store Feature, Speaker engagement, Scheduled Press article)</p><p>- Internal Deadlines to freeze features (Cold Features)</p><p>- Schedule enough QA time for internal bug fixes (Never not needed) - Schedule dedicated bug fixing time after release (Never not needed)</p></li><li><p>TOOLS</p><p>Prototyping Magic #3</p></li><li><p>Westtech Ventures x Goodpatch 37</p></li><li><p>Westtech Ventures x Goodpatch 38</p><p>With Prott we have developed a prototyping tool to help designers better communicate their design with their team from first idea to pixel perfect in a fast and easy way. </p></li><li><p>Westtech Ventures x Goodpatch 39Prototyping as communication</p></li><li><p>Westtech Ventures x Goodpatch</p><p># UsersPrott</p><p>40</p><p>1st Anniversary </p></li><li><p>Westtech Ventures x Goodpatch</p><p>1 yearTools</p><p>41</p><p>1st Anniversary </p></li><li><p>42</p><p>IDEOFrog</p><p>ustwopivotallabs</p><p>Pinterest</p><p>Futurice</p><p>Reaktor</p></li><li><p>Westtech Ventures x Goodpatch</p><p>Key take-aways:</p><p>43</p><p>- Divergent phases are followed by convergent phases </p><p>- Prototypes are all about learning, learning comes from documentation </p><p>- Prototypes help you better communicate your ideas </p><p>- MLP is when you build something a small amount of users love </p><p>- External events help you achieve deadlines </p></li><li><p>Goodpatch Design Process</p><p>PRESENTED BY</p><p>boris@goodpatch.com </p></li></ul>