giraffe how we work
Giraffe Design Bureau How we work?
What’s special?
We do a lot more than drawing pictures
Our place in project lifecycle Project lifecycle Research
Design
Development
Marketing
Sales
Improvement
Sales
Improvement
This is where we work
Research
Design
Development
Marketing
Project lifecycle
Our place in project lifecycle What we actually do? Domain Research UX and Visual Design UX and Technical Management UX Quality Assurance Positioning and Marketing Iterative Improvement
This is where we work
Research
Design
Development
Marketing
Project lifecycle
Sales
Improvement
But how exactly? Behavior-driven UX Design Investigation Analysis Setting SMART goals Goals to Features (as in BDD Features) Features to Project Map Project Map to Screens Screens to Interactions (BDD Scenarios) Interactive prototypes in PDF and HTML Support and consulting for developers Testing it all against Features
And now, a little bit more into details...
Investigation We collect all data available
From stakeholders: vision, goals, expectations (this usually helps stakeholders to understand their product even more)
From market: competitors, used solutions, good or bad sides From users: major problems, suggestions, good or bad sides
Investigation
We don’t blindly follow suggestions, but analyze and propose solutions
Analysis Competitors and Features #$%$ * %
.
.
// .
.
.
.
1
.
1
.
0 0
.
//
.
//
1
0/
70
.
.
2
.
3
.
.
+ 4
.
5
2 6% %
.
!
"
0
. .
% + ,-
.
)%*
.
& '(
# $%
.
% $
"
!
Good or bad sides, missed features, possibility of expansion
Analysis Market Positioning
Where could we be better than competitors?
Setting SMART goals
Sources Research data Owner interview Users interview Developers interview
SMART goals list
Goals should be easy to validate against at a later stage
Setting SMART goals Management
UX Design
Specific Measurable Actionable Realistic Time-based
Specific Measurable Actionable Relevant Trackable
See more details here: http://bit.ly/oSfObd
Goals to Features (as in BDD) Feature
Feature Group
Feature
Feature
Feature Group
Feature
Feature
Feature
SMART goals list
Feature Group
Feature Group
Goals are expanded to features and grouped in card-sorting sessions
Features to Project Map Feature Group
Main page
Feature Group
Search results
Feature Group
Admin page
Content page
404 page
etc etc etc
Edit page
Feature groups are almost webpages, so we build sitemap
Features to Screens This is where some pictures appear (at last)
Main page
Search results
Content page
404 page
Screens to Interactions Each screen is based on BDD feature group Feature Group
Feature Group
Feature Group
Screens to Interactions Each interaction is supported with BDD scenario definition
Scenario Search for an item Given search field is visible When reader enters search term Then target page should contain search results And search results should match search term
Screens to Interactions Each interaction is supported with BDD scenario definition
Each interaction on screen is taken from BDD feature group Each interaction is supported with BDD scenario definition Each interaction sequence wireframe is properly annotated We also do interactive prototypes for complex cases Scenario Search for an item Given Search field is visible When Reader enters search term Then target page should contain search results And search results should match search term
Testing it all against Features So that we are sure nothing is missed or forgotten
SMART goals list
Feature Group
Feature Group
Main page
Content page
Search results
404 page
Feature Group
Feature Group
Research results
Wireframes
Design
Testing a live system So that we are sure everything actually works :)
Sources Heatmaps and analytics A/B testing Lab testing KPI
To put it simple
We collect and provide feedback all the time. Design process does not end when our documents are delivered. It persists until product is ready for production.
Our customers are happy
They understand what’s going on, at all project stages
So this is how we work Contact us at http://nomorezebra.com
Thanks! Giraffe Design Bureau, 2011
What’s special?
We do a lot more than drawing pictures
Our place in project lifecycle Project lifecycle Research
Design
Development
Marketing
Sales
Improvement
Sales
Improvement
This is where we work
Research
Design
Development
Marketing
Project lifecycle
Our place in project lifecycle What we actually do? Domain Research UX and Visual Design UX and Technical Management UX Quality Assurance Positioning and Marketing Iterative Improvement
This is where we work
Research
Design
Development
Marketing
Project lifecycle
Sales
Improvement
But how exactly? Behavior-driven UX Design Investigation Analysis Setting SMART goals Goals to Features (as in BDD Features) Features to Project Map Project Map to Screens Screens to Interactions (BDD Scenarios) Interactive prototypes in PDF and HTML Support and consulting for developers Testing it all against Features
And now, a little bit more into details...
Investigation We collect all data available
From stakeholders: vision, goals, expectations (this usually helps stakeholders to understand their product even more)
From market: competitors, used solutions, good or bad sides From users: major problems, suggestions, good or bad sides
Investigation
We don’t blindly follow suggestions, but analyze and propose solutions
Analysis Competitors and Features #$%$ * %
.
.
// .
.
.
.
1
.
1
.
0 0
.
//
.
//
1
0/
70
.
.
2
.
3
.
.
+ 4
.
5
2 6% %
.
!
"
0
. .
% + ,-
.
)%*
.
& '(
# $%
.
% $
"
!
Good or bad sides, missed features, possibility of expansion
Analysis Market Positioning
Where could we be better than competitors?
Setting SMART goals
Sources Research data Owner interview Users interview Developers interview
SMART goals list
Goals should be easy to validate against at a later stage
Setting SMART goals Management
UX Design
Specific Measurable Actionable Realistic Time-based
Specific Measurable Actionable Relevant Trackable
See more details here: http://bit.ly/oSfObd
Goals to Features (as in BDD) Feature
Feature Group
Feature
Feature
Feature Group
Feature
Feature
Feature
SMART goals list
Feature Group
Feature Group
Goals are expanded to features and grouped in card-sorting sessions
Features to Project Map Feature Group
Main page
Feature Group
Search results
Feature Group
Admin page
Content page
404 page
etc etc etc
Edit page
Feature groups are almost webpages, so we build sitemap
Features to Screens This is where some pictures appear (at last)
Main page
Search results
Content page
404 page
Screens to Interactions Each screen is based on BDD feature group Feature Group
Feature Group
Feature Group
Screens to Interactions Each interaction is supported with BDD scenario definition
Scenario Search for an item Given search field is visible When reader enters search term Then target page should contain search results And search results should match search term
Screens to Interactions Each interaction is supported with BDD scenario definition
Each interaction on screen is taken from BDD feature group Each interaction is supported with BDD scenario definition Each interaction sequence wireframe is properly annotated We also do interactive prototypes for complex cases Scenario Search for an item Given Search field is visible When Reader enters search term Then target page should contain search results And search results should match search term
Testing it all against Features So that we are sure nothing is missed or forgotten
SMART goals list
Feature Group
Feature Group
Main page
Content page
Search results
404 page
Feature Group
Feature Group
Research results
Wireframes
Design
Testing a live system So that we are sure everything actually works :)
Sources Heatmaps and analytics A/B testing Lab testing KPI
To put it simple
We collect and provide feedback all the time. Design process does not end when our documents are delivered. It persists until product is ready for production.
Our customers are happy
They understand what’s going on, at all project stages
So this is how we work Contact us at http://nomorezebra.com
Thanks! Giraffe Design Bureau, 2011
