WORKSHOP: Object Oriented UX for Responsive Design

RESPONSIVE
REDESIGN
IN A DAY

Sophia Voychehovski
sophia@rewiredUX.com
@SophiaVUX

Experience/Knowledge
in Responsive Design
in Sticky Note Artistry
in Content Strategy
Groups!

AKA:
Object Oriented UX
In a post-responsive-revolution world

Simplify your design (modular design)
Simplify your team (be lean)
Prioritize Prioritization (“mobile-only” your MVP)
Iterate on fidelity, not functionality (Agile done right)
Make time for simple (UX waterfall / “double sprint zero”)

1990’s: static objects
Information Architecture
2000s: actions
Interaction Design
Today: dynamic objects
System Design / OOUX

Why Dynamic Objects First?
Know your objects to know your actions
Hierarchy and priority is now…a priority
We’ve Hamburgered our Nav
We have to be efficient

GAME TIME!
“Which site is
responsive?”

An OOUX
(or System Design)
Vocabulary

Often timely, often updated
multiple instantiations
is the purpose
Evergreen
single instantiation
talks about the purpose

Object Elements
Core content
UI UI
metadata metadata
Core content
CTA
CTA
nested obj nested obj nested obj

Meta
Data Nested
Objects
author
location
genre

Author User Celebrity
>
>
<
Person Template

About us History Mission
>
>
Static Template
<

Information Architecture
manifests in the persistent navigation - the fire escape, the constant.
What static object rely on.
Interaction Design
manifests in the UI elements and action flows
System Design
manifests in the design of the dynamic objects and their flow

System Design
>
Interaction Design Information Architecture
>
>

1. Dynamic Object Inventory 2. Dynamic Object Manifestation
Article
title
Text
Image
date
Author name bio
Related
articles
shoe size
related
articles
Product
Name
Comment
s
User date
comment
text
name
name
Descriptio
n
Rating
price
Reviews
related
products
Manufact
urer
User rating
Name logo
SHARE BUY
>
3. Dynamic Object Sketching >
4. OOUX Prototyping
(Demo)
>

How to recognize a dynamic object
• It has multiple instances, each with unique content
• A user can create one
• It could be a search results facet
• You can imagine the organization adding or removing one
• It has metadata (date posted, length, number of likes)
• It’s not specific (Watch out for instances of objects!)
If you answered yes to ANY of these,
you probably have a dynamic object

GAME TIME!
“Am I a dynamic
Object?”

Article
title
Text
Image
date
Author name bio
Related
articles
shoe size related
articles
Product
Name
Comments User date comment
text
name
name
Descriptio
n
Rating
price
Reviews
related
products
Manufactu
rer
available
or not
User rating comment
Name logo descriptio
n
SHARE BUY
Products
Similar
Manufactu
rers
Event
Title
Date/time
descriptio
n
Related
Product
Users
going
REGISTER
Dynamic Object
dynamic objects Inventory
core content
and metadata
CTAs
profile pic
number of
likes
date
history
size
quantity in
stock
Blog name branding
image
descriptio
n tags? all articles,
archives

Dynamic Content DIynnavmiec Onbjetcot ry
Spreadsheet

Column
1:
List your
dynamic
objects
Column
2:
Does it
have a
module?
(yes/no)
Column
3:
Does it
have a
detail
page?
(yes/no)
Column
4:
Does it
have a list
page?
(yes/no)
Column
6:
How
critical is
the
object?
(1,2,3)
Column
5:
First pass
of
grouping
similar
objects
into
templates

= Hierarchy
Sketches of D.O.
modules, detail
pages and lists

Pick 3 Dynamic Objects
Phase 1
MVP
Has
Detail
Page
Various
template
groups

Object-Oriented design
in Axure
(Demo)

WORKSHOP: Object Oriented UX for Responsive Design

More Related Content

What's hot

Viewers also liked

Similar to WORKSHOP: Object Oriented UX for Responsive Design

Recently uploaded

WORKSHOP: Object Oriented UX for Responsive Design