wiki

Changes

GCDigital design system (view source)

Revision as of 10:24, 17 September 2018

599 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 16: Line 18:  
'''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 117: Line 119:  
'''June 2018'''
 
'''June 2018'''
   −
In phase II, our team has grown and broken into smaller task-based teams. Developers are working on developing our components in HTML and CSS. Designers are reviewing the user interface and making changes as necessary. Writers are putting together editorial guidelines to add to the system, and graphic designers are starting to determine templates and layout designs that we can add to the system.  
+
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.  
   −
In late May we also conducted a card-sorting activity to determine the information architecture for the design system website. We are creating wireframes based on these results and making a front-end site that will be easily navigable for developers, designers, writers and collaborators. Development on the site has started and it will be populated with our documentation and design files shortly!
+
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 168: Line 172:  
==== Our studies ====
 
==== Our studies ====
 
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Mood Board Survey]]
 
* [[:File:GCTools Design System - Mood Board Heatmap 2018 short.pdf|Mood Board Survey]]
−
* Card-Sorting: Information Architecture
+
* [[: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 227: 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 278: Line 280:  
* [https://github.com/gctools-outilsgc/design-system/tree/master/user%20interface%20kit User Interface Kit] (April 25 - May 15)  
 
* [https://github.com/gctools-outilsgc/design-system/tree/master/user%20interface%20kit User Interface Kit] (April 25 - May 15)  
   −
==== Phase II ====
+
=== Phase II ===
 
Starting on May 17, after the Blueprint Innovation Fair, the design system team will kick off phase II of the project. Phase II includes development work for components designed in phase I; writing, branding and accessibility guidelines, as well as user testing and design work for page templates and additional components.  
 
Starting on May 17, after the Blueprint Innovation Fair, the design system team will kick off phase II of the project. Phase II includes development work for components designed in phase I; writing, branding and accessibility guidelines, as well as user testing and design work for page templates and additional components.  
   Line 289: Line 291:  
[[Category:Design]]
 
[[Category:Design]]
 
[[Category:Web Design]]
 
[[Category:Web Design]]
 +
[[Category:Aurora Design System]]
 +
[[Category:Design System]]
Retrieved from "https://wiki.gccollab.ca/Special:MobileDiff/2749...5122"