QuLab

Web Platform: User Research | Storyboarding | Wireframes | UI + Visual Design | Video Editing

Overview

Duration

30 Weeks
Jan-Aug 2021

Team

Juan Carlos Santos
Angela Xu
Mary Li

Tools Used

Adobe Premiere
Figma
Miro
Procreate

Contribution

User Research
Ideation
Storyboarding
User Flows/IA
UI/Visual Design
Prototyping
Filming and Video Editing

Project Type

Capstone Project
Advised by Google

Problem Space

Like many sciences, technology, engineering, and mathematics (STEM) fields, Quantum Computing suffers from a lack of diversity, particularly hiring and keeping women professionals. This is due to many factors, including misogynistic and toxic attitudes both in academia and industry. Because of this, Quantum Computing suffers from the homogenization of perspectives, potentially leading it to repeat the same mistakes of classical computing and stagnation of innovation.

Design Challenge

How might we support and create opportunities for women in Quantum Computing to feel more empowered, included, and validated through their work and contributions?

Design Response

QuLab is an online platform intended to help women-identifying people and allies to build a supportive professional community by working on open source projects related to quantum computing.

Features

Discovery Based Browsing

A key feature and interaction of QuLab is to allow users to discover projects and help them get an overview of what is going on in the community. As the landing page of our platform, we’ve implemented a browsing page that works not only to help users see the breadth of things going on in the field, but also help them potentially find something they can be a part of while also spotlighting women.

Centralized Project Pages

A valuable feature for many users, is the centralization of open source projects and project resources on the platform, something not found in many other collaborative sites. Here, QuLab users are able to discover and collaborate with many projects in a single location, making it easier to get involved and engage with other users.

Comprehensive User Profiles

Knowing that a lot of the work potential women users live on many different platforms, it can be hard for others to get a full picture of what they’ve accomplished. To this extent QuLab’s profile pages highlights the user’s abilities, and accomplishments while also auto updating the profile as they continue to contribute to projects they have linked back to the platform.

Project Incubator

In order to foster its own projects, while also maintaining the platform’s values and supporting women, QuLab features a project incubator. Women can pitch their project ideas, which will be voted on by community members. The QuLab community can also chime in on pitches by commenting and suggesting additions or improvements to the idea.

Research Process

Guiding Research Question

In order to gain a better understanding of Quantum Computing and of the problem space we devised a core guiding question that would help inform and develop our research objectives and in turn the research questions we needed to answers to fulfill these objectives. This core question was:

What issues do women face in their career in Quantum Computing and how have they successfully overcome them?

Overview

To answer our guiding question we used different methodologies, recruiting and interviewing subject matter experts and participants to gather data.

Methodologies

Literature Review

Procedure

As part of our initial research phase and throughout the research process, we looked at secondary research from nearly 30 different sources including research papers and news articles.

Goal

Our initial literature review was intended to help inform us about the field, uncover its ongoing issues, and help us develop our objectives and research questions.

One of the referenced articles (from: https://spectrum.ieee.org/building-a-quantum-computing-workforce-from-the-ground-up)

Subject Matter Experts

Procedure

To learn more about our space, we spoke to 5 experts currently working or involved in the field of quantum computing. To get various perspectives we choose to interview experts with varying positions in the field ranging from a Quantum Evangelist to Academic Researchers/Professors to Community Managers.

Goal

From our experts we sought to understand better what career opportunities exist and how they and others entered the field, but also where and why people have exited the field.

Subject Matter Experts from left to right: Mark Jackson, Erin Riley, Dr. Debbie Leung

Semi-Structured Interviews

Procedure

We recruited 8 participants via LinkedIn cold calls and Quantum Computing interest groups. Through a semi-structured interview format, these participants were asked to discuss their professional experiences and journey in their respective position. We asked them about their roles, motivations and goals that they pursued within the field.

Goal

These interviews were intended to gather information on what it is to be an active professional in this field.

Interview with a participant. The participant’s screen is blurred to protect their privacy

Mapping Activity

Procedure

After the initial interview, participants were asked to participate in another session with a mapping activity. Using Google Slides, participants were directed to build out these relationships by using shapes/symbols and colors to identify who they were interacting with and rate experiences with them.

Goal

The aim of this activity was to have participants visualize their relationships with communities and people in their experience in the field of Quantum Computing.

Mapping activity with a participant. Parts of the image and activity are blurred to protect the participant’s privacy.

Competitive Analysis

Procedure

For the competitive analysis we selected 6 organizations and groups active in the Quantum Computing and STEM spaces who focused on education and community support to understand what community building methods are commonly employed.

Goal

With our competitive analysis, we wanted to learn what educational and community initiatives are out there for quantum computing and STEM and what they’re doing.

Spectrum mapping where competitors fell after our analysis.

Insights

Clustering of insights found throughout our research process

Through a process of affinity mapping, we grouped recurring and similar points of information into overarching themes. From this process we then identified 4 major insights:

Insight 01

Those who persevere through the judgement have all received positive peer support.

Participant Quote:

“I like cried one day at work, because, finally, after like two years, our top leadership came to me and basically said, ‘hey we’ve got this rough idea emphasis on rough and we want you to like change the way our product is organized and we want you to like recreate the vision for the product for like you know the next like year and a half, and it was just like, oh my God they finally care.”

-P4

Insight 02

Educating others help women feel control and ownership over Quantum Computing.

Participant Quote:

“Interacting with all students, I find rewarding[…] I like to give back in any way that I can, and I find that emotionally rewarding, so in that way you know it’s emotionally supportive, […] I just feel like I’m helping people.”

-P3

Insight 03

Women are taking it upon themselves to address issues in the community through different initiatives.

Participant Quote:

“I see the same few people gatekeep people out of the field, how much I see the same few prominent sexual harassers hurt people over and over again, you know. And the feeling that, if I can go make things easier to use, go make things more inclusive and more expansive, then maybe that gatekeeping doesn’t have to be that way.”

-P7

Insight 04

To achieve meaningful long term change, there needs to be diversity at the top.

Participant Quote:

“The people in the position to make decisions don’t necessarily buy in like they’ll say with words, yes, diversity is important to us, inclusion is important to us and then like nothing actually happens. So that’s, I think the biggest problem we face right now is buy in. From a lot of people who don’t fully grasp that this is an issue.”

-P1

Design Values and Opportunities

Based on the insights, we developed a series of core design values and actionable opportunities that would help guide us forward with developing a design solution.

Provide Shelter

Create a safe, inclusive, and non-judgemental space for women to make connections and build unity in the larger Quantum community.

Highlight Truth

Emphasize truthfulness by balancing hype and expectations of Quantum Computing with scientific rigor and integrity.

Normalize Experiences

Create internal support structures that amplify women’s voices and normalize their experiences to show them they’re not alone.

Showcase Achievements

Provide opportunities for recognition that allow women to show and validate their hard work.

Design Process

Conceptualization

Ideation

Based on our research, we generated approximately 60 potential ideas ranging from existing solutions we could leverage to futuristic concepts that were potentially unfeasible.

Original set of generated ideas by the whole team

Down Selection

From these initial ideas we grouped similar and/or complementing concepts into larger themes to facilitate a process of down selection and selected QuLab based on how well it aligned and fulfilled our design values and the user needs.

Clustering of final ideas to be down selected

User Flows and Storyboarding

Outlining Functions

With a settled concept to work with, we outlined the how the concept would ideally function, as well as the value propositions of this online platform and it’s potential key points.

Figuring out what value propositions and key interactions we wanted

User Flows

Having outlined the functions we wanted to integrate, user flows were created for the different ways user could interact with the platform.

Flows for joining the platform and projects

Information Architecture

Utilizing the flows, we were able to generate the potential information architecture to grasp the concept’s scale and pinpoint which parts were most important to develop a storyboard and visual prototype.

QuLab Information Architecture

Building a Story

From this we were able to begin to develop an initial story premise which we could utilize to highlight how we imagined the platform would function within our target audience.

Miro sticky notes used to write and move around our story elements

Crafting the Storyboard

A refined visual storyboard was then created utilizing digital drawings made by the team which were juxtaposed on stock images. Simple mock-up screens were also used to show how the platform would be used by different users.

Final version of our storyboard

Prototyping

Wireframing

Individual Wireframes

Knowing what we needed to build a mock-up of our concept from our prior design processes, we set out to develop our initial wireframes. To expedite the process, each team member generated their own preliminary layouts of some of the core screens.

Different wireframe ideas for the project page

Amalgamating Layouts

From these initial sets of wireframes, we identified aspects of each other’s wireframe that we believed were strong features and should be included in a more cohesive design.

Deciding which wireframe elements we want to integrate

Visual Design

Having combined our wireframes to create a set cohesive set of layouts, we then set out to do a similar process for our visual and UI design. Each team member came up with their own visual design concept to later be refined by the whole group.

Prospective visual designs for the project page

Once each team member completed their own visual design, we came again together to figure out which elements we felt were the strongest for our concept. From this, we came to our final visual/UI design for our core screens

Browse/Homepage
Incubator Overview
Form to pitch a new project
Project page: Values
Project page: Members/Contributors
Project page: Open Positions
Project page: Updates
User profile
Profile: Contact modal

Color Palette

To avoid making the platform feel too formal or intimidating, we chose a mix of bright and playful colors to create a sense creativity and an invitation to participate.

Primary colors used

Typeface

When selecting a typeface, it was important to make sure that it was not overly aggressive and masculine that might feel uninviting for women. We chose Quicksand for its versatility and for featuring soft rounded edges which evoke a neutral yet modern and inviting aesthetic.

Quicksand fonts used

User Interface/Component Library

The UI for QuLab is a custom designed to appear welcoming and clean by using a mix of geometric and rounded shapes. To help quickly build out screens that are modular we utilized this UI library throughout our designs.

Components used to build mock-ups

Video Showcase

Planning and Scripting

With the core screens of our concept completed, we then began to create a storyboard (based on the previous one) and script for a video prototype showing how QuLab works.

Storyboard detailing scenes and scripts

Filming

Filming for the showcase occurred over a period of a day. We located a multi-functional space where we could shoot multiple scenes in the same location to facilitate the filming process.

Video still of an unused shot

Video Editing

The filmed scenes were then taken into Adobe Premier to be cut and edited. Music and voice over were added in at this stage.

Editing scenes in Adobe Premier

Next Steps and Reflection

Next Steps

Because of the limited amount of time we had to complete this project we were not able to cover everything we wished to do. Thus, looking ahead, we plan to focus more on improving policy to support healthy community growth, leaning in on creating a safe space, as our current design relies more on self policing and personal accountability.

Reflection

Reflecting on this project, I think of it as a unique opportunity to have been able to participate in the direction that it did, and it shows the importance of research in design. We initially were brought on board to find a solution to get more people interested in the potential of Quantum Computing. However, as it turned out, people were already interested in it. The more significant problem was the turnover and poor treatment of women in the field, which led to our final designs.

Team Quantum and Company