Tabber
“Browsing Made Easy”
Creating a SAAS platform from scratch. From endless pivots to product-market fit.
Categories
Business Model
UX/Ui
Research
Business Model
UX/Ui
Research
My Role
Co-Founder
UX/Ui Designer
Researcher
Co-Founder
UX/Ui Designer
Researcher
Collaborators
Michelle Kim
Michelle Kim
1. Overview
Problem
Knowledge workers don't have a simple way to organize and store online content, such as tabs, images, links, articles and online research. Even if they implement an ordered method of documenting and storing their information, they have difficulty recalling where and what they stored, completely negating the purpose of having a documentation system in the first place.
Result
Tabber, aka Pinterest for Work, allows knowledge workers to access, store, and organize all of their content onto one user-friendly platform, saving users their time and their sanity. Leveraging our backgrounds in human-centered disciplines (eg. user experience design, branding, strategy, and advertising), we were able to pitch to investors after a 14 week period of identifying product-market fit and potential clients for the product.
[This project was based on a transdisciplinary class hosted by the Product Design department at ArtCenter College of Design]
![]()
Our Approach
We spent a hefty amount of time trying to find product-market fit. As we began to form a better understanding on the problem our users were facing through research and testing, we had pivoted significantly from our original idea. It was critical to adopt a design sprint framework by rapidly producing rough prototypes and conducting interviews in a week-by-week fashion to quickly validate with users.
Knowledge workers don't have a simple way to organize and store online content, such as tabs, images, links, articles and online research. Even if they implement an ordered method of documenting and storing their information, they have difficulty recalling where and what they stored, completely negating the purpose of having a documentation system in the first place.
Result
Tabber, aka Pinterest for Work, allows knowledge workers to access, store, and organize all of their content onto one user-friendly platform, saving users their time and their sanity. Leveraging our backgrounds in human-centered disciplines (eg. user experience design, branding, strategy, and advertising), we were able to pitch to investors after a 14 week period of identifying product-market fit and potential clients for the product.
[This project was based on a transdisciplinary class hosted by the Product Design department at ArtCenter College of Design]
Our Approach
We spent a hefty amount of time trying to find product-market fit. As we began to form a better understanding on the problem our users were facing through research and testing, we had pivoted significantly from our original idea. It was critical to adopt a design sprint framework by rapidly producing rough prototypes and conducting interviews in a week-by-week fashion to quickly validate with users.
A. Research
Competitive Landscape
Secondary Research
Expert Interviews
User Interviews
Cold Research
Market Research
Personas
Competitive Landscape
Secondary Research
Expert Interviews
User Interviews
Cold Research
Market Research
Personas
B. Design
Informed Brainstorming
Alignment/Problem Prioritization
Information Architecture
Wireframes
Interactive Prototype
Lo-Fi + Hi-fi Designs
Informed Brainstorming
Alignment/Problem Prioritization
Information Architecture
Wireframes
Interactive Prototype
Lo-Fi + Hi-fi Designs
C. Evaluate
Usability Testing
Design Iterations
Pivoting
Pitch to Investors
Usability Testing
Design Iterations
Pivoting
Pitch to Investors
2. Research
We initially tried to figure out an alternative business model within the education space for students to learn and practice specific skill sets (ex: problem solving with design thinking methodology) that were not prioritized in public schools; however, through a series of primary and secondary research detailed below (including competitive analysis, market research on trends and stats, and user interviews), we realized that there was a bigger and more pressing opportunity: providing a digital documentation platform for both students and knowledge workers. That's when we had our first pivot!
Before the Pivot
As we had little knowledge on the landscape of alternative educational programs, we began by researching competitors and conducting surveys with parents as we realized that this would have to be a B2C2C revenue model (as the parents would be paying for their children).
Why We Pivoted
At first, we were naively solving for ourselves in that we thought we needed to incorporate and expose design thinking earlier in a student's education based on research from what top companies like Google would want in their employees.
Because the problem we were trying to solve was not clear and because we didn't have the right experience and knowledge on how to build a curriculum within this sphere, we were ill-equipped from the start to tackle this problem correctly. This only became more evident as we began to do interviews with experts in education and with parents.
Before the Pivot
As we had little knowledge on the landscape of alternative educational programs, we began by researching competitors and conducting surveys with parents as we realized that this would have to be a B2C2C revenue model (as the parents would be paying for their children).
Why We Pivoted
At first, we were naively solving for ourselves in that we thought we needed to incorporate and expose design thinking earlier in a student's education based on research from what top companies like Google would want in their employees.
Because the problem we were trying to solve was not clear and because we didn't have the right experience and knowledge on how to build a curriculum within this sphere, we were ill-equipped from the start to tackle this problem correctly. This only became more evident as we began to do interviews with experts in education and with parents.
Competitive Landscape
This portion of the research significantly impacted which features we decided to prioritize on later in the design process.
We first looked into the market, trying to find good references and gaps that still existed within the current market. Our goal was to find which needs were and weren't being met for our users. We focused on learnability vs ease of use (in terms of organizing content) as a way to compare our competitors' performance levels.![]()
This portion of the research significantly impacted which features we decided to prioritize on later in the design process.
We first looked into the market, trying to find good references and gaps that still existed within the current market. Our goal was to find which needs were and weren't being met for our users. We focused on learnability vs ease of use (in terms of organizing content) as a way to compare our competitors' performance levels.
We analyzed the different weak points for the most popular software programs used by our users (for online information storing platforms).
![]()
Findings to Design ︎ Business Decisions
1. Knowledge workers will continue increasing in the work force and fall under a wide spread of industries and professions
︎
Business Roadmap Strategy
(conversion to retention)
There's high chance students will continue using Tabber when they join the work force as knowledge workers have similar pain points as students.
︎
Design Feature Prioritization
Focus on prioritizing features for V1 on the needs of the students.
︎
Business Roadmap Strategy
(conversion to retention)
There's high chance students will continue using Tabber when they join the work force as knowledge workers have similar pain points as students.
︎
Design Feature Prioritization
Focus on prioritizing features for V1 on the needs of the students.
2. A significant number of knowledge workers have more than 10 tabs open at a time at least twice a week. During these instances, they cannot recall from memory which tabs exist in their internet browser.
︎
Design Behavioral Goals Users have difficulty recalling which tabs they have when it exceeds +5 which means they need another method of staying organized and storing tabs.
︎
Design Behavioral Goals Users have difficulty recalling which tabs they have when it exceeds +5 which means they need another method of staying organized and storing tabs.
3. Saving and documenting content is only the first hurdle. The 2nd biggest pain point is recalling back to what users saved.
︎
Design Feature Prioritization Good organizational design, recall, and search features will be crucial for long term retention.
︎
Business Scaling + Revenue Strategy As users grow, our database will scale as well, allowing us to create a library for users to find suggestions based on their interests and uploaded content. This will affect ad revenue as data increases.
︎
Design Feature Prioritization Good organizational design, recall, and search features will be crucial for long term retention.
︎
Business Scaling + Revenue Strategy As users grow, our database will scale as well, allowing us to create a library for users to find suggestions based on their interests and uploaded content. This will affect ad revenue as data increases.
4.Many users store links in documents like Google Drive. This is a horrible method as they can't recall what the links are for. Pinterest can't store text-based content. There are no good alternatives.
︎
Design Feature Prioritization Figure out a way to store both images, videos, AND text-based content (including URLs). An auto-generated preview feature for URLs could help users quickly recall the purpose of certain links (similar to Facebook's auto-generating links to articles.
︎
Design Feature Prioritization Figure out a way to store both images, videos, AND text-based content (including URLs). An auto-generated preview feature for URLs could help users quickly recall the purpose of certain links (similar to Facebook's auto-generating links to articles.
Personas
To better guide the later stage of our process, I consolidated all of our synthesized information from research and interviews to create the following two main user groups.
To better guide the later stage of our process, I consolidated all of our synthesized information from research and interviews to create the following two main user groups.
3. Design
From our research, we brainstormed solutions that we later ranked based on feasibility for Version 1 (V1). Our core priority was to quickly create wireframes that tackled the challenge of organizing such diverse content onto one platform that we could test with potential users. We realized from our research that it would be better to minimize the number of features we would build for V1 and instead focus on perfecting the user experience for the following core functionalities.
![]()
Wireframes
We quickly transferred some sketches into black and white wireframes on Illustrator. We then received feedback from potential users.
![]()
High-Fidelity Design - Iteration 1
For the first iteration, we wanted to validate whether the flow was simple enough for users to learn quickly. We were also focused on trying to figure out if the level of affordance we were giving to certain groupings made sense to the users. We used Sketch and InVision to create a basic interactive prototype as that was determined as just enough to test our assumptions and designs.
See Prototype Version 1 ︎
![]()
Wireframes
We quickly transferred some sketches into black and white wireframes on Illustrator. We then received feedback from potential users.
High-Fidelity Design - Iteration 1
For the first iteration, we wanted to validate whether the flow was simple enough for users to learn quickly. We were also focused on trying to figure out if the level of affordance we were giving to certain groupings made sense to the users. We used Sketch and InVision to create a basic interactive prototype as that was determined as just enough to test our assumptions and designs.
See Prototype Version 1 ︎
4. Evaluation
User Feedback and Design Changes
Due to time restrictions, we were only able to do fairly quick usability testing sessions as we went through 3 iterations with potential users. We looked to see if the layout made sense to the user, which features and pages they would spend most of their time on and which features were unnecessary for V1 for product launch. Below are some highlights on the feedback we received
![]()
Due to time restrictions, we were only able to do fairly quick usability testing sessions as we went through 3 iterations with potential users. We looked to see if the layout made sense to the user, which features and pages they would spend most of their time on and which features were unnecessary for V1 for product launch. Below are some highlights on the feedback we received
Users had no trouble learninghow to post content
Most users seemed much more interested in how information was organized more-so than the flow in which they would have to input information. Because much of our design for posting text and image based content (blog/article style) was familiar to users, they didn't have too many issues figuring out how it worked.
Previews are kingWhen searching for content, users expect to have a quick glance at the page and decide if that specific post is the correct one. Users valued their time and having to click on a post to then be directed to a new window were too many steps. They preferred to see much more content on one screen and quickly be able to understand what content was about. With this feedback in mind, I realized that a hover mechanism would be more appropriate as that would allow users to skim quickly through various posts.
Visual library of playlists as the home screen
We realized we needed to have two main pages: search screen and library playlist. The library playlist would have a combination of content generated by users themselves and that of ones users created from the searches. In our exploration we tried to understand what would be the easiest way for users to go back to past playlists. From user input, we realized visuals were key which led us to focus on Concept 2.
