Canner
Redesign a data access workflow
Project duration: 2022/04~2022/08
Background
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.
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%.
Challenges
Design a complex and highly technical B2B product.
Build design process and collaborative culture with developer team from the ground up.
Responsibilities
Research data market trends.
Conduct user interviews with data engineers/data analysts/business analysts.
Brainstorm the product strategies.
Share market trends and research insights with the team.
Communicate with the dev and sales team to explain why and what we designed.
Deliver product design strategies and craft UI.
Customers
Our customers come from banking, manufacturing, and E-commerce.
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.
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.
CTO (PM): William Chang
Front-End: Freda Lai, Shimin Wong, Star You
User Research
Goal
Deeply understand the real-world data access scenarios between data team and business team.
Understand current users' problem with our product.
Research Insights
01
The flow of data access in real-world
02
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
02
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
03
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
Scope & Goal
Scope
Based on the research findings, we created the Data Access Workflow and identified three key stages as our initial design scope.
Data Access Workflow
Product Research
Based on these three stages, I needed to translate these concepts into actual product requirements and ideas. Since our team didn't have a product manager, I was also responsible for product research.We analyzed how other leading products approached these stages, their product vision, and how they implemented their solutions.
Dividing the scope into two phases
Time is the most valuable resource for a startup, so after conducting product research and discussing with the team, CTO, and CEO, we decided to divide the scope into two phases.
In the first phase, we focused on the 'search data' and 'understand data' stages, as these were the critical pain points most frequently mentioned by customers. In the second phase, we focused on the 'secure data' stage. You can find more details in the case study on data policies.
Questions
How might we help users find the right data more efficiently and understand the business context within the data?
Goal
Optimize the data access workflow to provide a smoother user experience to enhance efficiency for data team and business team.
Design DeliverableS
Design Solution: Create the consistent business knowledge for data
User Problem: Data lack of business knowledge requires a lot of time for communication
How to Solve: Users can 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.
Design Solution: Navigation hub for your all data
User Problem: Sidebar focuses on function navigation instead of data
How to Solve: We redesigned 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.
Impacts
80%
data analytics productivity
In the past, business teams required at least 5 working days to access data. Now, with this new process, business teams can self-service their data needs within a single day. This significant improvement increased productivity by 80%, empowering teams to make faster, data-driven decisions.
A single source of truth for business knowledge, reducing time of communication
After establishing a single source of truth for business knowledge. This significantly reduced the time spent on communication between teams, enabling data analysts, engineers, and business users to quickly find and understand relevant data. As a result, decision-making became more efficient, and the consistency of data interpretation improved across the organization.
Design Trade-offs
The way how to create business knowledge
Sidebar Interaction
When designing the sidebar experience, I considered two approaches:
1️⃣ Fixed Sidebar (Initial)
✅ Pros: Easy to implement
❌ Cons: Lacked flexibility and scalability.
Initially, 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.
2️⃣ Responsive Sidebar (Final)
✅ Pros: Improved usability, allowing users to explore metadata details without truncation.
❌ Cons: Required additional development effort.
Takeaway
Do not be afraid to do the hard things
As a first product designer in this team, all things are new and challenging. There was no figma file only codebase, no design process. I had to build all the design stuff from 0 to 1. Starting from signing up a Figma account, building the first frame, components, layouts, pages, processes, and so on. Our product’s domain knowledge is highly technical. It is complex and hard for me at the beginning. All I did was dive deep into data knowledge, follow data experts and data companies on Twitter, and register for their conferences. Learning how they talk and think has always helped me a lot. I learned SQL and played the other data company’s product. By doing this, I can exactly know any data terms in the data world.
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 meaningful product.
Do the most important things at the right time
We have several product design ideas for the data access workflow on our to-do list, but limited resources and time. As Steve Jobs said, "Focus is about saying no.” How to find the balance between time, resources, constraints, and goals is really important, I learned that prioritization is very crucial for the team to speed up and focus on the right thing to do.
Additional
UI component - design for consistency
Our front-end engineers and I define reusable UI components for enterprise-level products and open-source projects to ensure a consistent experience and enhance development efficiency.
View other projects