The story of multiple generations of design systems created to support UX design practices at GE. Video of narration here: https://www.youtube.com/watch?v=Ou3v7aiJQU0
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
Design System as a Product - Maria Elena Duenias, Esther Butcher
Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.
Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility.
Summary:
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A
The SlideShare presentation consists of the summary of the Design System 101 Workshop, as presented by UX Gorilla with Mayank Dhawan.
Link of the event: https://bit.ly/2RwN4RF
The workshop took place on December 01, 2018 at 91springboard, Jhandewalan Extension, New Delhi.
This event was for designers, developers or members of the product team to help them with a clear understanding and give them useful ideas to make better decisions, help their teams to save time so that they can do things they would enjoy.
The Design System is an essential part of today's UX world which provides agility and performance in the longer term. Atomic Design is a part of Design System for designers and developers to build the parts of a complete design.
A design system is a framework of practices that bring designers and products together. It is a platform to identify, and document what to share, whether a visual style, design patterns, front-end UI components, and practices like accessibility, research, content strategy.
The role of design with enterprise organizations is expanding, spreading across product teams and influencing decision-making at higher and higher levels. This scale, paired with the array of devices, browsers, screen sizes, locales, and environments, makes it increasingly challenging to align designers and developers to deliver cohesive user experiences.
In this talk, I’ll discuss the lessons learned, the challenges faced, and best practices for creating and maintaining an effective interface design system.
UI design becomes increasingly important for products and services. Influencing their users' expierence. UX itself determines the value of digital offerings and is their key differentiator. But "historically grown" incoherent interfaces deteriorate value and brand of products and services.
This talk is about design systems, that help to avoid (or overcome) design dept and to enable scaling UX across platforms, products and devices. Modularity and standardisation of repeatedly used aspects helps speeding up processes and increasing business value. Design systems help making user experience tangible to teams and brand values actionable.
Design System as a Product - Maria Elena Duenias, Esther Butcher
Design systems are a great example where web development and design meet. You can find innumerable resources on the internet, books and conferences on how to build them, and how they are exactly what your organization needs. But, building one requires a lot more than following a recipe. In this talk we are going to discuss how to build a design system as an internal product, and how it evolves to become what the users need.
Let's talk about Design Systems and how they could help you build better products in terms of efficiency, consistency, UX, code quality and accessibility.
Summary:
1. About me
2. Why have one?
3. Design system (fundamentals)
4. How to build a design system (process)
5. Cost and value
6. Inspiration
7. Q&A
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
As engineers we spend much of our time getting stuff to production and making sure our infrastructure doesn’t burn down out right. We however spend very little time learning to understand and respond to outages. Does our platform degrade in a graceful way or what does a high cpu load really mean? What can we learn from level 1 outages to be able to run our platforms more reliably.
Plenty of people are jumping on the new hype, Observability, lots of them are replacing their “legacy” monitoring stack. Not all of them achieve the goals they set. But observability is not a tool — it is a property of a system. Moving from many small black boxes to a more holistic view of your system.
In this talk we ll talk about how to prepare teams to tweak their testing and monitoring setup and work instructions to quickly observe, react to and resolve problems. We look at improving your monitoring by adapting your culture and then maybe your tooling. Where we as engineers not only write, maintain and operate our software platforms but actively pursue ways to learn and predict its (non-functional) behavior.
Furthermore we ll discuss the need for and the options of not only monitoring our platforms and it's envitable outages, but also their (potential) length and impact. We ll look at tools like at using Service Level Objects for ways to prepare teams to tweak their testing and monitoring setup and runbooks to quickly observe, react to and resolve problems.
The Outcome 2021 Conference
Summary of the talk:
- Intro to design systems and what a design system is made of
- How design systems help businesses to become more efficient
- Process of starting out a design system
- Measuring success and maintenance
Everything you need to know about design system.pdfKoru UX Design
Oftentimes, people tend to confuse a design system with a style guide, or even design principles. The truth is that a design system comprises all of these and more.
To know more about how a design system can benefit your product, read our free guide.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
In this talk we’ll uncover our journey in creating a Design System for Skyscanner and share our learnings on how we sold it to the business by proving its worth. We’ll talk through some of the design and tech considerations we’ve made and share the tools and techniques which have helped us along the way.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
In today's video, I showed & discussed one of the most anticipated topics! "Design System". Here I talked in detail about the concepts and applications.
Creating and Scaling an Enterprise Design Systemuxpin
You'll learn:
- How to create a unified design language for a complex organization.
- How to use the most efficient processes and tools for maintaining the design system.
- How to scale code and interaction patterns across platforms and products.
Drew has spent the better part of the last two years leading the charge on launching and managing the global design system at AIG. Learn some of the battle-tested tips, tricks, and methods gained during the process including how to:
- Manage contribution and intake
- Manage “snowflake” vs system components
- Support multiple brands with a single system
- Track and measure the ROI of your system
- Perpetuate buy-in
Bio
Drew Burdick is a multi-faceted design leader with over a decade of experience. He founded and led a creative agency, led top accounts at Red Ventures, and most recently helped to transform product design at AIG by leading a team to establish their global design system. He is now a leader with the Experience Design practice at Slalom, helping to drive client engagements in the Charlotte market.
Design systems: accounting for quality and scalabilityuxpin
You'll learn:
How Forumone builds and implements design systems for their clients
How to plan, create, sell, and implement a design system
How to use common design tools to build a design system developers will use
Slides for a few events i was lucky to give a talk this year. From my experiences of building a design system for the product team. Figma and storybook js are introduced.
As engineers we spend much of our time getting stuff to production and making sure our infrastructure doesn’t burn down out right. We however spend very little time learning to understand and respond to outages. Does our platform degrade in a graceful way or what does a high cpu load really mean? What can we learn from level 1 outages to be able to run our platforms more reliably.
Plenty of people are jumping on the new hype, Observability, lots of them are replacing their “legacy” monitoring stack. Not all of them achieve the goals they set. But observability is not a tool — it is a property of a system. Moving from many small black boxes to a more holistic view of your system.
In this talk we ll talk about how to prepare teams to tweak their testing and monitoring setup and work instructions to quickly observe, react to and resolve problems. We look at improving your monitoring by adapting your culture and then maybe your tooling. Where we as engineers not only write, maintain and operate our software platforms but actively pursue ways to learn and predict its (non-functional) behavior.
Furthermore we ll discuss the need for and the options of not only monitoring our platforms and it's envitable outages, but also their (potential) length and impact. We ll look at tools like at using Service Level Objects for ways to prepare teams to tweak their testing and monitoring setup and runbooks to quickly observe, react to and resolve problems.
The Outcome 2021 Conference
Summary of the talk:
- Intro to design systems and what a design system is made of
- How design systems help businesses to become more efficient
- Process of starting out a design system
- Measuring success and maintenance
Everything you need to know about design system.pdfKoru UX Design
Oftentimes, people tend to confuse a design system with a style guide, or even design principles. The truth is that a design system comprises all of these and more.
To know more about how a design system can benefit your product, read our free guide.
Evolving your Design System: People, Product, and Processuxpin
You'll learn:
How to create and maintain a design system over several years
How people, process, and product change alongside a design system
Lessons learned from growing the Linkedin design system
Taken from Future of Web Design (#FOWD), London 2015 Conference. http://futureofwebdesign.com/london-2015
Reports are in from Twitter, Medium, and the like; we can’t make full comps, use Photoshop, or even utter the phrase 'visual design' anymore. What’s a designer to do? Has our role evaporated? Fear not! Dan Mall will help redefine the tasks of the modern day designer in light of the multi -device world that snuck up on us.
This was our final Series A deck. Read more about raising the round in this blog post:
https://medium.com/@DanielleMorrill/welcome-brad-feld-to-the-mattermark-team-announcing-our-6-5m-series-a-dd9532fc1b39
More startup pitch deck examples here: https://attach.io/startup-pitch-decks/
AirBnb's original pitch deck from 2008. They closed a $600k seed round with this deck.
Inilah pitch deck dari raksasa media digital, Buzzfeed. Bagi kamu yang memiliki model bisnis yang serupa dengan BuzzFeed, mungkin kamu dapat terinspirasi dari pitch deck ini.
The investor presentation we used to raise 2 million dollarsMikael Cho
The investor presentation we used to raise 2 million dollars for ooomf.com (now pickcrew.com)
View the online version here: https://pickcrew.com/investors/
The slide deck we used to raise half a million dollarsBuffer
This is the pitchdeck we used to raise half a million dollars from Angel investors. More here:
http://onstartups.com/tabid/3339/bid/98034/The-Pitch-Deck-We-Used-To-Raise-500-000-For-Our-Startup.aspx
The GE Design System and thoughts about craft at scale (David Cronin at Enter...Rosenfeld Media
David Cronin: "The GE Design System and thoughts about craft at scale"
Enterprise UX 2015 • May 13, 2015 • San Antonio, TX, USA
http://enterpriseux.net
The shorter version of these slides was presented at Amuse UX 2015 Special Meetup (Budapest, Hungary) — http://www.meetup.com/UXbudapest/events/225944151/.
California, the epicenter of innovation and technology, is at the forefront of the low-code revolution. DEW Studio Low-code platforms are empowering businesses and individuals to develop applications without extensive coding knowledge,
https://dewstudio.io/low-code-app-development-platform
ChatGPT and similar AI models are only capable of partially replacing developers. While these AI models are powerful tools that can assist developers in various tasks, there are several reasons why they cannot fully replace human developers:
https://blog.dewstudio.io/can-chat-gpt-replace-developers-the-role-of-ai-in-software-development/
Prototyping is not a new concept, but the role it plays in the design process has changed dramatically in the last few years. Proliferation of agile methods and the grassroots nature of design thinking have opened up new opportunities where research and design happen simultaneously. New tools for building digital prototypes have given design teams numerous options from very simple demos to complex proof of concepts.
The Devbridge Design team shares their experience and explore cases where prototyping has driven the design and research process. With varying levels of complexity and fidelity, each has had a different outcome.
IxDA October Event: Prototyping Approaches and OutcomesIxDA Chicago
Prototyping is not a new concept, but the role it plays in the design process has changed dramatically in the last few years. Proliferation of agile methods and the grassroots nature of design thinking have opened up new opportunities where research and design happen simultaneously. New tools for building digital prototypes have given design teams numerous options from very simple demos to complex proof of concepts.
Learn about the Devbridge Design team's experience as they explore cases where prototyping has driven the design and research process. With varying levels of complexity and fidelity, each has had a different outcome.
5.2.2013 2013 2013 - Software, System, & IT Architecture - Good Design is G...IBM Rational
Series Name: Software, System, & IT Architecture
Webinar Name: 2013 - Software, System, & IT Architecture - Good Design is Good Business: Design Management: Pictures are Worth….
Date: May 2, 2013
Presneter: Roger Snook
Between Filth and Fortune- Urban Cattle Foraging Realities by Devi S Nair, An...Mansi Shah
This study examines cattle rearing in urban and rural settings, focusing on milk production and consumption. By exploring a case in Ahmedabad, it highlights the challenges and processes in dairy farming across different environments, emphasising the need for sustainable practices and the essential role of milk in daily consumption.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
Transforming Brand Perception and Boosting Profitabilityaaryangarg12
In today's digital era, the dynamics of brand perception, consumer behavior, and profitability have been profoundly reshaped by the synergy of branding, social media, and website design. This research paper investigates the transformative power of these elements in influencing how individuals perceive brands and products and how this transformation can be harnessed to drive sales and profitability for businesses.
Through an exploration of brand psychology and consumer behavior, this study sheds light on the intricate ways in which effective branding strategies, strategic social media engagement, and user-centric website design contribute to altering consumers' perceptions. We delve into the principles that underlie successful brand transformations, examining how visual identity, messaging, and storytelling can captivate and resonate with target audiences.
Methodologically, this research employs a comprehensive approach, combining qualitative and quantitative analyses. Real-world case studies illustrate the impact of branding, social media campaigns, and website redesigns on consumer perception, sales figures, and profitability. We assess the various metrics, including brand awareness, customer engagement, conversion rates, and revenue growth, to measure the effectiveness of these strategies.
The results underscore the pivotal role of cohesive branding, social media influence, and website usability in shaping positive brand perceptions, influencing consumer decisions, and ultimately bolstering sales and profitability. This paper provides actionable insights and strategic recommendations for businesses seeking to leverage branding, social media, and website design as potent tools to enhance their market position and financial success.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
8. What we mean when we talk about design systems
A visual language or style
Patterns for structure, composition, behavior
Guidelines and usage documentation
Stencils or templates for design tools that contain the
visual language and patterns
Code for building UIs that utilize the visual language
and patterns
9. The value of a design system
Enables people to effectively learn and use products by
creating a sense of familiarity through consistency
Creates a singular, targeted brand experience; support a
perception of quality
Improves usability by focusing effort on refining a single set
of elements
Increases designer and developer productivity by providing
fundamentals that reduce duplication of effort
Improves product/market fit by accelerating iterative
prototyping efforts
10. 4
Figure 4-7 A feedback technique
Keep in mind when you decide your timing issues that people have built-in
expectations about how long they want to wait for an operation to be
completed. Try to provide your users with feedback that lets them know that
the computer is still working.
Sometimes people may switch to a different application to do something else
1. 2. 3.
Apple HIG
11. The evolution of design systems at GE
Core Design
Industrial Internet
Design System
IIDS Mapping Predix
Design System
PDS “Cirrus”
Communications
Design System
Healthcare
Design System
Generation 1 Generation 1.1 Generation 2 Generation 2.1
14. The Industrial Internet Design System (IIDS)
Create a set of patterns that dev teams could use (somewhat)
successfully with little or no help from designers
Improve developer productivity, for its own sake and to drive
adoption
Accelerate product definition and delivery through rapid
prototyping
Align the efforts of a decentralized community of designers
across GE
Allow designers to focus on the interesting, novel stuff
OUR OBJECTIVES
15. The Industrial Internet Design System (IIDS)
We knew we wanted to deliver it in code; guidelines wouldn’t work
Started with visual language: wanted it to fit in industrial settings, but to have some
amount of grace. We also wanted a style that developers could extend without breaking
Wrestled with which patterns to focus on. Inventoried existing software and four
projects frog design was doing for us.
Debated how prescriptive to be, decided to allow for diversity to drive adoption:
“Tools not rules”
Started with a team from frog, by the time we shipped, had built a team of designers
and design technologists
Designed and built on top of existing frameworks like Bootstrap, jQuery, Highcharts, d3
HOW WE CREATED IT
30. The Industrial Internet Design System (IIDS)
Had to do a substantial publicity push at first, then it took off
Initially skeptical dev managers reported 100% productivity improvement
Saw a fairly high level of design consistency, mixed quality
Many developers new to Bootstrap and LESS. (Many developers new to web dev.)
Very useful in projects that involved customer collaboration;
a team could get a functioning UI in days
~1000 unique downloads of code in first 6 months
~20k unique downloads 2012-2015
Used in over 100 projects in the first year
Used in 50+ commercial products, and for internal tools
RESULTS & WHAT WE LEARNED
31. Generation 1.1
The Communications Design System (CDS)
The Healthcare Design System (HDS)
Industrial Internet Mapping (IIDS Geo)
2013
32. The Communication Design System (CDS)
The Healthcare Design System (HDS)
IIDS Mapping
THE SITUATION
33. The Communication Design System (CDS)
The Healthcare Design System (HDS)
IIDS Mapping
Create a unified design system for GE with versions
(or “extensions”) for healthcare and marketing
applications, as well as industrial internet
Add geolocation and mapping capabilities to the IIDx
OUR OBJECTIVES
34. The Communication Design System (CDS)
The Healthcare Design System (HDS)
IIDS Mapping
Implemented theming capabilities in IIDS to enable us to
use that as the foundation for Healthcare and Comms
Created new patterns for healthcare and marketing
Work was largely done by centralized design system team
Built mapping features in collaboration with GE GIS experts
HOW WE CREATED IT
43. New typefaces
GE Sans Beta 03 overview / 20131002 / Bold Monday / page 2
GE Sans Beta 03 a b c d e f g h i j k l m n o p q
r s t u v w x y z A B C D E F G
H I J K L M N O P Q R S T U
V W X Y Z 0 1 2 3 4 5 6 7 8 9
$ & @ . , : ; ‘ ’ “ ” ! ? ( [ { / | } ]
) - – — fi fl fb ff fh fk fl ffi ffl
GE Serif Beta 03 overview / 20131002 / Bold Monday / page 6
GE Serif Beta 03 a b c d e f g h i j k l m n o
p q r s t u v w x y z A B C
D E F G H I J K L M N O P
Q R S T U V W X Y Z 0 1 2
3 4 5 6 7 8 9 $ & @ . , : ; ‘ ’
“ ” ! ? ( [ { / | } ] ) - – — fi fl
fb ff fh fk fl ffi ffl
GE Inspira Sans GE Inspira Serif
44. The Communication Design System (CDS)
The Healthcare Design System (HDS)
IIDS Mapping
Monolithic distributions built were expensive to maintain,
and were difficult for other teams to contribute to
CDS has been used extensively for internal tools, e.g. OneHR portal.
Also was heavily used for external marketing sites.
CDS eventually taken over by our IT design team
Difficult to manage user & customer perception of quality
(or lack thereof) due to heterogeneity of app backends
RESULTS AND LESSONS
47. The Predix Design System (PDS)
Provide new UI primitives for the new Predix platform
Quickly create an interaction framework and visual language for
APM product
Get customers and stakeholders excited about the vision for APM
Engage users in conversations about APM product design
Enable developers to go quickly, with minimal fuss
Create a uniquely “industrial” feel
Decrease the amount of effort we had to put into bug fixes,
upgrading libraries, distributing patches
OUR OBJECTIVES
48. The Predix Design System (PDS)
Joined the APM and Predix teams together for
initial sprints
Quickly created concept car prototype of APM to test
and refine initial design ideas
Decided to adopt web components standard to enable
modular development and distribution
Started investing in CI/CD automation to reduce
maintenance costs over time
HOW WE CREATED IT
50. OVERVIEW
View Selector
Shows the current view name.
Selector opens a list of available views for
this asset context.
PREDIX
™
OVERVIEWGT2
SOUTHERN FLEET > BLACK HAWK POWER > BLOCK 2
Dashboards
Cases
Alerts 6
1
Analysis
GE 7FA.04
S/N 278372
BLOCK 2
Dry Low NOx 2.1
Inlet Air Chiller
Natural Gas
Advanced Gas Path with AutoTune
Ammonia Injection System
Emissions 3.1ppm N, 9ppm CO
EXAMPLE 2
98%
Reliability
97%
Availability
680MW
Capacity
EXAMPLE 1
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Anatomy of a
Predix Application
EXAMPLE 1
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Card
Are self-contained composable UI modules.
Has state based on context, work ow, etc.
Resides in a view.
Shareable.
Example code:
<px-card header-text="Example 1">
</px-card>
<px-ts-chart id="tsChart">
<px-ts-chart-controls data-controls></px-ts-chart-controls>
</px-ts-chart>
GT2
SOUTHERN FLEET > BLACK HAWK POWER > BLOCK 2
Asset Browser
Shows the current asset context.
Selector opens asset browser.
Example code:
<px-context-browser
</px-context-browser>
nav-items='[
style="height: 240px"
label-field="name"
parent-id-field="category"
id-field="identifier"
tree-display-levels="3"
child-key="children">
View
A layout container in which card(s) reside.
May include UI elements not in cards.
Shareable.
GE 7FA.04
S/N 278372
BLOCK 2
Dry Low NOx 2.1
Inlet Air Chiller
Natural Gas
Advanced Gas Path with AutoTune
Ammonia Injection System
Emissions 3.1ppm N, 9ppm CO
EXAMPLE 2
98%
Reliability
97%
Availability
680MW
Capacity
EXAMPLE 1
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
680MW
CapacityWidget
A widget that visualizes data or information.
Can reside inside or outside of a card.
Communicates through the view or card that contains it.
Example code:
<px-ts-chart>
</px-ts-chart>
<px-ts-chart-controls data-controls show-export=“false” zoom-buttons="[]">
</px-ts-chart-controls>
<px-chart-series id="plant-capacity"></px-chart-series>
Dashboards
Cases
Alerts 6
1
Analysis
Navigation
A list of primary spaces within the application.
Spaces may have secondary navigation that
are independent of context or view.
Example code:
<px-app-nav
</px-app-nav>
nav-items='[
{"path": "", "icon": "fa-warning", "eventName": "firstItem", "label":"Alerts"},
{"path": "tab2", "icon": "fa-briefcase", "label": "Cases"},
{"path": "tab3", "icon": "fa-bar-chart", "label": "Analysis"},
{"path": "tab4", "icon": "fa-dashboard", "label": "Dashboards"}]'>
51. Time Series
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Why Cards?
Composable
Allows reuse of composed
modules across screens,
platforms, and applications.
Stateful
Have con gurable state that can
be passed to other cards.
Shareable
Cards can be packaged and
shared with their con gured state
and information intact.
03/24/201503/26/201503/28/201503/30/201504/01/2015
-3
-1
1
3
2
5
-4
-2
0
4
CURRENT
342
341
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
Time Series
Customer
Company
SSO
Bob Sinclaire
RasGas
RG3877-9983
Running
Claimed
Gas Valve Replacement
Turbine Optimization
2%
Completed
2883 Dukhan Highway
Dukhan, Qatar
Turbine 9HA Gas Turbine
22%2:37PMiPad
PREDIX ™
OVERVIEWGT2
SOUTHERN FLEET > BLACK HAWK POWER > BLOCK 2
Dashboards
Cases
Alerts 6
1
Analysis
GE 7FA.04
S/N 278372
BLOCK 2
Dry Low NOx 2.1
Inlet Air Chiller
Natural Gas
Advanced Gas Path with AutoTune
Ammonia Injection System
Emissions 3.1ppm N, 9ppm CO
EXAMPLE 1
-3
-1
1
3
2
5
-2
0
4
CURRENT
342
344
343
346
345
348
347
350
349
PRESSURE
03/23/2015 TO 04/02/2015
DATA GRID
Date IS 13:12:08Filters +03/23/2015 TO 04/02/2015
…
Date Time Raw SOS (Ft/Sec) FluidTemperature (F) 1h Avg Water Cut (%) 1hr Avg Flow (BPD) Output_Flow Output_WLR_Std Yest
8/12/13 0:00:00 5887.6 197.69 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:01 5886.6 197.69 82.5 2278 5287.9 87.655 85.879
8/12/13 0:00:02 5885.7 197.69 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:03 5885.7 197.6 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:0 5885.7 197.55 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:05 5885.6 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:06 5885.5 197.6 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:07 5886.3 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:08 5885.8 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:09 5885.9 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:10 5886 197.62 82.5 2278 1726.1 87.655 85.879
8/12/13 0:00:11 5885.6 197.58 82.5 2278 1726.1 87.655 85.879
62. The Predix Design System (PDS)
A reduced set of elements kept our efforts focused, but eventually failed to
accommodate emerging diversity of apps being created on Predix.
Designers often “riffed off” of existing patterns without considering
implications for development teams. This caused some developers to
resist adopting.
Our minimal, “industrial” visual language was perceived as
unsophisticated or boring by some stakeholders and customers.
Effective use of the design system required substantial time investment in
office hours and other support venues for both designers and developers.
continued…
RESULTS & WHAT WE LEARNED
63. The Predix Design System (PDS)
Modularity provided by web components along with CI/CD automation
reduced cost of maintaining, patching and extending the system
Interoperability in the ever-changing UI tech landscape is an
ongoing battle
Contributions can be very labor intensive if not aligned from a design
and code perspective from the start
Customizing off-the-shelf charting packages was fragile, labor intensive
and didn’t meet our users’ needs
Using d3 as the foundation of our own modular visualization framework
proved to be a better approach to adding features and chart types
RESULTS & WHAT WE LEARNED continued
67. The “Cirrus” Predix Design System refresh
Create a richer, more visually sophisticated visual language
Increase the diversity of patterns and possibilities for
designers, while maintaining a unified brand experience
Support the integration of acquired products
Create stronger relationships and engagement within the
growing design community
OUR OBJECTIVES
68. The “Cirrus” Predix Design System refresh
Started from the design elements and code base from previous generation
Ran design workshops to explore, discuss, and co-create design elements
with community
Shared in-progress work with design community and stakeholders,
provided early stencil so designers could try out new visual language and
patterns with their products
Limited scope to what we could design in Q1 and implement in ~Q2
Used as an opportunity to clean up tech debt, simplify and slim down
code base, improve performance, and further increase use of automation
HOW WE CREATED IT
81. The “Cirrus” Predix Design System refresh
The workshops were very productive and fun. We’ve continued
them as a standard practice for major new topics.
Crisp decision-making about when design for a component is done
is critical to stay on plan. You really have to think the order of
operations.
A major design refresh can’t be adopted instantaneously; this leads
to conundrums about feature requests by important customers
With a more open-ended system, some designers surprise us with
what they do with it, others make us wonder how to better convey
the spirit of the design language.
RESULTS & LESSONS
82. The “Cirrus” Predix Design System refresh
As part of this effort, the team focused on their CI/CD game, and
released as often as multiple times a week, often in close support of
product development.
Some fun stats about the release:
• 117 GitHub repos included in the release
• 3,578 commits to those repos
• 116 days development time, for an average of 31 commits per day
• 3484 automated unit tests for our Web Components, which we
run against 6 browsers
DEV STATS
84. The evolution of design systems at GE
Core Design
Industrial Internet
Design System
IIDS Mapping Predix
Design System
PDS “Cirrus”
Communications
Design System
Healthcare
Design System
Generation 1 Generation 1.1 Generation 2 Generation 2.1
85. Lessons from the journey
Design systems can make it tempting to bypass a healthy human-centered design
process.
“Tools not rules” has been an effective strategy…
…but not everyone believes in avoiding duplication of effort and creating economies
of scale
If you ship code, you’re a development organization.
(Some) developers don’t like it when they feel that the design team is prescribing
technology decisions.
Contribution and extension is hard.
Designers and developers make assumptions and don’t like to read documentation.
Design systems attempt to provide generalized solutions to a range of problems, but
are still very much constrained by the necessary assumptions made during creation.