Tailored
Tool for sales
Tailored
Tool for sales
Creation of Personalized Buying Experiences for Customers
Creation of Personalized Buying Experiences for Customers
⚡️ Zero to: institutional funding, live product, active users, paying enterprise customers.
⚡️ Zero to: institutional funding, live product, active users, paying enterprise customers.
Branding
Branding
Interior Design
Interior Design
Space Curation
Space Curation
Tailored allows SaaS companies to create personalized buying experiences for their customers. Using our no-code solution, GTM teams can personalize demo environments, automatically generate rich media such as product tours, videos, and animated gifs, and record live sessions.
Tailored allows SaaS companies to create personalized buying experiences for their customers. Using our no-code solution, GTM teams can personalize demo environments, automatically generate rich media such as product tours, videos, and animated gifs, and record live sessions.
In the beginning
Decide whether a project is worth taking
My former coworkers invited me to join their startup team as a Design Lead. The CEO pitched an idea to me to personalize demo environments through direct DOM manipulation at the last mile.I have previously worked at B2B companies and seen the challenges sales departments face in creating high-quality demos. Only larger and wealthier companies could afford to have an engineering team dedicated to preparing demo environments for salespeople. The idea of a product that would allow salespeople to create personalized demos on their own, potentially eliminating the need for a sales engineering department, seemed like a valuable use of my skills and time, so I decided to join the team and invest my knowledge and experience in this product.
My role
Lead design for this project
As the lead designer on the team, my responsibilities included:
Research: Defining the target audience, identifying their pain points, and developing a list of requirements for the product, as well as analyzing the market.
Pitch Deck: Designing a pitch deck to secure funding.
User Experience: Designing every aspect of the app to ensure a consistent overall experience, including user flow design and creating sequences for demos and product tours.
Branding and Design System: Developing a tailored design system and all graphics for the product and marketing, including creating a Tailored branding system.
Web Page Design: Designing website for the product
User Testing: Conducting qualitative usability tests on prototypes and the final product.
I worked closely with the CEO on product development and pitch deck creation and also collaborated with a part-time designer, six developers, one architect, and one QA.
My role
Lead design for this project
As the lead designer on the team, my responsibilities included:
Research: Defining the target audience, identifying their pain points, and developing a list of requirements for the product, as well as analyzing the market.
Pitch Deck: Designing a pitch deck to secure funding.
User Experience: Designing every aspect of the app to ensure a consistent overall experience, including user flow design and creating sequences for demos and product tours.
Branding and Design System: Developing a tailored design system and all graphics for the product and marketing, including creating a Tailored branding system.
Web Page Design: Designing website for the product
User Testing: Conducting qualitative usability tests on prototypes and the final product.
I worked closely with the CEO on product development and pitch deck creation and also collaborated with a part-time designer, six developers, one architect, and one QA.
Target audience
3 distinct groups
Most companies sell their product through the demo. I conducted primary research by engaging with a network of sales professionals within the SaaS industry. Through this research, I was able to identify and define three key groups of professionals involved in the sales cycle:
Sales Exec / Ops and SDR / AE - These groups are considered to be the internal target audience, as they are part of the company that is selling the product.
Prospects - These individuals represent the external target audience, as they are potential customers who will experience the demo.
Target audience
3 distinct groups
Most companies sell their product through the demo. I conducted primary research by engaging with a network of sales professionals within the SaaS industry. Through this research, I was able to identify and define three key groups of professionals involved in the sales cycle:
Sales Exec / Ops and SDR / AE - These groups are considered to be the internal target audience, as they are part of the company that is selling the product.
Prospects - These individuals represent the external target audience, as they are potential customers who will experience the demo.
Current experience
When prospects want to see your product
My goal was to evaluate the current experience for all stakeholders in the demonstration process, identify pain points and improve them with our product to reduce frustration and increase the delight.
Here is the journey map illustrating the experience of Prospects before they fully understand and find a product that meets their needs.
As we can see from the journey map, the current experience for prospects can be frustrating. It takes a lot of time and many conversations before they can see the product and fully understand how it works.
On the other side, companies are spending a lot of resources trying to create a good demo of their product. The problem is that they don't have a clear process on how to reach out to potential customers or how to prepare personalized demos. This means that they end up using one demo for all types of customers, which is not ideal. This makes the demonstration process less personal and less effective.
Current experience
When prospects want to see your product
My goal was to evaluate the current experience for all stakeholders in the demonstration process, identify pain points and improve them with our product to reduce frustration and increase the delight.
Here is the journey map illustrating the experience of Prospects before they fully understand and find a product that meets their needs.
As we can see from the journey map, the current experience for prospects can be frustrating. It takes a lot of time and many conversations before they can see the product and fully understand how it works.
On the other side, companies are spending a lot of resources trying to create a good demo of their product. The problem is that they don't have a clear process on how to reach out to potential customers or how to prepare personalized demos. This means that they end up using one demo for all types of customers, which is not ideal. This makes the demonstration process less personal and less effective.
Business problems and User problems
Selling enterprise software is hard
Here are the main business problems identified in the sales market:
In addition, I have identified the problems that each segment of our target audience experiences.
Internal
Sales Exec / Ops - lack of consistency, with different flows being used and no clear understanding of which flow is most effective. There is also a lack of statistics available.
SDR / AE - lack the tools to personalize demos, making it difficult for them to effectively demonstrate the product to potential customers.
External
Prospects - Prospects face a long and time-consuming process of conversations and meetings to understand the product being sold. They may also find that the product does not meet their needs after this process
Business problems and User problems
Selling enterprise software is hard
Here are the main business problems identified in the sales market:
In addition, I have identified the problems that each segment of our target audience experiences.
Internal
Sales Exec / Ops - lack of consistency, with different flows being used and no clear understanding of which flow is most effective. There is also a lack of statistics available.
SDR / AE - lack the tools to personalize demos, making it difficult for them to effectively demonstrate the product to potential customers.
External
Prospects - Prospects face a long and time-consuming process of conversations and meetings to understand the product being sold. They may also find that the product does not meet their needs after this process
Product requirements
Compiling a list of optimal features for V1
After identifying the problems that need to be addressed, we developed a list of requirements for the product, which includes the following:
Establish a step-by-step flow that allows for the substitution of specific fields or images with the appropriate value.
Implement engagement analytics to track the effectiveness and engagement of different flows.
Allow for the delivery of demos through a variety of virtual means, including the ability to record and send videos.
Create a single flow that can be easily customized with different values.
From this list, we have curated a set of optimal features for the product. The engineering team then provided valuable input in refining this list and determining what would be achievable for the V1 release of the product.
Product requirements
Compiling a list of optimal features for V1
After identifying the problems that need to be addressed, we developed a list of requirements for the product, which includes the following:
Establish a step-by-step flow that allows for the substitution of specific fields or images with the appropriate value.
Implement engagement analytics to track the effectiveness and engagement of different flows.
Allow for the delivery of demos through a variety of virtual means, including the ability to record and send videos.
Create a single flow that can be easily customized with different values.
From this list, we have curated a set of optimal features for the product. The engineering team then provided valuable input in refining this list and determining what would be achievable for the V1 release of the product.
Competitors
Determining market fit
Evaluating our positioning within the market. This includes an examination of existing solutions to the problems we identified. I have conducted research on similar products and analyzed their position in the market by placing them in a quadrant. All these tools aim to solve the same issue, which is how to attract the prospects' attention, and how to deliver information about the product in different stages, from initial awareness to interest. Our main competitors are Reprise, Demostack, and Walnut, however, their solutions are comparatively more sophisticated compared to what we plan to offer.
Based on this analysis, it appears that Tailored has the potential to fill a gap in the market by offering a solution for personalizing demo environments through direct manipulation of the Document Object Model (DOM).
Competitors
Determining market fit
Evaluating our positioning within the market. This includes an examination of existing solutions to the problems we identified. I have conducted research on similar products and analyzed their position in the market by placing them in a quadrant. All these tools aim to solve the same issue, which is how to attract the prospects' attention, and how to deliver information about the product in different stages, from initial awareness to interest. Our main competitors are Reprise, Demostack, and Walnut, however, their solutions are comparatively more sophisticated compared to what we plan to offer.
Based on this analysis, it appears that Tailored has the potential to fill a gap in the market by offering a solution for personalizing demo environments through direct manipulation of the Document Object Model (DOM).
Solution
Product-led approach with Tailored
How can Tailored improve someone's life and help our target audience to achieve their goals? We identified the solution for the problems in these key areas
To achieve it, we have decided to develop multiple tools:
RC (short for "remote control") - Tailored's Chrome extension that manages live value substitution, A/V stream capture, and snapshot recording.
Studio - a desktop and web application for data preparation, statistics, and other user-related tasks.
Composer - a feature within the Studio app that assists in setting up the flow.
With our optimal set of features in mind, I put together UX Sitemap for the tools, which featured all of the pages necessary to complete the user experience and determined how the user would navigate around.
Solution
Product-led approach with Tailored
How can Tailored improve someone's life and help our target audience to achieve their goals? We identified the solution for the problems in these key areas
To achieve it, we have decided to develop multiple tools:
RC (short for "remote control") - Tailored's Chrome extension that manages live value substitution, A/V stream capture, and snapshot recording.
Studio - a desktop and web application for data preparation, statistics, and other user-related tasks.
Composer - a feature within the Studio app that assists in setting up the flow.
With our optimal set of features in mind, I put together UX Sitemap for the tools, which featured all of the pages necessary to complete the user experience and determined how the user would navigate around.
Wireframes
Establishing an information hierarchy
Utilizing the established feature set and UX sitemap, I started put together low-fidelity wireframes to establish a visual hierarchy and provide a foundation for the design direction of the product.
Based on the results of prototype testing, several modifications were made, and it was decided that the composer functionality would be initially implemented on the backend for the first group of users due to time constraints
Wireframes
Establishing an information hierarchy
Utilizing the established feature set and UX sitemap, I started put together low-fidelity wireframes to establish a visual hierarchy and provide a foundation for the design direction of the product.
Based on the results of prototype testing, several modifications were made, and it was decided that the composer functionality would be initially implemented on the backend for the first group of users due to time constraints
UI
Design System
Once the primary structure was established, we focused on developing the pitch deck and user interface for the tools. To accomplish this, I initiated the creation of a design system that incorporated a custom logo, fonts, colors, icon style, and reusable components.
UI
Design System
Once the primary structure was established, we focused on developing the pitch deck and user interface for the tools. To accomplish this, I initiated the creation of a design system that incorporated a custom logo, fonts, colors, icon style, and reusable components.
Hi-Fi mockups
Multiple tools but still one product
I spent some time thinking about how our 2 applications will be visually and experientially connected with each other and with the extension.
Our target audience is individuals who aim to personalize environments, so we wanted Tailored to have a distinct visual appearance that differentiated it from the environments being customized. To accomplish this, I employed a color scheme dominated by dark colors in Tailored to create a strong contrast with the demo environments.
I love products with smooth and pleasant interactions and I wanted Tailored to be one of these products. I have been focusing on designing smooth transitions between pages and developing ways to seamlessly convert one component into another.
Studio app
One of the Tailored desktop and web applications for data preparation, statistics, and other user-related tasks.
Login
I wanted to design a smooth login process that allows users to access the application with minimal friction. For the initial version of the Studio application, I designed options for users to Sign In, Sign Up, and Reset their password. In future versions, we plan to include the option for social login for an even more seamless experience.
Flows
In the Flows section, users can view a list of the flows they have created, including information on the number of steps and blocks within each flow. At the individual flow level, users can also view the number of runs they have created using that particular flow, along with statistics on the number of users who have viewed those runs.
Accounts
The Account section is an important aspect of the Studio, where internal users can view a list of prospects they are attempting to reach through demos and product tours. They can also access detailed engagement analytics, which includes information on when and how prospects interact with the demos.
Videos and Product tour
The Tailored Studio app has various methods for sharing the demo with prospects. A unique user experience has been created where prospects can view the demo on their own through a generated link in the Studio app, leading them to either a Product Tour or a Video. Additionally, a GIF based on the product tour can be generated and emailed to the prospect.
Hi-Fi mockups
Multiple tools but still one product
I spent some time thinking about how our 2 applications will be visually and experientially connected with each other and with the extension.
Our target audience is individuals who aim to personalize environments, so we wanted Tailored to have a distinct visual appearance that differentiated it from the environments being customized. To accomplish this, I employed a color scheme dominated by dark colors in Tailored to create a strong contrast with the demo environments.
I love products with smooth and pleasant interactions and I wanted Tailored to be one of these products. I have been focusing on designing smooth transitions between pages and developing ways to seamlessly convert one component into another.
Studio app
One of the Tailored desktop and web applications for data preparation, statistics, and other user-related tasks.
Login
I wanted to design a smooth login process that allows users to access the application with minimal friction. For the initial version of the Studio application, I designed options for users to Sign In, Sign Up, and Reset their password. In future versions, we plan to include the option for social login for an even more seamless experience.
Flows
In the Flows section, users can view a list of the flows they have created, including information on the number of steps and blocks within each flow. At the individual flow level, users can also view the number of runs they have created using that particular flow, along with statistics on the number of users who have viewed those runs.
Accounts
The Account section is an important aspect of the Studio, where internal users can view a list of prospects they are attempting to reach through demos and product tours. They can also access detailed engagement analytics, which includes information on when and how prospects interact with the demos.
Videos and Product tour
The Tailored Studio app has various methods for sharing the demo with prospects. A unique user experience has been created where prospects can view the demo on their own through a generated link in the Studio app, leading them to either a Product Tour or a Video. Additionally, a GIF based on the product tour can be generated and emailed to the prospect.