When you know what the essence of a thing is, you can create ways to communicate it to the world. Enter UX Kits. Comprised of Discovery Documents, Style Guides, Voice & Tone and anything else necessary a UX Kit should include all the building blocks of your project.
Air breathing and respiratory adaptations in diver animals
UX Kits: What They Are and Why You Need Them
1. USER EXPERIENCE KITS
W H Y Y O U N E E D T H E M A N D H O W T O B U I L D T H E M
JACOB HEFLIN
USER EXPERIENCE DESIGNER
MITTERA ::: A MULTIMEDIA COMMUNICATIONS COMPANY BY MITTERA GROUP
FEBRUARY 20, 2016
9. Career PostsTeam Members Project Posts Note PostsService Types
Katie
The Marketer
Dexter
The Student
John
The Boss
Charles
The Consultant
Marisa
The Vice President
Home Page
Meet MITTERA Services Projects Notebook Careers Contact
Contact Action
Contact1
Social
Sharing
Tools
≈
10. MODERNITY
Decor in a house goes in and
out of style relatively
quickly. This is much more
so in the case of a digital
product where the ebb and
flow of innovation requires
regular attention and action.
HOUSE ≈ WEBSITE
11. TAKE IT EASY
Making renovation easier on
yourself and your organization
as a whole is the root and
purpose of the UX Kit.
HOUSE ≈ WEBSITE
12. WHAT IS A UX KIT?
S T R AT E G Y
Business Goals
User Personas + Goals
Feature Roadmap
Information Architecture
User Flows
D E S I G N
Wireframes
UI Kit
Invision
Voice & Tone Guidelines
Branding Guidelines
Styleguide
F R O N T - E N D
D E V E L O P M E N T
Styleguide
HTML
CSS
Javascript
jQuery
13. WHAT IS A UX KIT?
B U S I N E S S G O A L S
Stakeholder Interviews
Review Available Analytics
Recap & Stakeholder Buy-in
U S E R P E R S O N A S
+ G O A L S
User Workshop
Create Personas
Verify Personas
F E AT U R E R O A D M A P
1. Must Be
2. More is Better
3. Surprise & Delight
{ STRATEGY ::: PHASE 1 }
14. I N F O R M AT I O N
A R C H I T E C T U R E
Hierarchy & Structure
Content Strategy
Jumpchart
U S E R F L O W S
Omnigraffle
{ STRATEGY ::: PHASE 2 }
WHAT IS A UX KIT?
15. W I R E F R A M E S
Basic Symbols & Structures
Plan Complex Interactions
Required Content Templates
User Testing
U I K I T
Symbol Library
Text Styles
HD Interactions
Content Templates
{ DESIGN ::: PHASE 1 }
WHAT IS A UX KIT?
I N V I S I O N
Sync with Sketch
Simulated User Experience
Share with Customer
Customer Feedback
Revise Sketch Kit
16. { DESIGN ::: PHASE 2 }
V O I C E & T O N E
G U I D E L I N E S
Content Types
User Messages + Feelings
Client Messages + Tips
Color Moods
B R A N D I N G
G U I D E L I N E S
Logo Usage
Typography
Color Schema
Image Handling
WHAT IS A UX KIT?
17. { FRONT-END DEVELOPMENT }
WHAT IS A UX KIT?
S T Y L E G U I D E
UI Compiler
Add Sketch Kit
Add Branding
D E V E L O P M E N T
HTML
CSS
Javascript
jQuery
18. A UX KIT IS NOT…
…Integratedwithyourchosen
contentmanagementmethods-yet.
Thismakesforacleanhandoffand
letsthedeveloperskeeparazorfocus
intheirefforts.
WHAT IS A UX KIT?
19. THINK COSTCO
Everything about the planning and
execution of a project should be available
through the UX Kit - not simply style guides
and code. Keep a master document that
includes user personas, user flows, feature
roadmaps, etc. and combine it with the style
guide so it can be cross-referenced.
WHAT IS A UX KIT?
30. FIND YOUR GROOVE
There are an overwhelming amount
of tools to help you create a UX Kit
and everything it contains. Pick
something, become great with it and
be open to new technologies.
TOOLS OF THE TRADE
37. THAT’S ALL FOLKS.
Thank you for your time!
jacobheflin.com/uxkits
Jacob Heflin
User Experience Designer
Twitter @jheflindesign
Twitter @mittera
jacob.heflin@mittera.com
linkedin.com/in/jacobheflin