SlideShare a Scribd company logo
1 of 21
Download to read offline
More Than Pretty
USING UX & DESIGN TO INFLUENCE DEVELOPMENT DECISIONS
EILEEN VIOLINI
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
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
The Road of Experimentation
OR WHAT DO I DO NOW
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
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
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
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
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
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
Everyday Use
OR HOW DO I IMPLEMENT THAT?
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
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
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
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
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
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
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?
Thank You
MORE THAN PRETTY: UX, DESIGN & DEVELOPMENT EILEEN VIOLINI @_ IVIOLINI
EILEEN VIOLINI
SIDETRACK STUDIO
SIDETRACK.STUDIO

More Related Content

Similar to More Than Pretty

Aviva Rosenstein Web App Masters Tour Preview
Aviva Rosenstein Web App Masters Tour PreviewAviva Rosenstein Web App Masters Tour Preview
Aviva Rosenstein Web App Masters Tour PreviewUIEpreviews
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightfulWhitney Quesenbery
 
An Eye Towards User Engagement, EyeTrackUX West
An Eye Towards User Engagement, EyeTrackUX WestAn Eye Towards User Engagement, EyeTrackUX West
An Eye Towards User Engagement, EyeTrackUX WestAndrew Schall
 
Role of UI and UX in improving customer experience
Role of UI and UX in improving customer experienceRole of UI and UX in improving customer experience
Role of UI and UX in improving customer experienceZoho SalesIQ
 
STEVE JOB’S SCHOOL OF MAKING A GREAT APP
STEVE JOB’S SCHOOL OF MAKING A GREAT APPSTEVE JOB’S SCHOOL OF MAKING A GREAT APP
STEVE JOB’S SCHOOL OF MAKING A GREAT APPAppostrophic
 
UX AT Work: Experience Design Principles for an Agency World
UX AT Work: Experience Design Principles for an Agency WorldUX AT Work: Experience Design Principles for an Agency World
UX AT Work: Experience Design Principles for an Agency WorldVCU Brandcenter
 
Diverge, converge, and shape - Red Hat Summit 2019
Diverge, converge, and shape - Red Hat Summit 2019Diverge, converge, and shape - Red Hat Summit 2019
Diverge, converge, and shape - Red Hat Summit 2019Valentin Yonchev
 
Impactpreneur - Design Thinking Behind UI/UX
Impactpreneur - Design Thinking Behind UI/UXImpactpreneur - Design Thinking Behind UI/UX
Impactpreneur - Design Thinking Behind UI/UXThomas Ardi
 
Creating open culture bubbles - Red Hat Forum 2018
Creating open culture bubbles - Red Hat Forum 2018Creating open culture bubbles - Red Hat Forum 2018
Creating open culture bubbles - Red Hat Forum 2018Valentin Yonchev
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightfulWhitney Quesenbery
 
Don’t Just Build Pretty Websites — UX in the Real World
Don’t Just Build Pretty Websites — UX in the Real WorldDon’t Just Build Pretty Websites — UX in the Real World
Don’t Just Build Pretty Websites — UX in the Real WorldSonja Leix
 
DOES London - APIs for DevOps Teams, Creating Open Culture Bubbles
DOES London - APIs for DevOps Teams, Creating Open Culture BubblesDOES London - APIs for DevOps Teams, Creating Open Culture Bubbles
DOES London - APIs for DevOps Teams, Creating Open Culture BubblesJeremy Brown
 
JAS_Keynote-Portfolio
JAS_Keynote-PortfolioJAS_Keynote-Portfolio
JAS_Keynote-PortfolioJustin Schuck
 
Design for Web and Mobile
Design for Web and MobileDesign for Web and Mobile
Design for Web and MobileShady Selim
 
From Zero to A11Y: Building an Accessibility Culture
From Zero to A11Y: Building an Accessibility CultureFrom Zero to A11Y: Building an Accessibility Culture
From Zero to A11Y: Building an Accessibility CultureVMware Tanzu
 
Infographics For The Classroom Elem--HS
Infographics For The Classroom Elem--HSInfographics For The Classroom Elem--HS
Infographics For The Classroom Elem--HSVicki Dabrowka
 
Pixel Envy
Pixel EnvyPixel Envy
Pixel EnvySimoReid
 
Hacking UX: Product Design Thinking for Techies
Hacking UX: Product Design Thinking for TechiesHacking UX: Product Design Thinking for Techies
Hacking UX: Product Design Thinking for TechiesMelissa Ng
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webnolly00
 

Similar to More Than Pretty (20)

Aviva Rosenstein Web App Masters Tour Preview
Aviva Rosenstein Web App Masters Tour PreviewAviva Rosenstein Web App Masters Tour Preview
Aviva Rosenstein Web App Masters Tour Preview
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
An Eye Towards User Engagement, EyeTrackUX West
An Eye Towards User Engagement, EyeTrackUX WestAn Eye Towards User Engagement, EyeTrackUX West
An Eye Towards User Engagement, EyeTrackUX West
 
Role of UI and UX in improving customer experience
Role of UI and UX in improving customer experienceRole of UI and UX in improving customer experience
Role of UI and UX in improving customer experience
 
STEVE JOB’S SCHOOL OF MAKING A GREAT APP
STEVE JOB’S SCHOOL OF MAKING A GREAT APPSTEVE JOB’S SCHOOL OF MAKING A GREAT APP
STEVE JOB’S SCHOOL OF MAKING A GREAT APP
 
UX AT Work: Experience Design Principles for an Agency World
UX AT Work: Experience Design Principles for an Agency WorldUX AT Work: Experience Design Principles for an Agency World
UX AT Work: Experience Design Principles for an Agency World
 
Diverge, converge, and shape - Red Hat Summit 2019
Diverge, converge, and shape - Red Hat Summit 2019Diverge, converge, and shape - Red Hat Summit 2019
Diverge, converge, and shape - Red Hat Summit 2019
 
Impactpreneur - Design Thinking Behind UI/UX
Impactpreneur - Design Thinking Behind UI/UXImpactpreneur - Design Thinking Behind UI/UX
Impactpreneur - Design Thinking Behind UI/UX
 
Creating open culture bubbles - Red Hat Forum 2018
Creating open culture bubbles - Red Hat Forum 2018Creating open culture bubbles - Red Hat Forum 2018
Creating open culture bubbles - Red Hat Forum 2018
 
From barrier-free to delightful
From barrier-free to delightfulFrom barrier-free to delightful
From barrier-free to delightful
 
Don’t Just Build Pretty Websites — UX in the Real World
Don’t Just Build Pretty Websites — UX in the Real WorldDon’t Just Build Pretty Websites — UX in the Real World
Don’t Just Build Pretty Websites — UX in the Real World
 
DOES London - APIs for DevOps Teams, Creating Open Culture Bubbles
DOES London - APIs for DevOps Teams, Creating Open Culture BubblesDOES London - APIs for DevOps Teams, Creating Open Culture Bubbles
DOES London - APIs for DevOps Teams, Creating Open Culture Bubbles
 
Ayush portfolio
Ayush portfolioAyush portfolio
Ayush portfolio
 
JAS_Keynote-Portfolio
JAS_Keynote-PortfolioJAS_Keynote-Portfolio
JAS_Keynote-Portfolio
 
Design for Web and Mobile
Design for Web and MobileDesign for Web and Mobile
Design for Web and Mobile
 
From Zero to A11Y: Building an Accessibility Culture
From Zero to A11Y: Building an Accessibility CultureFrom Zero to A11Y: Building an Accessibility Culture
From Zero to A11Y: Building an Accessibility Culture
 
Infographics For The Classroom Elem--HS
Infographics For The Classroom Elem--HSInfographics For The Classroom Elem--HS
Infographics For The Classroom Elem--HS
 
Pixel Envy
Pixel EnvyPixel Envy
Pixel Envy
 
Hacking UX: Product Design Thinking for Techies
Hacking UX: Product Design Thinking for TechiesHacking UX: Product Design Thinking for Techies
Hacking UX: Product Design Thinking for Techies
 
Know thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the webKnow thy interaction – How interaction is changing what we create on the web
Know thy interaction – How interaction is changing what we create on the web
 

Recently uploaded

怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道yrolcks
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyChristopher Totten
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfAayushChavan5
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfLucyBonelli
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster1508 A/S
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic global solution
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppNadaMohammed714321
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbpreetirao780
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioRMG Project Studio
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioThink360 Studio
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxDanielTamiru4
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfneelspinoy
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppNadaMohammed714321
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxmarckustrevion
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptJIT KUMAR GUPTA
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Associazione Digital Days
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxNitish292041
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine CharlottePulte
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxKevinYaelJimnezSanti
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024digital learning point
 

Recently uploaded (20)

怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
怎么办理英国Newcastle毕业证纽卡斯尔大学学位证书一手渠道
 
The spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenologyThe spirit of digital place - game worlds and architectural phenomenology
The spirit of digital place - game worlds and architectural phenomenology
 
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdfPharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
 
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdfsimpson-lee_house_dt20ajshsjsjsjsjj15.pdf
simpson-lee_house_dt20ajshsjsjsjsjj15.pdf
 
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - MorgenboosterAI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
AI and Design Vol. 2: Navigating the New Frontier - Morgenbooster
 
Iconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing servicesIconic Global Solution - web design, Digital Marketing services
Iconic Global Solution - web design, Digital Marketing services
 
Karim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 pppppppppppppppKarim apartment ideas 01 ppppppppppppppp
Karim apartment ideas 01 ppppppppppppppp
 
world health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbbworld health day 2024.pptxgbbvggvbhjjjbbbb
world health day 2024.pptxgbbvggvbhjjjbbbb
 
Interior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project StudioInterior Design for Office a cura di RMG Project Studio
Interior Design for Office a cura di RMG Project Studio
 
Color Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 StudioColor Theory Explained for Noobs- Think360 Studio
Color Theory Explained for Noobs- Think360 Studio
 
Pearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptxPearl Disrtrict urban analyusis study pptx
Pearl Disrtrict urban analyusis study pptx
 
group_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdfgroup_15_empirya_p1projectIndustrial.pdf
group_15_empirya_p1projectIndustrial.pdf
 
Karim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 pppppppppppppppKarim apartment ideas 02 ppppppppppppppp
Karim apartment ideas 02 ppppppppppppppp
 
General Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptxGeneral Knowledge Quiz Game C++ CODE.pptx
General Knowledge Quiz Game C++ CODE.pptx
 
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.pptMaking and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
Making and Unmaking of Chandigarh - A City of Two Plans2-4-24.ppt
 
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
Giulio Michelon, Founder di @Belka – “Oltre le Stime: Sviluppare una Mentalit...
 
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptxUnit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
Unit1_Syllbwbnwnwneneneneneneentation_Sem2.pptx
 
Piece by Piece Magazine
Piece by Piece Magazine                      Piece by Piece Magazine
Piece by Piece Magazine
 
Niintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptxNiintendo Wii Presentation Template.pptx
Niintendo Wii Presentation Template.pptx
 
10 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 202410 Best WordPress Plugins to make the website effective in 2024
10 Best WordPress Plugins to make the website effective in 2024
 

More Than Pretty

  • 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
  • 7.
  • 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
  • 10.
  • 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
  • 12.
  • 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
  • 19.
  • 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