Contenu connexe Similaire à Design System Proposal (20) 2. © 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 2
JLL Aero’s Mission
Make broker teams more efficient and
effective so they can achieve more with a tool
Make broker teams more efficient and
effective so they can achieve more
Proposal
Implement a design system for JLL Products so that we
have a collection of reusable components, guided by clear standards,
that can be assembled together to build any number of applications.
3. • Allows for more rapid product design / implementation.
• Establishes a consistency around UI elements, patterns, and functionality.
• Central repository for all design elements, principles, and documentation
Benefits of a Design System
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 3
4. Components of the Design System
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 4
Pattern Library
Brand Identity
Design
Principles
Coding
Conventions
Documentation
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern
Content
Guidelines
Style Guide
Design System
Hosted
Design Systems are continuously evolving,
interactive, and accessible. Built in a
modular fashion to scale over time.
They have four major components:
• ContentGuidelines
• CodingConventions
• Style Guide
• Pattern Library
5. Plan of Attack
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 5
Hosted
Develop Components
of a Style Guide
Develop Components
of Content Guidelines
Develop Components
of a Pattern Library
Develop Hosting Platform
with full-stack
Code Conventions
Host on CMS Portal with
lite Code Conventions
Leverage UI Engineer to
begin UI / IxD buildout*
Benefits
• Streamline design
standards and
interactions
• Unified content
strategy / voice
• Central point of
reference for all
updates
Considerations
• Stakeholder engagement
(e.g. JLL UI Engineers and
external Development
partners)
• Adoption with Design /
Dev partner workflow
JLL Third Party
LEGEND
6. Vendor Matrix
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 6
Benefits Considerations Phases Duration Cost Start Date
Dialexa • Well acquainted with JLL
• Short engagement time
• Training and governance
support
• Version Control features
• Enterprise design system
experience
• Not local to Chicago
• Less time for initial
designs
• Kick Off Workshop
• Stakeholder Interviews
• Visual Identity
• Build Kick Off
• Design Demos
• Sketch Library Build
• Roll out / Iterate
• Documentation Site
8 Weeks $166,000 2-3 Weeks
Devbridge • SME on Design Systems
• Local to Chicago
• Agile delivery / approach
• Scalable and modular
to create / implement
system
• Will help ensure adoption
• They will push us to
more holistic design
product practice
• Will challenge us (in
positive way)
• Heuristic Evaluation
• Prioritize Components
• Implemented High Level
Design to Design System
• Document Design and
Identify Gaps / Backlog
6 Weeks
(MVP at 4
weeks)
$90,000 2-3 Weeks
FuzzyMath • Lower Cost
• Recommended by Brian
based on previous
engagements
• Local to Chicago
• Unclear on how
overlap / run parallel
• Little insight into
the site will be
• Long engagement
• Kick Off Workshop
• SME Interview
• UI Heuristic Audit
• Online / Interaction
Pattern Library
• Governance & Training
10-12 Weeks $85,000 - 5-6 Weeks
Viget • Design System will be
managed by third party
platform
• Potential to help us
build out Design System
• Longer engagement –
work product delivered
• Not local to Chicago
• System
does not begin until
week 11
• Long engagement
• Inventory & Discovery
• UI / Visual Design
• Documentation &
Workflow Integration
• System Documentation
10-12 Weeks $157,000 -
$190,000
4 Weeks
7. Benefits
• SME on Design Systems
• Local to Chicago
• Agile delivery / approach
• Scalable and modular
to create / implement
system
• Will help ensure adoption
Vendor Recommendation
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 7
Considerations
• They will push us to be
a more holistic design /
product practice
• Will challenge us
(in a positive way)
COST*
$50-70k / sprint (2
weeks)
ENGAGEMENT*
3 sprints (6 weeks)
MVP DESIGN SYSTEM*
End of Sprint #2 (4
weeks)
*indicative
8. The stakeholder involvement would be set during the workshop. In terms of the
development, this ties back to conversations about taking the full stack approach
to aligning JLL’s products.This is something that could take several different forms,
which DevBridge can explore in that conversation.
Workshop outputs, ahead of signing the specific SOW:
• Agreed upon priority
• Alignment from stakeholders and responsibilities
• Timeline for delivery
• Scope for release in the given timeframe
• Scope for follow-on releases based on prioritization
DevBridge recommends bringing in our engineers for that session as well.
Aero’s product stakeholders would get a chance to meet the whole team.
Next Steps: DevBridge Workshop
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 8
Pattern Library
Brand Identity
Design
Principles
Coding
Conventions
Documentation
Pattern
Pattern
Pattern
Pattern
Pattern
Pattern
Content
Guidelines
Style Guide
Design System
11. DevBridge – Proposed Workflow
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 11
Heuristic evaluation and prioritization of existing components sets your team up to validate the extensibility
of components before graduating them into your style guide. This means you ship what you need, and shelf
what you don’t.
Successful adoption is dependent on design, development, and business buy-in. Ensure adoption and
create momentum by validating the initial style guide thr ough existing efforts, as well as it’s ability to stand
alone. Embark on fully implementing a system once all stak eholders are committed and engaged.
Proposed Workflow
Heuristic evaluation of
current state
Prioritize components
for style guide
Validate extensibility
of design components
Promote high-value
UI to the design system
Document gaps
& generate backlog
“KEEP” OR“REVISE”
12. DevBridge – Considerations
© 2017 Jones Lang LaSalle IP, Inc. All rights reserved. 12
Engineering & Business Considerations
Identify current tech
stacks and profiles
Determine roll-out plan
to an early adoption
app or applications
Set testing and
engineering processes
Begin to implement
across application suite
Support roll-out
through staffing and
expectation setting
Work with design and
engineering to build
governance processes
For future products,
bake in from the start
Determine a central
owner and their
stakeholders
13. How Design Systems Help UX
13
Atoms: This screen of Instagram’s UI consists of a handful of
icons, some text-level elements, and two image types: the
and the user’s avatar image.
Molecules: Several icons form simple utilitarian components like
the bottom navigation bar and the photo actions bar where
comment on a photo. Also, simple combinations of text and/or
relatively simple components.
Organisms: Here we can see the photo organism take shape,
which consists of the user’s information, time stamp, the photo
actions around that photo, and information about the photo
count and caption. This organism becomes the cornerstone of
Instagram experience as it is stacked repeatedly in a never-
user-generated photos.
Templates: We get to see our components come together in the
context of a layout. Also, it’s here where we see the exposed
skeleton of the Instagram experience, highlighting dynamic
the user’s handle, avatar, photo, like count, and caption.
Pages: And finally we see the final product, complete with real
content poured into it, which helps ensure the underlying
comes together to form a beautiful and functional UI.
