Difference between revisions of "Aurora"

Aurora design system
Developer	Digital Collaboration Division
Initial release	September 24, 2018
Latest version	V1, September 24, 2018
Website	[1]
GitHub repository	Github Repository

Revision as of 14:29, 19 September 2018

Aurora design system is a central design guide developed in 2018 by the Digital Collaboration Division within the Treasury Board of Canada Secretariat of the Government of Canada. It was built through a collaborative effort between various designers, developers and writers across the Government of Canada. Lead by the Digital Collaboration Division at the Treasury Board of Canada Secretariat, Aurora design system was created in collaboration with the Canadian Digital Service: Talent Cloud, Immigration, Refugees and Citizenship Canada, and other individuals within Government of Canada. Aurora design system was created to standardize the visual language and user experience of the Open Accessible Digital Workplace's online applications and tools.

Overview

Aurora design system is a catalogue of user interface elements, writing style, guiding principles, coding standards, visual design, etc. for use in the Open Accessible Digital Workplace's applications. It was built in the open with contributions from developers, designers, writers and data scientists. Aurora design system is an ongoing project and will continue to be iterated on to increase the number of components available, expand its code and documentation, and improve its user experience attributes.

Mission Statement

Make a design system for the Government of Canada’s digital collaboration tools that can also be reused and applied to other public or internal digital services and products. This system will help to ensure a seamless experience for users across platforms, will be easy to use, and quick for developers and designers to implement. The design system will provide a basic framework with guiding principles and components, with the ability to be adapted to other brands and needs.

Principles

Aurora design system adheres to the following principles:

Simple and flexible: Provides all necessary elements without being restrictive. Aurora Design System is a lightweight system that can be adapted to suit a specific product.

Fun to use: Makes the job of developers and designers easier rather than add extra burdens or obligations to follow. Aurora Design System has an aesthetically pleasing design that is easy to navigate and adapt.

Re-usable: Suits a variety of needs. All components and principles are generic enough to be applied to a wide range of digital products. Code and design elements can easily be extracted to create new products, and communications guidelines are easy to understand and follow.

Diverse: Covers a variety of needs and types of products. Aurora Design System follows necessary Government of Canada obligations such as official languages and accessibility

Technology agnostic: Applicable to any technologic framework that a team decides to use for their project.

Open: To anyone who wishes to use it. All of Aurora Design System’s code is open source, and all other guidelines and elements are free to copy.

Project Team

Role	Name(s)	Team	Contact Information
Project Leads	Genevieve Lemieux Sierra Duffey	Digital Collaboration Division	genevieve.lemieux@tbs-sct.gc.ca sierra.duffey@tbs-sct.gc.ca
UX Researchers	Rebecca Jeong Alex Mesley Donna Monbourquette	Digital Collaboration Division	rebecca.jeong@tbs-sct.gc.ca alex.mesley@tbs-st.gc.ca donna.monbourquette@tbs-sct.gc.ca
Front-End (UI) Developers	Ethan Wallace Nick Pietrantonio Simon Roy Omar Nasr Daniel Spence	Digital Collaboration Division Health Canada Canada Revenue Agency	ethan.wallace@tbs-sct.gc.ca nicholas.pietrantonio@tbs-sct.gc.ca stephanie.lefebvre@tbs-sct.gc.ca simon.roy@tbs-sct.gc.ca omar.nasr@canada.ca daniel.spence@cra-arc.gc.ca
Graphic Designers	Michael Martel Sabrina Rowland-Cote Chuma Asuzu	Digital Collaboration Division IRCC	michael.martel@tbs-sct.gc.ca sabrina.rowland-cote@tbs-sct.gc.ca michael.asuzu@cic.gc.ca
Technical Writers	Marianne Aubrey Nneka Nnagbo	Digital Collaboration Division Canada Revenue Agency	marianne.aubrey@tbs-sct.gc.ca nneka.nnagbo@cra-arc.gc.ca
Partnership Liaison	Heather Laird	Digital Collaboration Division	heather.laird@tbs-sct.gc.ca
Consultants	Sean Boots Thomas Gohard Paul Jackson Gerardo Escandon	Canadian Digital Service OneGC (TBS) OneGC (TBS) Talent Cloud	sean.boots@tbs-sct.gc.ca thomas.gohard@tbs-sct.gc.ca paul.jackson@tbs-sct.gc.ca

Versions

Version One

Released on September 24th 2018, the first version of Aurora design system included HTML code, design elements and documentation for the following components:

alt text

Component Type	Component
Visuals	Colour Icons Typography
Standard	Avatars and thumbnails Badges Buttons Cards Divider/rule Grids and spacing System messaging Tags, chips and pills Tooltips
Navigation	Breadcrumbs Back to top Links Pagination and scrolling Search
Forms	Form design and labels Button inputs Errors and validation File upload Progress indicators Text inputs

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 research reports and example prototypes!

Sierra also wrote a [2]blog post outlining some of the key lessons learned from the project.

April 2018

The #GCdigital design team is hard at work creating a first draft of the #GCdigital design system. Browse through our Gitbook to see what's been done so far and what we're still working on!

The first phase of the design system will focus on key design elements, and a downloadable user interface (UI) kit. We are finishing the last few elements related to navigation, data visualizations and animations, as well as reviewing previous work.

Development work for the design elements will start mid-May. Interested in helping us code our components? Contact us!

January 24

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.

Update_January 24

January 10

On January 10th DCD will be launching it's first design sprint! We will be presenting some work we've done so far (mood boards, typography mock-ups) as well as giving a brief overview of working with Kanban boards, Github and agile development/design.

We will decide on a theme for our first sprint, and use any remaining time to start brainstorming ideas for specific elements, and uploading these brainstorming documents/inspiration boards to Github.

Sprint planning and working meetings will continue every second Wednesday at the same time and location.

Presentation: Update_January 10_DCD Meeting
Presentation: Sprint 1_Launch

December 5

On December 5 the DCD held a second design system meeting with partners. Here we did a quick review of our mission, guiding principles, hypothesis and phases identified in the first meeting. We also collaborated on three key questions: who will use the system? what is the system for? and what are the risks associated with designing this system?

We also took a look at some great resources such as the design process chart and MVP triangle (see below) to consider throughout the build of the design system.

Sierra gave a brief overview of the agile development method and how the DCD development team works on a daily basis. We will be following a similar method when building this design system, with each sprint cycle focusing on a particular theme.

We took some time to identify which roles and contributions are required for Phase I, and who can fulfill them. We decided that DCD will host future meetings and sprint planning/review (although location may alternate).

The DCD team also presented our key priorities/requirements for Phase I which were based on the parts checklist and a review of our UI inventory. Partners are encouraged to do the same and ensure that our key requirements are aligned prior to our first sprint.

We will a sprint planning meeting to launch our first sprint in January!

Research

Our studies

Examples of design systems

As guides, we will often refer to Semantic.ui and Google Material Design!

Shopify Polaris

Designers Italia

Oracle Alta UI

List of awesome design systems

Articles to read

Classification on Design Systems

Design Systems v. Pattern Libraries v. Style Guides

Selling a Design System Before Asking for Buy-In

Other resources

An excellent book on design systems Design systems
Microsoft Inclusive Design
The Actionable Guide to Starting your Design System (.pdf)
Why build a design system? (.pdf)
Ten Tips on Typography in Web Design

Planning

Mission Statement:

Make a design system for the Government of Canada’s digital collaboration tools that can also be reused and applied to other public or internal digital services and products. This system will help to ensure a seamless experience for users across platforms, will be easy to use, and quick for developers and designers to implement. The design system will provide a basic framework with guiding principles and components, with the ability to be adapted to other brands and needs.

Guiding Principles

Simple and flexible: a lightweight system that allows individual teams to adapt branding and other design elements to suit a specific project. The system will provide guidelines for all necessary elements without being restrictive.
Fun to use: the system itself will have a pleasing design that is easy for developers and designers to navigate and adapt to their needs. Using the system will make their jobs easier rather than add an extra burden or obligations to follow.
Re-usable: all components and principles included in the design system are generic enough to suit a variety of needs for multiple teams. Code and design elements can easily be extracted to create new products. Communications guidelines are easy to understand and follow.
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.
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.

Project Phases

Phase I: first prototype, design-focused elements and basic UI components. Includes elements that will be useful to all partners
Phase II: improvement on the first version. Includes second priority items such as templates, branding, editorial guidelines, research and data guidelines, layouts, etc. These elements are more specific to the GCTools rebuild.
Phase III: Includes elements that are “nice to haves”.More focus on process and guidelines, as well as customization for various partners/users of the system.
Phase IV: Continuous improvement and updates to thesystem. Promoting and pitching the system to other users. Opportunities for newpartnerships.

Files

Phase II project plan

Building

Agile Development

The DCD team currently works using the agile development model. We will be following this model to build the design system with a specific theme for each sprint cycle.

Basic concept of agile: deliver products and features based on a set of minimum requirements, then review and improve the product through multiple iterations. Tasks are broken into small chunks that can typically be completed within one sprint (two-weeks).

Work is divided into sprint cycles. Each sprint cycle lasts 2-weeks and has a planning meeting to start it off, and a review meeting to go over work completed during the sprint. Every few sprint cycles there are also retrospective meetings where the team meets to discuss and review processes and best practices.

Each sprint planning is led by a scrum-master (Sierra) who assigns team members to each specific task that has been identified for that sprint. Tasks are categories using a points-system which indicates the amount of effort/time required to complete the task. The goal is to complete as many points as possible by the end of the sprint (ideally all of the points that were assigned).

In the DCD team, code is stored and reviewed in a Github repository. This Github repository is connected to a service called Zube, which is a workspace where the scrum-master can manage and assign tasks.

Learn more

Phase I

Sections Completed

Base Elements (Jan 2 - Jan 24)
Visuals (Jan 24 - Feb 7)
Content (Feb 7 - Feb 21)
Forms (Feb 21 - Mar 28)
Navigation (Mar 28 - April 11)
Data Visualizations (April 11 - April 25)
User Interface Kit (April 25 - May 15)

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.

All tasks for the second phase will continue to be managed in the design system Github.

Phase II project plan (seen below)

Project plan for phase II of the GCdigital design system. The plan shows sprints 8 - 12

@@ Line 160: / Line 160: @@
 Released on September 24th 2018, the first version of Aurora design system included HTML code, design elements and documentation for the following components:
+[[File:ButtonsAurora.jpg|1200px|thumb|right|alt text]]
 {| class="wikitable"