Building a Cross Product Design System
Building a Cross Product Design System
Building a Cross Product Design System
Client : Xively & LogMeIn ● Date: Aug 2016 - Feb 2017 ● Role: Product Designer ● Discipline: User Interface Design
Client : Xively & LogMeIn ● Date: Aug 2016 - Feb 2017 ● Role: Product Designer ● Discipline: User Interface Design
Client : Xively & LogMeIn ● Date: Aug 2016 - Feb 2017 ● Role: Product Designer ●
Discipline: User Interface Design
Client : Xively & LogMeIn ● Date: Aug 2016 - Feb 2017 ● Role: Product Designer ● Discipline: User Interface Design
Client : Xively & LogMeIn
Date: Aug 2016 - Feb 2017
Role: Product Designer
Discipline: User Interface Design
Challenge
A design system is an essential part of expansion within a growing company.
What is a design system you may ask? Simply put, it is a way for designers and
developers to keep elements of their work in sync with one another.
The Product Design Team at LogMeIn began an initiative to standardize their
design systems starting with design and leading to development.
A design system is an essential part of expansion within a growing company.
What is a design system you may ask? Simply put, it is a way for designers and
developers to keep elements of their work in sync with one another.
The Product Design Team at LogMeIn began an initiative to standardize their
design systems starting with design and leading to development.
Strategy
Strategy
INITIAL DISCOVERY PROCESS
I was tasked with creating a cohesive pattern library for our products UI elements.
We had many executions of the same elements and this reduced consistency, slowed work flow
from design to development and took attention away from building a stronger product.
I was tasked with creating a cohesive pattern library for our products UI elements.
We had many executions of the same elements and this reduced consistency, slowed work flow
from design to development and took attention away from building a stronger product.
I was tasked with creating a cohesive pattern library for our products
UI elements. We had many executions of the same elements and this reduced consistency, slowed work flow from design to development and took attention away from building a stronger product.
I was tasked with creating a cohesive pattern library for our products UI elements. We had many executions of the same elements and this reduced consistency, slowed work flow
from design to development and took attention away from building
a stronger product.
Audit of all current UI tools used in product & in design files. Mapping out pages with defined categories for each component.
Color, type, input fields, buttons, etc. (Example image of dropdowns audit.)
Audit of all current UI tools used in product & in design files. Mapping out pages with defined categories for each component. Color, type, input fields, buttons, etc.(Example image of dropdowns audit.)
Execution
Execution
Execution
BUILDING UI ELEMENTS FOR EACH PAGE
BUILDING UI ELEMENTS
FOR EACH PAGE
With the help of Craft, an Invision plugin for Sketch,
I checked consistency of UI items, typography and color.
With the help of Craft, an Invision plugin for Sketch,
I checked consistency of UI items, typography and color.
With the help of Craft, an Invision plugin
for Sketch, I checked consistency of UI items, typography and color.
With the help of Craft, an Invision plugin for Sketch, I checked consistency of UI items, typography and color.
With the help of Craft, an Invision plugin for Sketch, I checked consistency of UI items, typography and color.
Building each page along with Craft took a lot of trial and
error. The goal wasn’t to build a style guide, so balancing
the representation of UI tools with detailed definitions was
a challenge. How much definition was too much? How could
we display rules without making the library feel like a style
guide with dense information?
Building each page along with Craft took a lot of trial and error. The goal wasn’t to build a style guide, so balancing the representation of UI tools with detailed definitions
was a challenge. How much definition was too much?
How could we display rules without making the library
feel like a style guide with dense information?
Building each page along with Craft took a lot
of trial and error. The goal wasn’t to build a style guide, so balancing the representation of UI tools with detailed definitions was a challenge. How much definition was too much? How could
we display rules without making the library feel like a style guide with dense information?
Building each page along with Craft took a lot of trial and error.
The goal wasn’t to build a style guide, so balancing the representation of UI tools with detailed definitions was a challenge. How much definition was too much? How could we display rules without making the library feel like a style guide with dense information?
Building each page along with Craft took a lot of trial and error. The goal wasn’t to build a style guide, so balancing the representation of UI tools with detailed definitions was
a challenge. How much definition was too much? How could we display rules without making the library feel like a style guide with dense information?
Revisions & Team Collaboration
Revisions & Team Collaboration
GETTING ORGANIZED
GETTING ORGANIZED
After weeks of initial stabs at a Xively pattern library, designers from each product team hopped on board to tackle these systems and we formed an official design systems team where we refined our process for building future systems across LogMeIn products.
After weeks of initial stabs at a Xively pattern library, designers from each product team
hopped on board to tackle these systems and we formed an official design systems team where we refined our process for building future systems across LogMeIn products.
After weeks of initial stabs at a Xively pattern library, designers from each product team hopped on board to tackle these systems and we formed an official design systems team where we refined our process for building future systems across LogMeIn products.
Everyone dedicated time and research to learn about best practices for creating a cross functioning design system.
We began to get some outside support. The product owner of Craft agreed to sit down with us to gave helpful insider
tips on how to utilize the plugin in a more efficient way. Our team joined a Slack channel dedicated to creating more efficient design systems.
Everyone dedicated time and research to learn about best practices for creating a cross functioning design system. We began to get some outside support. The product owner of Craft agreed to sit down with us to gave helpful insider tips on how to utilize the plugin in a more efficient way. Our team joined a Slack channel dedicated to creating more efficient design systems.
Everyone dedicated time and research to learn about best practices
for creating a cross functioning design system. We began to get some outside support. The product owner of Craft agreed to sit down with
us to gave helpful insider tips on how to utilize the plugin in a more efficient way. Our team joined a Slack channel dedicated to creating more efficient design systems.
We shared informative articles with each other that inspired us and defined best practices and before we knew it, we were forming a knowledge empowered design systems team and the prospect of what we were working toward building was exciting to everyone.
We shared informative articles with each other that inspired us and defined best practices and before we knew it,
we were forming a knowledge empowered design systems team and the prospect of what we were working toward building was exciting to everyone.
We shared informative articles with each other that inspired us and defined best practices
and before we knew it, we were forming a knowledge empowered design systems team and the prospect of what we were working toward building was exciting to everyone.
SOME GREAT DESIGN SYSTEMS RESOURCES
SOME GREAT DESIGN SYSTEMS RESOURCES
SOME GREAT DESIGN SYSTEMS RESOURCES
If you’re interested in learning more about design systems, this is the link to join the design systems Slack team.
Many designers/developers from great tech companies are involved in open dialogue with good resources here.
Keeping my Sketch files de-cluttered has always been a challenge and this article by Jon Moore
gave good advice for keeping my Pattern Library files clean.
Keeping my Sketch files de-cluttered has always been a challenge and
this article by Jon Moore gave good advice for keeping my Pattern
Library files clean.
Keeping my Sketch files de-cluttered has always been a challenge and this article by Jon Moore gave good advice for keeping my Pattern Library files clean.
This was a great article on why design systems are important, as well as how to define them.
This was a great article on why design systems are important,
as well as how to define them.
This was a great article on why design systems are important, as well as how
to define them.
These were both excellent articles giving insights into Nordnet’s process, as well as the nitty gritty
of how they save, sync, and propose new elements for their design system. For me, this was really
insightful, as I like to stay as organized and systematic as possible.
These were both excellent articles giving insights into Nordnet’s process, as well as the nitty
gritty of how they save, sync, and propose new elements for their design system. For me, this
was reallyinsightful, as I like to stay as organized and systematic as possible.
These were both excellent articles giving insights into Nordnet’s process,
as well as the nitty gritty of how they save, sync, and propose new elements
for their design system. For me, this was reallyinsightful, as I like to stay
as organized and systematic as possible.
These were both excellent articles giving insights into Nordnet’s process, as well as the nitty gritty of how they save, sync, and propose new elements for their design system. For me, this was really
insightful, as I like to stay as organized and systematic as possible.
FlatIron School AdmissionsProduct Design
LastMail by LastPassProduct Design
Grasshopper for DesktopProject type
care.meProduct Design
Connect Mobile AppProduct Design
The Four Pillars of CollaborationPublic Speaking
Grasshopper WiFi CallingProduct Design
Homepage Marketing TestRedesign
KodeConnectPrint Design
Building a Cross Product Design SystemDesign Systems
Xively + SalesforceProduct Design
Thanks for viewing my site!
Email me at lizharrisdesign@gmail.com
or follow me on social media!
Thanks for viewing my site!
Email me at lizharrisdesign@gmail.com
or follow me on social media!
Thanks for viewing my site!
Email me at lizharrisdesign@gmail.com
or follow me on social media!