The Process
The design process for this project followed an iterative, five step journey as seen below.
Research
Our research phase was dedicated to understanding how the DFO team currently uses design systems in their workflow and who their primary users were. We wanted to identify major pain points within the existing process of using design artifacts in the DFO and identify the goals and expectations of various stakeholders, including those in design, development, and marketing, regarding a shared design system.
Conducting Interviews
Semi-structured interviews were conducted with employees from the DFO to gather qualitative information. They revealed a variety of key insights in their workflow regarding design: Organizational Constraints: there are very few design team members across the department
- Lack of Consistency: there is a lack of clear design standards due to conflicting government bodies
- Lack of Collaboration: there is low to zero collaboration between teams and departments
- Organizational Constraints: there are very few design team members across the department
Developing Personas
Given the variety of feedback, our team recognized the importance of having a shared artifact that stakeholders could reference to understand the various perspectives that need to interact with a design system in their daily work. I helped create three task-based personas at this stage.
These personas were shared across the project team to identify the needs of users based on the work they completed within the department. During our ideation phase, we explored design opportunities that corresponded with the needs of these task-based personas.
Ideation
Equipped with a better understanding of our users and their pain points and needs, it was time for our team to start thinking about potential solutions. We approached solution development through a collaborative approach.
Affinity Mapping
Our team grouped user needs and ideas to address them into different colours and groups on Figma. Some initial categories included:
- Solutions for creating consistency:
- Examples - Q&A website, policy development - Solutions for increasing collaboration:
- Examples: Shared department workspace - Solutions for support design maturity:
- Examples: design system, information repository
Affinity mapping completed on Figma.
Exploring User Journey via Storyboards
To further support the affinity mapping exercise, I wanted to consider optimal user journeys for different roles at the DFO. Based on user insights generated from interviews, I created storyboards to outline potential user journeys that considered an optimal user experience.
The Developer User Journey
The Designer User Journey
.png)
Final Outcome: Design Repository
Following the presentation of design artifacts, an analysis of user needs and best practices, and discussions with stakeholders, our team identified a design repository as a potential solution to address the needs of employees at the DFO.
Prototyping
Now that our team had identified a potential solution to pursue, we needed to work towards prototyping our design solution. We started with user research before proceeding to create Figma prototypes.
Card Sorting
In order to define the information architecture of the design repository, I organized and helped facilitate the distribution of a digital, open card-sorting activity on Optimal Workshop. Our team came up with a list of topics to include in the repository based on user needs and asked participants to group them in categories of their own making. Some categories that emerged included:
- Accessibility
- Tools
- Design Principles
These categories helped inform the structure of our prototypes.
An open card-sort category created on Optimal Workshop.
Low-fidelity prototypes
Our team conducted moderated user testing with these low-fidelity prototypes to identify areas of confusion. Our high-fidelity prototypes included changes based on user feedback from these sessions.
.png)
A low-fidelity wireframe of the design repository’s landing page.
A low-fidelity wireframe of the design repository’s “Design Principles” page.
High-fidelity prototypes
High-fidelity prototypes considered user feedback by restructuring information architecture, adding clear headers to pages and using iconography to support buttons and menu options.
.png)
A high-fidelity wireframe of the design repository’s landing page.
A high-fidelity wireframe of a component page for checkboxes in the design repository.
Testing and Iteration
After developing a fully interactive prototype on Figma based on insights from user research and stakeholder feedback, it was time for us to test our designs.
Unmoderated Testing
I worked with my team to organize and execute unmoderated user testing using Waze and Figma. We recorded qualitative and quantitative data through user performance metrics and survey response data on Waze.
Leveraging User Feedback
Looking at the research data, we found our users had highlighted alternative pathways to complete tasks, as well as areas with unclear labels or bugs. We used this feedback to further iterate and improve our prototype.
Conclusion
After additional changes to the prototype based on testing data, our team finalized an interactive, high-fidelity prototype for the DFO. We consolidated our findings and research from the design process into a final report and presentation for the DFO. The DFO shared that they would be using our findings to support the development of design resources for their department.
.png)
A high-fidelity wireframe of the design repository’s landing page on a laptop.
Reflection
This project taught me how to work in an agile environment on a product with a diverse user population. Looking back, there are some things I would have liked to have done to improve the design process.
Increase Collaborative Ideation Outside of Project Team
I recognize the importance of involving users in the design portion of the design process. If I were to do this project again, I would be curious about how we could explore potential solutions in a more collaborative manner that creates opportunities for co-creation with users.
Consistently Emphasize Accessibility
Rather than considering WCAG and accessibility requirements during the prototyping stage, I would like to explore opportunities to introduce accessibility from the start of the project to ensure it is integrated at every stage of the design lifecycle.
.png)