demystify your application with a living styleguide
TRANSCRIPT
Demystify your application with a
Living Styleguide
‣ Revolutionised how we work
‣ Better understanding of our application
‣ More confident
‣ More consistent
‣ More adaptable
‣ Business problem
‣ Problems with software delivery
‣ Solution
‣ Review
What we’ll cover
Jordan Lewis @jordanlewiz
BUSINESS PROBLEM
Improve the purchase flow
Backend Frontend UX Product Designer
Meet the TeamBUSINESS PROBLEM
New purchase flowBUSINESS PROBLEM
Item pageBUSINESS PROBLEM
Search resultsBUSINESS PROBLEM
Cart pageBUSINESS PROBLEM
Checkout pageBUSINESS PROBLEM
User navBUSINESS PROBLEM
ModalsBUSINESS PROBLEM
Order confirmationBUSINESS PROBLEM
PROBLEMS WITH
Software delivery
PROBLEM #1:
Lack of shared vision
Shared vision: toolsPROBLEMS
Shared vision: no documentationPROBLEMS
Shared vision: knowledge silosPROBLEMS
PROBLEM #2:
Understanding UI behaviour
PROBLEMS
UI Behaviour: first time visit
UI Behaviour: empty statesPROBLEMS
UI Behaviour: one-off pagesPROBLEMS
UI Behaviour: modalsPROBLEMS
UI Behaviour: content lengthPROBLEMS
UI Behaviour: content lengthPROBLEMS
UI Behaviour: error messagesPROBLEMS
UI Behaviour: error pagesPROBLEMS
UI Behaviour: edge casesPROBLEMS
UI Behaviour: deleted contentPROBLEMS
UI Behaviour: 3rd party outagesPROBLEMS
UI Behaviour: localisationPROBLEMS
UI Behaviour:
… you get it!
PROBLEMS
UI Behaviour: manual testing
rinse and repeat
PROBLEMS
UI Behaviour: manual testing
re-creating scenarios is laborious and time consuming
PROBLEMS
UI Behaviour: cross-browser testingPROBLEMS
UI Behaviour: responsivePROBLEMS
SOLUTION
Living Styleguide
Living Styleguides:
real code Styleguides:
‣ Single point of truth
‣ Documentation
‣ Maintain consistency
‣ Save time
SOLUTION
Static: use sample markup
Living Styleguides:
real code Styleguides: static vs dynamic
Dynamic: use real components
SOLUTION
Living Styleguides:
real code Styleguides: living styleguidesSOLUTION
Any changes to a component in the Styleguide,
should result in changes to Production.
Living Styleguides:
real code Styleguides: living styleguidesSOLUTION
SOLUTION:
UI Library
UI Library: elementsSOLUTION
UI Library: example
currency
typography
icon
box
select
buttons
SOLUTION
SOLUTION:
Structure Styleguide
Structure Styleguides:
A Structure Styleguide is designed to document an
application’s UI logic in all of its possible permutations.
SOLUTION
structure scenarios
components
Living Styleguides:
real code Structure Styleguides: anatomySOLUTION
Living Styleguides:
real code Structure Styleguides: componentsSOLUTION
11 scenarios 16 scenarios
9 scenarios 6 scenarios
Living Styleguides:
real code Structure Styleguides: scenariosSOLUTION
Living Styleguides:
real code Structure Styleguides: pagesSOLUTION
REVIEW
The benefits of a Living Styleguide
Templates:
view-model (application)Templates:
without view-model Benefits: Identify any gapsREVIEW
Templates:
view-model (application)Templates:
without view-model Benefits: Free documentationREVIEW
Templates:
view-model (application)Templates:
without view-model Benefits: Iterate quicklyREVIEW
Templates:
view-model (application)Templates:
without view-model Benefits: Separate UI and backendREVIEW
market.styleguide.envato.com
