how to trim your design and keep it healthy
DESCRIPTION
A healthy design consist of adaptable, re-usable chunks and a clear vision. The benefits of developing a usable & living designguide is often overlooked. As a result, many products fail to deliver consistent designs efficiently and loose time-to-market. In large corporations, with many ongoing projects, designers and developers continuously working on the same product, how can UX practitioners prevent delivering an inconsistent user experience leading to less intuitive interactions and duplicate code slowing down page-speed? From a large corporation viewpoint, this session looks at the steps towards creating a consistent and efficient design.TRANSCRIPT
➔ www.steria.no
trim your designKEEP IT HEALTHYFrom a large corporation viewpoint, this session looks atthe steps towards creating a consistent and efficient design
and
How to
➔ www.steria.noHow to trim your design and keep it healthy
@jflusund@jflusund
The steps towards creating a consistent and efficient design
Flickr - Ruth Hartnup
DESIGNre-usable
DESIGN IS MORE CONSISTENT AND
re-usable
intuitive
We are not designing pages, we are designing systems of components.
-Stephen Hay, from Brad Frost´s blog post on Atomic design June 10, 2013.
Flickr - Ruth Hartnup
THE MAINchallenge...THE MAINchallenge...
TO KEEP THE DESIGN SYSTEM HEALTHY,
DUPLICATE DESIGNSDUPLICATE CODE HARMING PERFORMANCEINCONSISTENT USER INTERFACE
used and maintained
The main challenge:
Creating the design system
DEVELOP
MOTIVATE
Be clear on challenges and benefits
Flickr - John Jordan
Content:
Needs matrixCommon goals
Challenges
Activities:
interview stakeholdersDeveloper meetupsDesigner meetups
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
TIMEAWARENESS
CORRECT USECONNECTIONSIDENTIFYING
challenges
Needs & benefitsmatrix
Communication
Customers Creators Managers
Operationalefficiency
Usability &Performance
TTM
healthy design faster is the sweetspot
OPERATIONALEFFICIENCY
creators
customersmanagersUSABILITY
PERFORMANCETTM
from LO-FI to launch
DESIGN IS MORE CONSISTENT AND
re-usable
intuitive+ improves performance
+ less cognitive load
If I have learnt anything from working in large distributed teams, it's that communication is key.
- Paul Robert Lloyd
Creating the design system
MOTIVATE
DEVELOP
adapt the content to fit your needs...
Content:
CSS conventionsDesign rationale
Vector archiveDesign Chunks
Activities:
Developer/designer pairingDesigner DaysDesign studioDesign Critique
Develop
DESIGN SYSTEM STRATEGY
code structure design strategy
Teacher designed by gb from the Noun Project
DESIGNER DAYS
.play
DESIGN STUDIODESIGN CRITIQUE
Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
-Eliel Saarinen
A beautiful design system is about finding the same balance of consistency and variety. Too systematic and the design becomes predictableand repetitive. Too much variation and the system is confusing and overwhelming.
-Allison Wagner
Integrating thedesign system.
MOTIVATE
DEVELOP
STICKmake it
Content:
Present new Design ChunksShow new Design resultsShare the Design System
Train new users
Activities:
PresentationsMeetups Designer DaysVideo conferences
Document and integrate the process of iterating on designs.
MOTIVATE
DEVELOP
STICK
REPEATABLEmake it
make it
Flickr - Lesley Fryer
Content:
Findings from revisionsChanges in trends and business
Usability findingsEmerging trends and needs
Activities:
Measure progression in design revisionsDesign ManagmentIdentify re-usable chunksIterate on design chunks
Flickr - Jasmin Hussain
ON DESIGN CHUNKSITERATEON DESIGN CHUNKSITERATE
OptimizeDevelop
Make it stick
Optimize based on feedback
MOTIVATE
DEVELOP
STICK
REPEATABLE
OPTIMIZEmake it
make it
5 10 7
Content:
ChallengesNeedsGoals
Activities:
Collect feedbackAdjust strategy and process Designer meetups focus groups with developers
The 5 steps towardscreating a consistentand healthy design
MOTIVATE
DEVELOP
STICK
REPEATABLE
OPTIMIZEmake it
make it
@jflusundwww.steria.no
Thanks!