Using UX & Design to Influence Development Decisions

1. More Than Pretty
USING UX & DESIGN TO INFLUENCE DEVELOPMENT DECISIONS
EILEEN VIOLINI

2. Designers and developers working together
are like peanut butter & chocolate.
WORDS OF WISDOM
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Matt Mullenweg, SOTW 2017

3. MY STORY
I'm a designer learning to code, starting a
studio, and learning to work with one very
demanding developer.
How do we learn to speak the same
language?
What tools can I use to teach that design
isn't just color, type & look?
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Photo by headway on Unsplash

4. The Road of Experimentation
OR WHAT DO I DO NOW
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

5. WHAT'S IN A NAME?
A Wireframe
Visual representation or layout of a page on a site
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

6. WHAT'S IN A NAME?
A Sitemap
A hierarchical structure of all the pages of a site.
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

8. WHAT'S IN A NAME?
A User Journey
Tracks all of the touchpoints a user has with your brand.
It can span visiting a physical space to a digital space & beyond.
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

9. WHAT'S IN A NAME?
A Task Flow or User Flow
Tracks how a user steps through a site or app.
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

11. WHAT'S IN A NAME?
Wireflow
Wireflows are a design-specification format that combines wireframe-style page layout
designs with a simplified flowchart-like way of representing interactions.
> NN Group
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

13. Everyday Use
OR HOW DO I IMPLEMENT THAT?
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI

14. Clients don't know what they need or want.
It's our job to help them discover
those needs & communicate those needs
to our team.
ELEMEN TA L TRUTH
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Photo by Quino Al on Unsplash

15. WHAT A DESIGNER NEEDS
What is the function of the site or app?
Should it be a single page app or step
through multiple pages?
Does it only deliver information or does it
also collect information?
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Photo by Sebastian Mantel on Unsplash

16. WHAT A DEV NEEDS
Does the action store info in the database?
Does the action pull info from the
database?
Does that information need to be
displayed later on the same page or on
another page?
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Photo by William Iven on Unsplash

17. WHAT'S IN A WIREFLOW?
Entries and Exits
Steps > user action, system action,
alternative path
Connections: Indicate the desired path and
different possible flows
Decision Points: a point where a user must
choose from 2 or more options
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Photo by William Iven on Unsplash

18. User visits the site
The user clicks on the form
On click a modal window appears
"Are you 18?"
User answers "Yes"
Modal disappears and form is displayed
The age is stored and populates a hiden field.
The user completes the form
Data is stored in the database

20. FOLLOW THE YELLOW BRICK ROAD
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
Better team experience
Better client experience
Ulimately, better user experience
What happens when we plan during the design phase using wireflows?

21. Thank You
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
EILEEN VIOLINI
SIDETRACK STUDIO
SIDETRACK.STUDIO