PRESENTED BY

UX Detroit | February 19, 2015

PRACTICAL CONCEPTUAL MODELING

Hoff | Hinton | Elmendorf

2

Abstract Models

Physical Models

Mathematical Models

Scientific Models

Conceptual Models

MANY KINDS OF MODELS

Our Focus Here

3

• Manipulate ideas as objects

• Explore their relationships

• Work with complex systems

Conceptual Models

4

MODELS INTERFACES

microsoft.com

(relationships/ideas) (pixels/atoms)

Models can do things interfaces can’t…

5

MODELS INTERFACES

microsoft.com

Why are we doing this? What is it? How do all the parts relate?

How will someone use each part? What will it look like?

6

Conceptual is not the opposite of practical.

7

Models become molds for making.

http://tombanwell.blogspot.com/2010/09/olifant-neoprene-trunk-hose.html

8

• Gain shared understanding • Align direction • Prioritize focus • Identify assumptions • Grasp essentials about big/complex challenges

When collaborating, models help us…

… before getting tangled in the weeds.

9

Models establish understanding …

project

Before DuringAfter

10

Examples …

11

An “Info Model” for a large medical ecosystem

12

Defining the nature of a site among stakeholders

13

Describing complex workflow before making the system

14

How people shop / decide + supporting site functions

15

Created to clarify structure of checkout for developers

Cart with Purchasable

ItemsMessaging

asking users if they would like to keep their

cart

Cart empty

Cart deleted

No?

Yes?

Cart with Purchasable

Items&

Non-Purchasable Items

Cart Non-Purchasable

Items

CheckoutConfirmation of Purchase Page

Purchasable Items

purchased

16

An example going from blobs to boxes…

17

Circles can help avoid implying structure prematurely …

no sides, no lines sides imply lines

18

Architects’ “Bubble” Diagrams

19

Architects’ “Bubble” Diagrams

wikimedia commons

20

Looking for emergent patterns in all the elements …

21

Finding functional priorities & centers of gravity …

… before locking down structure.

!

22

From functional model to conceptual architecture …

ARTMAX HOME

[Visual Showcase]Topical / curated spotlight of brand-representative products.

PRODUCTS COMMUNITYLEARNING ACCOUNT ABOUT

[Brand Statement / Description(Links to "About")]

Latest NewsAggregated from learning, social media, community, etc. - Editorially curated (can have sticky posts)- Item from a given org links to that org's new or home. - Link to the main News area in "About"

Social Media Links

Promotion Spot

History / Mission content.

Store Managers’ Blog

Sharing (curated)- Art - Tips / Ideas (more tbd)

Events Calendar (cross-ref w/ store finder)

Intro / Overview About the community, policies, etc.

Cross-channel connections / directions / kiosk locations shortcut to ‘find store’ facet.

Company News

Store Managers’ Blog - Most Recent

Utility Nav- Search- Contact - Find Store

Footer- Required boilerplate - Business & B2B Links

Tutorials

- cross-ref w/ Products when specific to a particular catalog item

For Each Product …

(Specifics TBD)

- Attributes should include editorial ranking + user ranking

Browse by tree hierarchy + facets. (Account Specifics TBD)

2.0

3.0

3.1

4.0 6.0 7.05.0

Learning Blog / Stories

Related products

Global NavPRIMARY emphasisSECONDARY emphasis

Persistent Nav Elements

1.0

!

23

• Modeling is a kind of making: it’s the craft of understanding.

• It can work at many levels of fidelity, from abstract to specific.

• You can do it whenever, to figure out big / complex concepts.

Practical Modeling

24

understandinggroup.com | @undrstndng

25

26

Caption