BC Tech Ecosystem
Visualization

Duration
May - Aug 2021
Client
Microsoft Vancouver
Team
2 UX Designers
1 Project Manager
2 Developers
My role in the project
Research: Conducted interviews and domain research, planned and led user testing, analyzed testing results
Design: Concept development, craft lo-fi to mid-fi wireframes, refined features and interaction design for hi-fi prototype

The Big Picture

the problem
People find it difficult to piece together the evolution of the BC tech ecosystem to explore potential opportunities.
As a part of Microsoft's Open Data Campaign to close the 'data divide' between companies and countries through sourcing, sharing, collaborating around open data to help make better decisions and tackle societal challenges.
As a team, our mandate was simple: figure out what piques the interest of people who want to learn about the BC tech space and how to show the information engagingly.
Our solution
A single platform that simplifies complex industry data into interactive visualization to show the evolution of tech ecosystem in BC.

Working with constraints

Visualizations that enable us to test our concept
As a team, we had several sessions of ideation workshops to bounce ideas around. We pared it down to the most essential and compelling visualization concepts for an MVP through collaborating with stakeholders.
We had constraints that help us narrow down the scope and focus on testing our hypotheses: 
01
Time constraint of 3 month
02
Focus the data in the Metro Vancouver area
03
Start with desktop view
04
Use a design library with graph visualization

Analyzing existing products

Information on the BC tech space is unorganized
Although there are platforms that provide valuable information on the BC tech space, there are 3 key problems with existing solutions: 
Transparency of tech in BC
People don’t know what the BC tech ecosystem means to them, what it consists of, what tech sectors are thriving, and what’s the reason behind it. What’s happening in the current BC tech industry feels like a bubble. People outside the bubble don’t know what’s happening inside.
Scattered databases
Information about the local tech industry is scattered, and there’s no one source to show the tech evolution over time in BC and nowhere for people to check the latest data. We have the data and numbers, but they are boring, static, and non-interactive.
Difficult to see the big picture
Data and numbers are not engaging and are challenging for people to understand. Existing platforms only provide company-specific information without showing the macrospective of the tech ecosystem.

Getting to know the users

Designing for 3 different types of users
While our product is for anyone interested in the BC tech space, there are 3 specific target groups that we want to be mindful of when designing.

Navigating through ambiguity

Thinking outside of the box with worst possible ideas
When we were in the research phase, we felt lost because we couldn't find a reliable data source that we could use. To overcome this, we made the assumption that we had the all the data we need available. Then we started our ideating to come up with creative concepts.

Design exploration

Don’t stick with what you have, think big and focus on what is possible to have
After we came up with some design ideas as a group. We still had no clear direction about what the end product would look like. To unblock, I sketched down a few concepts represented by charts that would be useful and appealing to users.

The challenge

How might we visualize tech acquisitions through data visualization?
Through collaborating with stakeholders on our initial concepts, I received a clear understanding of the design direction and moved forward with five distinct concepts. One of the concepts that I worked on was the tech acquisition visualization.

Design principles
‍

The guide to keep everyone on the same page
Before we dive into design, we set up design principles that enable us to focus our energy on the key values and help us make design decisions and tradeoffs.
Change Over Time
See the growth of the tech ecosystem over time with a timeline on a yearly basis.
Dynamic & Interactive
Go beyond static reports. Help users explore by interacting with changing filter and timeline.
show, don't tell
Let the data speak for itself. Tell engaging stories by providing meaningful content for all user groups.
consistent colour code
Each key tech sector is assigned to a colour, and its corresponding sub tech sectors are assigned with the same colour in different shades.

Measuring success

Aligning our goals with viewers' goals
The overarching business goals of this project are to:
01
Provide a channel for anyone interested in BC's tech space to explore the evolution of the local tech ecosystem
02
Attract investors, entrepreneurs, and job seekers to see the potential in BC
03
Pitch provincial and municipal government for more funding on the tech sector
Success metrics
01
Page view
02
Session Duration
03
Bounce Rate

Solving the design challenge

How might we visualize tech acquisitions through data visualization?
Through collaborating with stakeholders on our initial concepts, I received a clear understanding of the design direction and moved forward with five distinct concepts. One of the concepts that I worked on was the tech acquisition visualization.
Iteration 1: Exploring the concept
Through exploring tech acquisition graphs, I decided to use a bubble chart because users can compare the valuation of each tech acquisition at a glance. I intended to show the valuation of each tech acquisition with a circle and represent tech sectors with different colour codes. Yet, it didn't turn out to be straightforward to interpret.
💡 Reflection
  • Through user testing, I discovered showing many tech sectors is overwhelming. It created too much cognitive load for users to digest the information.
  • The meaning of the circle is confusing. Some think it's a company and others think it's a tech sector.
  • While testing edge cases, I realized that coloured circles don't work well with coloured company logos. The blend of the two is not legible.
  • The circles that represent small tech acquisitions are too small to fit in their logos, making the visualization inconsistent and confusing.
  • Through collaborating with developers, I realized that the UI of the data visualization need to be aligned with graph visualization design library due to time constraint.
Iteration 2: Rethinking what we are trying to convey
Based on what I learned from iteration 1:
  • As a team, we grouped the tech sectors into 5 key tech sectors with specific sub tech sectors and applied the convention across all concepts.
  • I re-defined the meaning of circles from representing companies to tech sectors to align with our goal of focusing on the bigger picture of tech acquisition in Vancouver.
  • I explored 2 designs with different y-value and z-value(size of the circle) to see which one is more straightforward.
💡 Reflection
  • Through collaborating with developers, I realized the bubble graph visualize information through 3 different values: x, y, and z-values. We could utilize these 3 different values to convey more information on tech acquisition.
  • During our internal testing, both approaches seem reasonable and understandable. I decided to test both approaches with real data to check for any corner cases.
Iteration 3: Plugging in the real data
Based on the reflection, I started looking for real tech acquisition data in Vancouver in 2020.
  • I found that 80% of the tech acquisition in Vancouver are undisclosed.
  • I added the sidebar to provide the breakdown of the number of disclosed and undisclosed tech acquisitions for each tech sector. It better describes the entire acquisition scene in Vancouver.
💡 Reflection
Through testing real data, I realized some tech sectors have more disclosed acquisitions than others, forming a huge circle in design exploration 1. The dramatic circle size difference might confuse users. The small circles cannot capture people's attention because they are too small to see. Therefore, I suggested the team to move forward with design exploration 2.

Final design

Project outcome

Building the foundation for future development
After presented to the stakeholders, they were very happy with the outcome of the project. They said that both the working prototype and the project learnings delivered by the team will form the foundation of knowledge needed to advance development of the BC Technology Ecosystem Dashboard in the future and make this project a reality for BC's tech sector.

Reflection

Challenges, pivots & takeways...
Who are the real users? 
In the beginning of the project, we were told that job seeker is our primary user as they are expected to use our platform most frequently. After we explored the problem space, we learned that our user is anyone who is interested in the tech space in Vancouver with focus on investors and entrepreneurs so that we can garner tech innovation and entrepreneurship with our great talent pool.
Finding a reliable data source
At its core, this project is about visualizing data and making it engaging. When the project first started, the thought of finding reliable and useable data hindered our creativity. To get our creative juices running, we temporarily removed the constraint of using existing data and assume that we have access to any data. In doing so, we started sketching some fun and engaging data visualization ideas.

Heading

This is some text inside of a div block.
This is some text inside of a div block.

Next Project

Dangle
Major Tom
An E-commerce ad network that connects consumer packaged goods brands with independent grocery stores to promote products.
Research
Interaction design
visual design
branding
prototyping
View project