80
Devbridge Group presents DEVBRIDGE.COM Devbridge Group Design and User Experience Team Prototyping: Approaches and Outcomes. With IxDA Chicago - October, 2015

Prototyping Approaches and Outcomes

Embed Size (px)

Citation preview

Page 1: Prototyping Approaches and Outcomes

Devbridge Group presents

DEVBRIDGE.COM Devbridge Group Design and User Experience Team

Prototyping: Approaches and Outcomes. With IxDA Chicago - October, 2015

Page 2: Prototyping Approaches and Outcomes

We design and build software for companies that have unique challenges to solve. We do this with a

design focused, technology agnostic approach.

Page 3: Prototyping Approaches and Outcomes

We partner with mid-market and fortune clients to build sophisticated software that ships to market on time.

Clients

Page 4: Prototyping Approaches and Outcomes

BUSINESS CONSULTING

ERP & OFF-THE-SHELF

DIGITAL MARKETING

ADVERTISING AND MARKETING

Page 5: Prototyping Approaches and Outcomes

140+

20152008 2009 2010 2011 2012 2013 2014

Page 6: Prototyping Approaches and Outcomes

What does prototyping mean to us?

Page 7: Prototyping Approaches and Outcomes

Sketches and…

Page 8: Prototyping Approaches and Outcomes

Wireframes

Page 9: Prototyping Approaches and Outcomes

Clickable prototypes - interactive mock-ups

Page 10: Prototyping Approaches and Outcomes
Page 11: Prototyping Approaches and Outcomes

BEFORE WE START…

Page 12: Prototyping Approaches and Outcomes

FRAUD INVESTIGATIONprototyping for

Adomas Tautkus - Design Lead

Page 13: Prototyping Approaches and Outcomes
Page 14: Prototyping Approaches and Outcomes

Can we build a prototype that will help the Fraud Investigation Department to consolidate everything into one app?

Problem

Page 15: Prototyping Approaches and Outcomes

The Plan

1

Page 16: Prototyping Approaches and Outcomes

Prototype completed in 8 sprints

Requirements gathering workshop Sketch and design Interactive mockups Sample data integration System integration

Page 17: Prototyping Approaches and Outcomes

Teams

ClientDevbridgeSPONSOR

STRATEGY

TECHNICAL

LEAD DEVELOPER

LEAD DESIGNER

PRODUCT MANAGER

Sr. DEVELOPER

Sr. DEVELOPER

QA ANALYST

FRONT-END DEVELOPER

Page 18: Prototyping Approaches and Outcomes

Team distribution

DallasSTRATEGY

TECHNICAL

ChicagoLEAD DESIGNERPRODUCT MANAGER

New YorkSPONSOR

VilniusLEAD DEVELOPER

Sr. DEVELOPER

Sr. DEVELOPER

QA ANALYST

FRONT-END DEVELOPERC L I E N T

C L I E N T

D E V B R I D G E

D E V B R I D G E

Page 19: Prototyping Approaches and Outcomes

The Tools

2

Page 20: Prototyping Approaches and Outcomes

White Board Sketch Invision

Jira FeatureMap.co HTML/CSS/JS .Net

Page 21: Prototyping Approaches and Outcomes
Page 22: Prototyping Approaches and Outcomes
Page 23: Prototyping Approaches and Outcomes
Page 24: Prototyping Approaches and Outcomes

The Solution

3

Page 25: Prototyping Approaches and Outcomes

Project Duration

2 ½ M O N T H S

WORKSHOP

DAYS3

DESIGN

WEEKS1½

DEVELOPMENT

WEEKS6

Page 26: Prototyping Approaches and Outcomes
Page 27: Prototyping Approaches and Outcomes

INDUSTRIAL SUPPLIESprototyping for

Mark Ludemann - Design Lead Vlad Shapochnikov - Front End Developer

Page 28: Prototyping Approaches and Outcomes

ASSIGNMENT

Help users find a specific product within an extremely large e-commerce site

Page 29: Prototyping Approaches and Outcomes

17,736 RESULTS

Page 30: Prototyping Approaches and Outcomes

DELIVERABLES

A functioning, data driven prototype that is tied to the product catalog

Page 31: Prototyping Approaches and Outcomes

WHY A PROTOTYPE?

Page 32: Prototyping Approaches and Outcomes

HOW DID WE DO IT

Page 33: Prototyping Approaches and Outcomes

Focus on Information Architecture

1

Page 34: Prototyping Approaches and Outcomes

Lightweight Sketching

2

Page 35: Prototyping Approaches and Outcomes
Page 36: Prototyping Approaches and Outcomes

Real-time Design

3

Page 37: Prototyping Approaches and Outcomes
Page 38: Prototyping Approaches and Outcomes

Validation

4

Page 39: Prototyping Approaches and Outcomes

WATCH THEM FAIL.

Page 40: Prototyping Approaches and Outcomes

RINSE & REPEAT

Page 41: Prototyping Approaches and Outcomes
Page 42: Prototyping Approaches and Outcomes

INVESTMENT MANAGEMENTprototyping for

David Borra - Senior Designer

Page 43: Prototyping Approaches and Outcomes

THE CLIENT

Page 44: Prototyping Approaches and Outcomes

The Problem: Sorting through multiple sources of static data.

1

Page 45: Prototyping Approaches and Outcomes

The Solution: Create a Client Portal

2

Page 46: Prototyping Approaches and Outcomes
Page 47: Prototyping Approaches and Outcomes

NOW WHAT?

Page 48: Prototyping Approaches and Outcomes

Kickoff Meeting

1

Page 49: Prototyping Approaches and Outcomes
Page 50: Prototyping Approaches and Outcomes

UX Sketching

2

Page 51: Prototyping Approaches and Outcomes
Page 52: Prototyping Approaches and Outcomes

Wireframes

3

Page 53: Prototyping Approaches and Outcomes
Page 54: Prototyping Approaches and Outcomes
Page 55: Prototyping Approaches and Outcomes
Page 56: Prototyping Approaches and Outcomes

UI Design

4

Page 57: Prototyping Approaches and Outcomes

Prototype

5

Page 58: Prototyping Approaches and Outcomes

ONE MORE THING

Page 59: Prototyping Approaches and Outcomes
Page 60: Prototyping Approaches and Outcomes
Page 61: Prototyping Approaches and Outcomes
Page 62: Prototyping Approaches and Outcomes

THANKS

Page 63: Prototyping Approaches and Outcomes

FINANCIAL DATA & VIDEOprototyping for

Eric Strubringer - Designer

Page 64: Prototyping Approaches and Outcomes

THE CLIENT

Page 65: Prototyping Approaches and Outcomes

Problem: People are not finding the videos.

1

Page 66: Prototyping Approaches and Outcomes
Page 67: Prototyping Approaches and Outcomes

Let’s Build an App

2

Page 68: Prototyping Approaches and Outcomes
Page 69: Prototyping Approaches and Outcomes
Page 70: Prototyping Approaches and Outcomes
Page 71: Prototyping Approaches and Outcomes
Page 72: Prototyping Approaches and Outcomes
Page 73: Prototyping Approaches and Outcomes
Page 74: Prototyping Approaches and Outcomes
Page 75: Prototyping Approaches and Outcomes

“While this started out as an educational tool, the stakeholders are so impressed

with the usability and feel, they believe it will be used by many traders as a tool.”

–Mr. Taco Cat

Page 76: Prototyping Approaches and Outcomes

Let’s iterate on it.

3

Page 77: Prototyping Approaches and Outcomes
Page 78: Prototyping Approaches and Outcomes

Why does db prototype?

Win buy-inResearch iterativelyGet feedbackForm an ideaMany of our clients come to us to elicit change within the org either through philosophy (agile, ucd) or overcoming internal cultural barriers.

As we develop and iterate on an idea we can mix research activities in based on what we’ve learned along the way.

Giving the audience something to react to quickly often speeds up the process. The earlier we can do this the better. Whatever validation we can gain is valuable.

Many times initial business requirements are unclear or lack user focus. Prototyping allows us switch the focus and sharpen a vague idea

1. 2. 3. 4.

Page 79: Prototyping Approaches and Outcomes

What does prototyping mean for you?