wiki

Changes

GCDigital design system (view source)

Revision as of 10:24, 17 September 2018

718 bytes added ,  10:24, 17 September 2018
m
no edit summary
Line 1: Line 1:  +
{{DISPLAYTITLE:Aurora Design System}}
 +
 
[[File:Design_system.png|345x345px]]
 
[[File:Design_system.png|345x345px]]
    
* [https://github.com/gctools-outilsgc/design-system Github Repository]
 
* [https://github.com/gctools-outilsgc/design-system Github Repository]
−
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/ Documentation]   
+
* [https://github.com/gctools-outilsgc/design-system/tree/master/documentation/pages Documentation]   
   −
Information about the design system project started by the Digital Collaboration Division (GCTools) in collaboration with the Canadian Digital Service, Immigration, Refugees and Citizenship Canada, Talent Cloud, and TBS Interoperability.   
+
Information about the design system project started by the Digital Collaboration Division (GCTools) in collaboration with the Canadian Digital Service, [[Immigration, Refugees and Citizenship Canada (IRCC)|Immigration, Refugees and Citizenship Canada]], Talent Cloud, and [[Treasury Board Secretariat (TBS)|TBS]] Interoperability.   
    
'''What is a design system?'''
 
'''What is a design system?'''
Line 14: Line 16:  
Building a design system is a collaborative effort and requires expertise across all fields in web/application design. A design system takes into account '''all aspects''' of the product and encompasses all levels of the user and the creator’s experience. 
 
Building a design system is a collaborative effort and requires expertise across all fields in web/application design. A design system takes into account '''all aspects''' of the product and encompasses all levels of the user and the creator’s experience. 
   −
'''Why do we want to build one?''' 
+
'''Why do we want to build one?'''
 
* Consistency across applications and platforms, particularly taking into consideration the rebuild of the GCTools or other digital collaboration services. 
 
* Consistency across applications and platforms, particularly taking into consideration the rebuild of the GCTools or other digital collaboration services. 
−
* Partnership opportunities with interested communities, including the Canadian Digital Service, Talent Cloud, other teams in CIOB, and the design team at IRCC. 
+
* Partnership opportunities with interested communities, including the Canadian Digital Service, Talent Cloud, other teams in CIOB, and the design team at [[Immigration, Refugees and Citizenship Canada (IRCC)|IRCC]]. 
 
* Saves development and design time since components are reusable and effectively organized. Would complement the agile development process by removing the need for multiple design and UI iterations.  
 
* Saves development and design time since components are reusable and effectively organized. Would complement the agile development process by removing the need for multiple design and UI iterations.  
 
* Specifications for designing new features are determined right from the start, so more time can be spent on business and complex decisions. Less focus on repetitive design problems throughout the process of new development. 
 
* Specifications for designing new features are determined right from the start, so more time can be spent on business and complex decisions. Less focus on repetitive design problems throughout the process of new development. 
Line 40: Line 42:     
Donna Monbourquette
 
Donna Monbourquette
−
Gerardo Escandon
   
|Digital Collaboration Division
 
|Digital Collaboration Division
   −
Talent Cloud
   
|rebecca.jeong@tbs-sct.gc.ca
 
|rebecca.jeong@tbs-sct.gc.ca
 
alex.mesley@tbs-st.gc.ca
 
alex.mesley@tbs-st.gc.ca
Line 52: Line 52:  
|[https://gcconnex.gc.ca/profile/Ethan.Wallace Ethan Wallace]
 
|[https://gcconnex.gc.ca/profile/Ethan.Wallace Ethan Wallace]
 
[https://gcconnex.gc.ca/profile/Nicholas.Pietrantonio Nick Pietrantonio]
 
[https://gcconnex.gc.ca/profile/Nicholas.Pietrantonio Nick Pietrantonio]
−
  −
Stephanie Lefebvre
      
Simon Roy
 
Simon Roy
Line 103: Line 101:     
Paul Jackson
 
Paul Jackson
 +
 +
Gerardo Escandon
 
|Canadian Digital Service
 
|Canadian Digital Service
 
OneGC (TBS)
 
OneGC (TBS)
    
OneGC (TBS)
 
OneGC (TBS)
 +
 +
Talent Cloud
 
|sean.boots@tbs-sct.gc.ca
 
|sean.boots@tbs-sct.gc.ca
   Line 115: Line 117:     
== Latest Updates and Key Files ==
 
== Latest Updates and Key Files ==
 +
'''June 2018'''
 +
 +
Now in Phase II, the design team has split into smaller working teams, including developers, writers, designers, and UX researchers. We are conducting usability testing on some of our elements, developing style sheets and HTML components, and creating wire-frames to build the first iteration of the design system website.
 +
 +
The first iteration of the design system is in review. We are making small changes to components, ensuring consistency in our UI kit, and editing documentation. Take a look at our Github for some of our [https://github.com/gctools-outilsgc/design-system/tree/master/ux%20testing research reports] and [https://github.com/gctools-outilsgc/design-system/tree/master/page%20prototypes example prototypes]!
 +
 +
Sierra also wrote a [https://medium.com/@s.duffey121/7-things-i-learned-from-leading-a-design-project-7b003d25b5e2][[DCD Blogs/7 Things I Learned from Leading a Design Project|blog pos]]<nowiki/>t outlining some of the key lessons learned from the project.
 +
 
'''April 2018'''
 
'''April 2018'''
   Line 131: Line 141:  
The majority of the cards from our first design sprint were completed. The DCD team got together and categorized elements into different sprints, for a total of 8 sprints to complete Phase I. We created a project timeline (see below) to determine dates and expectations for Phase I, with the last sprint completing on May 2, 2018. At this point all the elements (incl. design files, documentation and code) will be available on Github. This UI Kit and documentation will be useful for prototyping new products and features.  
 
The majority of the cards from our first design sprint were completed. The DCD team got together and categorized elements into different sprints, for a total of 8 sprints to complete Phase I. We created a project timeline (see below) to determine dates and expectations for Phase I, with the last sprint completing on May 2, 2018. At this point all the elements (incl. design files, documentation and code) will be available on Github. This UI Kit and documentation will be useful for prototyping new products and features.  
 
* '''[[:File:Design System Update Jan 24.pptx|Update_January 24]]'''
 
* '''[[:File:Design System Update Jan 24.pptx|Update_January 24]]'''
 +
 
'''January 10'''
 
'''January 10'''
   Line 140: Line 151:  
* [[:File:Design System Update Jan 10.pptx|'''Presentation: Update_January 10_DCD Meeting''']]
 
* [[:File:Design System Update Jan 10.pptx|'''Presentation: Update_January 10_DCD Meeting''']]
 
* '''Presentation: Sprint 1_Launch'''
 
* '''Presentation: Sprint 1_Launch'''
 +
 
'''December 5'''
 
'''December 5'''
   Line 157: Line 169:     
== Research ==
 
== Research ==
 +
 +
==== Our studies ====
 +
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Mood Board Survey]]
 +
* [[:File:Results DS Information Architecture.pdf|Card-Sorting: Information Architecture]]
 +
* [[:File:Report typography and data viz testing.pdf|Report: Typography and Data Visualizations]]
 +
* [[:File:Design system architecture final.pdf|Final Architecture for Design System]]
    
==== Examples of design systems ====
 
==== Examples of design systems ====
Line 215: Line 233:  
* '''Diverse:''' The design system will cover a variety of needs and types of products. The system will also cover necessary government obligations such as official languages and accessibility.
 
* '''Diverse:''' The design system will cover a variety of needs and types of products. The system will also cover necessary government obligations such as official languages and accessibility.
 
* '''Technology agnostic:''' the design system is applicable regardless of which technology framework the team decides to use for their project.
 
* '''Technology agnostic:''' the design system is applicable regardless of which technology framework the team decides to use for their project.
−
* '''Open:''' the design system will be open and accessible to anyone who wishes to use it. All code is open source, and other guidelines and elements are free to copy.
+
* '''Open:''' the design system will be open and accessible to anyone who wishes to use it. All code is open source, and other guidelines and elements are free to copy.<br>
−
 
  −
<figure-inline class="mw-default-size">[[File:MVP_triangle.png|1000x1000px]]</figure-inline>
  −
 
  −
 
   
==== Project Phases ====
 
==== Project Phases ====
 
* '''Phase I:''' first prototype, design-focused elements and basic UI components. Includes elements that will be useful to all partners
 
* '''Phase I:''' first prototype, design-focused elements and basic UI components. Includes elements that will be useful to all partners
Line 238: Line 252:  
* [https://github.com/gctools-outilsgc/design-system '''Github Repository''']
 
* [https://github.com/gctools-outilsgc/design-system '''Github Repository''']
 
* '''[https://www.gitbook.com/book/s-duffey/-gcdigital-design-system/details Gitbook for documentation]'''
 
* '''[https://www.gitbook.com/book/s-duffey/-gcdigital-design-system/details Gitbook for documentation]'''
−
* [https://github.com/cds-snc/gcui CDS GC UI]
   
* [https://zube.io/tbs-sct/design-system/w/main-workspace/kanban '''Design System Zube board''']
 
* [https://zube.io/tbs-sct/design-system/w/main-workspace/kanban '''Design System Zube board''']
   Line 258: Line 271:     
=== Phase I ===
 
=== Phase I ===
−
* Visual Language (colour, typography, iconography, motion)
+
==== Sections Completed ====
−
* UI Elements (buttons, form controls, text)
+
* Base Elements (Jan 2 - Jan 24)
−
* UI Components (i.e. footers, headers, comments, navigation)
+
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/typography Visuals] (Jan 24 - Feb 7)
−
* UI Patterns (form structure)
+
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/images-and-media Content] (Feb 7 - Feb 21)
−
* Downloads/Resources (Illustrator, Photoshop or Sketch files available for download)
+
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/forms-overall-design-and-labels Forms] (Feb 21 - Mar 28)
−
==== Project Timeline ====
+
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/nav-breadcrumbs Navigation] (Mar 28 - April 11)
−
<figure-inline>[[File:DS Project Timeline.JPG|1152x1152px]]</figure-inline>
+
* [https://gctools-outilsgc.gitbook.io/-gcdigital-design-system/data-overview Data Visualizations] (April 11 - April 25)
−
 
+
* [https://github.com/gctools-outilsgc/design-system/tree/master/user%20interface%20kit User Interface Kit] (April 25 - May 15)  
−
==== Design Sprints ====
  −
{| class="wikitable"
  −
!Sprint Number
  −
!Date
  −
!Key Elements
  −
!Research
  −
!Documentation
  −
!Notes
  −
|-
  −
|Sprint 1
  −
|Jan. 10 -24
  −
| - Typography
  −
- Colour
  −
 
  −
- Buttons
  −
|
  −
| - Introduction
  −
-FAQS
  −
 
  −
- Additional Resources
  −
|
  −
|-
  −
|Sprint 2: Visuals
  −
|Jan 24 - Feb. 7
  −
| - Motion and transitions
  −
- Space and Grids
  −
 
  −
- Icons
  −
 
  −
- Buttons cont'd
  −
| - user testing for mood boards
  −
| - Finish colour and buttons
  −
|Grids based on Bootstrap 4
  −
Icons from Font Awesome or similar
  −
|-
  −
|Sprint 3: Content
  −
|Feb. 7 - 21
  −
| - Site messaging
  −
- Video and Media
  −
 
  −
- Images
  −
| - testing on buttons
  −
- accessibility review for typography
  −
|
  −
|
  −
|-
  −
|Sprint 4: Forms
  −
|Feb, 21 - Mar. 7
  −
| - form elements
  −
| - testing on site messaging
  −
|
  −
|
  −
|-
  −
|Sprint 5: Forms Extended
  −
|Mar. 7 - 21
  −
| - cards
  −
- calendar picker
  −
 
  −
- slider
  −
 
  −
- comments
  −
| - testing on forms
  −
|
  −
|
  −
|-
  −
|Sprint 6: Navigation
  −
|Mar. 21 - Apr. 4
  −
| - navigation
  −
- pagination
  −
 
  −
- breadcrumbs
  −
 
  −
- tabs
  −
 
  −
- sidebar
  −
 
  −
- menus
  −
 
  −
- search
  −
| - testing elements from extended forms
  −
|
  −
|
  −
|-
  −
|Sprint 7: Data Visualizations
  −
|Apr. 4 - April 25
  −
| - data visualizations
  −
- accessibility principles
  −
 
  −
- catch-up
  −
| - testing for navigation elements
  −
|
  −
|
  −
|-
  −
|Sprint 8: Putting it Together
  −
|Apr. 25 - May 15
  −
| - templates (UI Kit)
  −
| - UX and IA for website
  −
| - edit documentation as a whole
  −
|
  −
|}
      
=== Phase II ===
 
=== Phase II ===
Line 373: Line 286:  
* [[:File:Design System Phase II project plan.xlsx|Phase II project plan]] (seen below)  
 
* [[:File:Design System Phase II project plan.xlsx|Phase II project plan]] (seen below)  
 
[[File:Design system phase II Gantt chart.JPG|alt=Project plan for phase II of the GCdigital design system. The plan shows sprints 8 - 12|left|1118x1118px|Project plan for Phase II of the design system. Sprint 8 - 12]]
 
[[File:Design system phase II Gantt chart.JPG|alt=Project plan for phase II of the GCdigital design system. The plan shows sprints 8 - 12|left|1118x1118px|Project plan for Phase II of the design system. Sprint 8 - 12]]
 +
[[Category:Digital Government]]
 +
[[Category:GCTools]]
 +
[[Category:User Experience]]
 +
[[Category:Design]]
 +
[[Category:Web Design]]
 +
[[Category:Aurora Design System]]
 +
[[Category:Design System]]
Retrieved from "https://wiki.gccollab.ca/Special:MobileDiff/1944...5122"