Astro Yan
Product Designer
Canner | May 2022 – Jan 2023
Canner | May 2022 – Jan 2023
Data access platform: Empower teams to discover and analyze data faster and securely
Data access platform: Empower teams to discover and analyze data faster and securely
I led the market/user research and redesign to improve the data access workflow. Increased data analytics productivity 80% for the client. Helped the company achieved 75% YoY revenue growth within a year.
I led the market/user research and redesign to improve the data access workflow. Increased data analytics productivity 80% for the client. Helped the company achieved 75% YoY revenue growth within a year.
Background
Background
About Canner
About Canner
Canner is a startup focusing on data access, and our product vision is empower the organizations with self-service data access from anywhere.
Canner is a startup focusing on data access, and our product vision is empower the organizations with self-service data access from anywhere.
In 2021, after launching Canner Enterprise 1.0, we received various client requests based on different use cases and feedback on improving the existing user experience.
In 2022, I joined the team as the first product designer, leading the redesign to address key challenges and successfully launching Canner Enterprise 2.0, which increased the client's data analysis productivity by 80%.
In 2021, after launching Canner Enterprise 1.0, we received various client requests based on different use cases and feedback on improving the existing user experience.
In 2022, I joined the team as the first product designer, leading the redesign to address key challenges and successfully launching Canner Enterprise 2.0, which increased the client's data analysis productivity by 80%.
Responsibilities
Responsibilities
Research data market trends.
Conduct user interviews with data engineers and analysts.
Share market trends and research insights with the team.
Communicate with the developer and sales team to explain why and what we designed.
Deliver design strategies and user interface.
Research data market trends.
Conduct user interviews with data engineers and analysts.
Share market trends and research insights with the team.
Communicate with the developer and sales team to explain why and what we designed.
Deliver design strategies and user interface.
Challenges
Challenges
Design a complex and highly technical B2B product.
Build design process and collaborative culture with developer team from scratch.
Design a complex and highly technical B2B product.
Build design process and collaborative culture with developer team from scratch.
Customers
Customers
Our customers come from banking, manufacturing, and E-commerce.
Our customers come from banking, manufacturing, and E-commerce.
Key Problems
Key Problems
It often took 5 to 7 days for the data team to deliver the right dataset to the business team— making ad hoc analysis slow, and often too late to be useful.
It often took 5 to 7 days for the data team to deliver the right dataset to the business team— making ad hoc analysis slow, and often too late to be useful.
Goal
Goal
Optimize the data access workflow to provide a smoother user experience to enhance productivity for data team and business team.
Optimize the data access workflow to provide a smoother user experience to enhance productivity for data team and business team.
Team
Team
Here are the amazing colleagues who work together to create our products. We are a team that works remotely 80% of the time, with members from different cities in Taiwan and some in Malaysia.
Here are the amazing colleagues who work together to create our products. We are a team that works remotely 80% of the time, with members from different cities in Taiwan and some in Malaysia.
CTO (PM): William Chang
Front-End: Freda Lai, Shimin Wong, Star You
CTO (PM): William Chang
Front-End: Freda Lai, Shimin Wong, Star You
User Research
User Research
Research Goal
Research Goal
01
01
Deeply understand the real-world data access scenarios between data team and business team.
Deeply understand the real-world data access scenarios between data team and business team.
02
02
Understand current users' problem with our product.
Understand current users' problem with our product.
Insights
Insights
01
01
The flow of data access in real-world
The flow of data access in real-world
02
02
Manual effort in writing SQL code for masking sensitive data
Manual effort in writing SQL code for masking sensitive data
“
Masking data can be time-consuming and involves many repetitive processes. For example, I need to mask customer identity card information in 10 tables, I have to write 10 separate SQL statements to finish this task.
-Client A,C,D
Masking data can be time-consuming and involves many repetitive processes. For example, I need to mask customer identity card information in 10 tables, I have to write 10 separate SQL statements to finish this task.
-Client A,C,D
Masking data can be time-consuming and involves many repetitive processes. For example, I need to mask customer identity card information in 10 tables, I have to write 10 separate SQL statements to finish this task.
-Client A,C,D
03
03
Data lack of business knowledge requires a lot of time for communication
Data lack of business knowledge requires a lot of time for communication
“
The meaning of data is understood by technical people, like database admins, who know the schema, but it lacks business meaning. I have to spend a lot of time communicating with them to get the right data I need.
-Client A,B,E
The meaning of data is understood by technical people, like database admins, who know the schema, but it lacks business meaning. I have to spend a lot of time communicating with them to get the right data I need.
-Client A,B,E
04
04
Sidebar focuses on function navigation instead of data
Sidebar focuses on function navigation instead of data
“
When managing multiple databases or data warehouses, I need to frequently switch pages to find the data.
-Client A, B, C, E
When managing multiple databases or data warehouses, I need to frequently switch pages to find the data.
-Client A, B, C, E
Design DeliverableS
Design DeliverableS
Create the consistent business knowledge for data
Create the consistent business knowledge for data
Add business metadata to their resources, like data warehouses, tables, and columns. This helps them quickly understand if a dataset fits their needs. For example, they can label a table "Sales Data FY2024" or describe a column's content, helping business team and data team can commute more efficiently.
Add business metadata to their resources, like data warehouses, tables, and columns. This helps them quickly understand if a dataset fits their needs. For example, they can label a table "Sales Data FY2024" or describe a column's content, helping business team and data team can commute more efficiently.
Navigation hub for your all data
Navigation hub for your all data
Redesign the sidebar from a functional list to a data-centric list, focusing on data as the key element of the interface. This new structure allows users to quickly and easily locate the resources, such as databases and data warehouses, they need. By simply clicking on a list item, users are seamlessly navigated to the corresponding resource details page.
Redesign the sidebar from a functional list to a data-centric list, focusing on data as the key element of the interface. This new structure allows users to quickly and easily locate the resources, such as databases and data warehouses, they need. By simply clicking on a list item, users are seamlessly navigated to the corresponding resource details page.
Design Solution: Build data policy once, apply for any data
Design Solution: Build data policy once, apply for any data
Design a flexible data policy builder that allows users to define masking rules once and apply them to any relevant data. This approach ensures consistency, efficiency, and scalability in data protection.
Design a flexible data policy builder that allows users to define masking rules once and apply them to any relevant data. This approach ensures consistency, efficiency, and scalability in data protection.
01
01
Categorized use cases – Users can select predefined masking rules based on common data types (e.g., addresses, dates of birth).
Categorized use cases – Users can select predefined masking rules based on common data types (e.g., addresses, dates of birth).
02
02
Built-in masking patterns – The system provides commonly used patterns, reducing manual effort and ensuring compliance with data privacy standards.
Built-in masking patterns – The system provides commonly used patterns, reducing manual effort and ensuring compliance with data privacy standards.
03
03
Example preview – Users can see the output before applying, improving clarity and reducing errors.
Example preview – Users can see the output before applying, improving clarity and reducing errors.
When you finish creating the policy, simply select the table and column to apply it to.
When you finish creating the policy, simply select the table and column to apply it to.
In each data source, you can track the tables and columns to which each data policy applies.
In each data source, you can track the tables and columns to which each data policy applies.
Impacts
Impacts
75%
75%
YoY revenue growth
YoY revenue growth
Helped the company sign 5 major clients from leading financial and manufacturing companies.
Helped the company sign 5 major clients from leading financial and manufacturing companies.
80%
80%
data analytics productivity
data analytics productivity
Helped teams access the data from 5 days to 1 day, empowering teams to make faster, data-driven decisions.
Helped teams access the data from 5 days to 1 day, empowering teams to make faster, data-driven decisions.
Design Trade-offs
Design Trade-offs
Create business knowledge
Create business knowledge
01
01
Form-based (Selected Option)
Pros: Maintains consistency across the product, aligning with existing interaction patterns.
Cons: Requires more steps to create and update metadata, slightly increasing user effort.
Form-based (Selected Option)
Pros: Maintains consistency across the product, aligning with existing interaction patterns.
Cons: Requires more steps to create and update metadata, slightly increasing user effort.
02
02
Edit cell directly
Pros: More efficient, allowing users to edit metadata directly within the table with fewer clicks.
Cons: Edit table interaction patterns across the product, potentially causing inconsistencies in user expectations and behavior.
Edit cell directly
Pros: More efficient, allowing users to edit metadata directly within the table with fewer clicks.
Cons: Edit table interaction patterns across the product, potentially causing inconsistencies in user expectations and behavior.
👉 We chose the form-based approach to ensure a consistent user experience across the platform, even though it required more steps. This decision balanced usability and long-term product coherence.
👉 We chose the form-based approach to ensure a consistent user experience across the platform, even though it required more steps. This decision balanced usability and long-term product coherence.
Sidebar Interaction
Sidebar Interaction
01
01
Fixed sidebar (initial)
Pros: Easy to implement
Cons: Lacked flexibility and scalability.
The team selected for Option 1 (Fixed Sidebar) due to its ease of implementation. However, I pushed back on this decision for two key reasons after we did user testing to test the usability.
Readability issues – When data names are too long, the fixed sidebar lacks flexibility, making it difficult to read the full names.
Scalability Concerns – The table on the right is expected to have more columns added in the future. A fixed sidebar would limit the available space, making it harder to view and explore the data efficiently.
Fixed sidebar (initial)
Pros: Easy to implement
Cons: Lacked flexibility and scalability.
The team selected for Option 1 (Fixed Sidebar) due to its ease of implementation. However, I pushed back on this decision for two key reasons after we did user testing to test the usability.
Readability issues – When data names are too long, the fixed sidebar lacks flexibility, making it difficult to read the full names.
Scalability Concerns – The table on the right is expected to have more columns added in the future. A fixed sidebar would limit the available space, making it harder to view and explore the data efficiently.
02
02
Responsive sidebar (Final)
Pros: Improved usability, allowing users to explore metadata details without truncation.
Cons: Required additional development effort.
Responsive sidebar (Final)
Pros: Improved usability, allowing users to explore metadata details without truncation.
Cons: Required additional development effort.
Takeaway
Don't be afraid to do the hard things
Don't be afraid to do the hard things
As the first product designer, I built our design foundation from scratch—setting up Figma, creating components, layouts, and processes. Since the product domain was highly technical, I immersed myself in data: learning SQL, exploring competitor products, following experts, and attending conferences. This helped me quickly grasp complex concepts and design with accuracy.
As the first product designer, I built our design foundation from scratch—setting up Figma, creating components, layouts, and processes. Since the product domain was highly technical, I immersed myself in data: learning SQL, exploring competitor products, following experts, and attending conferences. This helped me quickly grasp complex concepts and design with accuracy.
Design is a teamwork
Design is a teamwork
Our engineering and product team are my best design partners. During design meetings, they always provide feedback from various perspectives. It feels great to discuss and make decisions together for product design because you know you are not alone; you work with great peers to build a impactful product.
Our engineering and product team are my best design partners. During design meetings, they always provide feedback from various perspectives. It feels great to discuss and make decisions together for product design because you know you are not alone; you work with great peers to build a impactful product.
Additional
Design system
Design system
I defined a design system for enterprise-level products and open-source projects to ensure a consistent experience and enhance development efficiency.
I defined a design system for enterprise-level products and open-source projects to ensure a consistent experience and enhance development efficiency.
Feel free to reach out, I’d love to chat with you!
I'm all about meaningful connections and exciting products.
Ready to team up? Contact me!
Feel free to reach out, I’d love to chat with you!
I'm all about meaningful connections and exciting products.
Ready to team up? Contact me!
Feel free to reach out, I’d love to chat with you!
I'm all about meaningful connections and exciting products. Ready to team up? Contact me!