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.

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

2. BACKGROUND
Higher Education, Manufacturing,
Politics, Retail, Business to Business,
Geographic Information Systems
and Social Media

3. “Youcanreachtimelessnessifyoulookfortheessence
ofthingsandnottheappearance.Theappearanceis
transitory—theappearanceisfashion,theappearance
istrendiness—buttheessenceistimeless.”
-MassimoVignelli(DesignisOne,Helvetica)

4. BUSINESS GOALS +
USER GOALS = ESSENCE

5. Whenyouknowwhattheessenceof
athingis,youcancreatewaysto
communicateittotheworld.
A STARTING PLACE

6. ROADMAP
HOUSE ≈ WEBSITE WHAT IS A UX KIT? TOOLS OF THE TRADE FOR GOOD REASON DOCS

7. ≈
PHOTO CREDIT ::: JACOB HEFLIN

8. ≈
PHOTO CREDIT ::: CRATEANDBARREL.COM

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?

20. TOOLS OF THE
TRADE

24. STYLEGUIDES

25. UX Kit
Content Style
Grid System
Voice & Tone
{EX: MAILCHIMP}
STYLEGUIDES
LEARN MORE

26. Includes:
Content Configuration
HTML Compiler
.Sass Compiler
Folder Structure
Javascript
{HUGE}
STYLEGUIDES
LEARN MORE

27. UX Kit
Command Line Interface
Rails Integration
Middleman Integration
Grunt
Gulp
Broccoli
Ember CLI
Writing Examples
Customizable
{LIVING STYLEGUIDE}
STYLEGUIDES
LEARN MORE

28. Includes:
Sass Compiler
Responsive Grid
HTTP Server
Live Browser Reloading
Cross-Device Synchronization
Google Optimized
{GOOGLE WEB
STARTER KIT}
STYLEGUIDES
LEARN MORE

29. Includes:
Design System (Atomic,
Component, etc.)
Style Guide Compiler
Easy Documentation
Handlebars + BrowserSync
Gulp
{FABRICATOR}
STYLEGUIDES
LEARN MORE

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

31. FOR GOOD REASON
Letstalkabout5verypractical
applicationsoftheUXKitthatwillhelp
youdeliverhigherqualitysolutionsand
makeyourbossandyourclientsloveyou.

32. {1 ::: ENFORCE}
UXKitsletyoutrulyenforceastrategic
planandholdyourclientaccountabletoit.
Everhadaclientchangetheirmindona
dailybasisabouttheirwebsite?Savethem
fromthemselves.TheyneedaUXKit.
FOR GOOD REASON

33. {2 ::: STANDARDIZE}
Turnoverisarealityforeveryone.
WithaUXKitIcanhaveadirector,
developer,strategist,ordesigner
simplyreviewitandbeabletostart
supportingtheclientquickly.
FOR GOOD REASON

34. {3 ::: ADAPT}
Sometimesthemarketdictatesanessence
shift.Everhadaclientchangetheir
businessmodelandwantsomething
completelydifferent?IfyouhaveaUXKit
inplacealreadyyoucancalmtheirstormy
watersbydoingaquickkitrefresher.
FOR GOOD REASON

35. {4 ::: EXPAND}
Withsuccesscomesgrowth.UXKits
helpyoumoreeasilyintroducenew
strategies,customerresearch,
usability,technology,accessibility
andfeaturesintotheproduct.
FOR GOOD REASON

36. {5 ::: REPURPOSE}
KeepaMasterUXKitofeverythingyou’vebuilt
fromscratch.Thisletsyourepurposelabor-
intensivefeaturesforotheruse-casesandkeep
yourdevcrewabreastofallcapabilities.Don’t
reinventthewheel,seriously.That’snottosay
youcan’taddsomechromerimsthough…
FOR GOOD REASON

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