SaaS Platform Design
SynthDoc - A Collaborative Documentation Tool.
SaaS Platform Design
SynthDoc - A Collaborative Documentation Tool.
SaaS Platform Design
SynthDoc - A Collaborative Documentation Tool.
UX Research
UX Design
Design System
Visual & Interaction Design
Designed for
Designed for
Designed for
Conceptual Project
Conceptual Project
Conceptual Project
Overview
Overview
Overview
In a remote/hybrid setting, documentation of processes, projects, decisions, and learning becomes critical to the success of any organization. However, bringing about a documentation-first culture comes with its own set of challenges.
Synthdoc is a conceptual product designed to solve the basic problem of documentation inconsistencies within a cross-functional organisation. It enables users to create, publish and use templates for documentation, so that throughout the organisation, no matter which team or member works on it, the format and content structure of the document remains consistent for similar objectives and areas.
In a remote/hybrid setting, documentation of processes, projects, decisions, and learning becomes critical to the success of any organization. However, bringing about a documentation-first culture comes with its own set of challenges.
Synthdoc is a conceptual product designed to solve the basic problem of documentation inconsistencies within a cross-functional organisation. It enables users to create, publish and use templates for documentation, so that throughout the organisation, no matter which team or member works on it, the format and content structure of the document remains consistent for similar objectives and areas.
In a remote/hybrid setting, documentation of processes, projects, decisions, and learning becomes critical to the success of any organization. However, bringing about a documentation-first culture comes with its own set of challenges.
Synthdoc is a conceptual product designed to solve the basic problem of documentation inconsistencies within a cross-functional organisation. It enables users to create, publish and use templates for documentation, so that throughout the organisation, no matter which team or member works on it, the format and content structure of the document remains consistent for similar objectives and areas.
Role, Team & Duration
Role, Team & Duration
Role, Team & Duration
Product Designer
Product Designer
Product Designer
Personal Project
Personal Project
Personal Project
August 2022 - September 2022
August 2022 - September 2022
August 2022 - September 2022
The Challenge
The Challenge
The Challenge
The absence of a seamless collaborative documentation tool results in collaboration issues and wastes significant time during the documentation process.
The absence of a seamless collaborative documentation tool results in collaboration issues and wastes significant time during the documentation process.
The absence of a seamless collaborative documentation tool results in collaboration issues and wastes significant time during the documentation process.
Diverse structures are observed in product requirement documents (PRDs) and meeting notes created by different team members, leading to confusion.
Diverse structures are observed in product requirement documents (PRDs) and meeting notes created by different team members, leading to confusion.
Diverse structures are observed in product requirement documents (PRDs) and meeting notes created by different team members, leading to confusion.
Even as individuals strive to establish a consistent structure for their documents, they find it tedious to copy and paste from previous documents each time they create a new one.
Even as individuals strive to establish a consistent structure for their documents, they find it tedious to copy and paste from previous documents each time they create a new one.
Even as individuals strive to establish a consistent structure for their documents, they find it tedious to copy and paste from previous documents each time they create a new one.
The Solution
The Solution
The Solution
Setting up a Template Repository module for all kinds of documentation inside Synthdoc, wherein the team members could themselves create and edit templates according their roles & responsibilities.
Setting up a Template Repository module for all kinds of documentation inside Synthdoc, wherein the team members could themselves create and edit templates according their roles & responsibilities.
Setting up a Template Repository module for all kinds of documentation inside Synthdoc, wherein the team members could themselves create and edit templates according their roles & responsibilities.
The product team could create a reusable PRD template that all PMs could use in their respective projects.
The product team could create a reusable PRD template that all PMs could use in their respective projects.
The product team could create a reusable PRD template that all PMs could use in their respective projects.
Folks won’t have to spend time thinking about how to structure or format the notes anymore.
Folks won’t have to spend time thinking about how to structure or format the notes anymore.
Folks won’t have to spend time thinking about how to structure or format the notes anymore.
The Process
The Process
The Process
Defining the scope.
Defining the scope.
Defining the scope.
For this project, the primary focus was to create a product which solved our main problems, with special emphasis on the information architecture and the user-journey for creating and working with templates. I decided to keep the text editor experience of the platform outside the scope of this project.
For this project, the primary focus was to create a product which solved our main problems, with special emphasis on the information architecture and the user-journey for creating and working with templates. I decided to keep the text editor experience of the platform outside the scope of this project.
For this project, the primary focus was to create a product which solved our main problems, with special emphasis on the information architecture and the user-journey for creating and working with templates. I decided to keep the text editor experience of the platform outside the scope of this project.
Establishing the groundwork.
Establishing the groundwork.
Establishing the groundwork.
While working on this project, I followed the 5-step UX Design process mentioned below for the best results.
While working on this project, I followed the 5-step UX Design process mentioned below for the best results.
While working on this project, I followed the 5-step UX Design process mentioned below for the best results.
I started the project with the main focus on understanding the scope of this project and the product I was to design. I focussed on the target users and their major frustrations that I could solve.
I started the project with the main focus on understanding the scope of this project and the product I was to design. I focussed on the target users and their major frustrations that I could solve.
I started the project with the main focus on understanding the scope of this project and the product I was to design. I focussed on the target users and their major frustrations that I could solve.
Conducting Thorough Industry research
Conducting Thorough Industry research
Conducting Thorough Industry research
During this phase, I conducted extensive research in various directions to develop a deeper understanding of the problem, the product, and the target audience. I aimed to obtain answers to the following questions by the conclusion of my research.
During this phase, I conducted extensive research in various directions to develop a deeper understanding of the problem, the product, and the target audience. I aimed to obtain answers to the following questions by the conclusion of my research.
How does one create and manage templates for the entire organization easily?
How does one create and manage templates for the entire organization easily?
How does one create and manage templates for the entire organization easily?
How should the template repository be designed so it remains easy to use as the organization scales and the number of templates grows?
How should the template repository be designed so it remains easy to use as the organization scales and the number of templates grows?
How should the template repository be designed so it remains easy to use as the organization scales and the number of templates grows?
Think about the flow to start using a template to write a document.
Think about the flow to start using a template to write a document.
Think about the flow to start using a template to write a document.
How to design a workspace suitable for power users as well as be understandable enough to be used by a common user?
How to design a workspace suitable for power users as well as be understandable enough to be used by a common user?
How to design a workspace suitable for power users as well as be understandable enough to be used by a common user?
To conduct thorough research for Synthdoc, I began by exploring similar online platforms for competitive analysis. I made a list of the features and drawbacks of these platforms and then compared them to market needs, user frustrations and target goals. The products I visited had a similar purpose of collaborative documentation, including the ability to use and create templates.I also interviewed a couple of my friends and contacts working in cross-functional teams to learn about their daily usage of documentation tools and understand their pain points.
To conduct thorough research for Synthdoc, I began by exploring similar online platforms for competitive analysis. I made a list of the features and drawbacks of these platforms and then compared them to market needs, user frustrations and target goals. The products I visited had a similar purpose of collaborative documentation, including the ability to use and create templates.I also interviewed a couple of my friends and contacts working in cross-functional teams to learn about their daily usage of documentation tools and understand their pain points.
To conduct thorough research for Synthdoc, I began by exploring similar online platforms for competitive analysis. I made a list of the features and drawbacks of these platforms and then compared them to market needs, user frustrations and target goals. The products I visited had a similar purpose of collaborative documentation, including the ability to use and create templates.I also interviewed a couple of my friends and contacts working in cross-functional teams to learn about their daily usage of documentation tools and understand their pain points.
What Did The Target Audience Say?
What Did The Target Audience Say?
What Did The Target Audience Say?
"Consistency is key in our organization, but it's challenging when everyone has their own way of formatting documents. It leads to confusion."
"Consistency is key in our organization, but it's challenging when everyone has their own way of formatting documents. It leads to confusion."
"Consistency is key in our organization, but it's challenging when everyone has their own way of formatting documents. It leads to confusion."
"I spend too much time copying and pasting structures from old documents into new ones. There must be a better way."
"I spend too much time copying and pasting structures from old documents into new ones. There must be a better way."
"I spend too much time copying and pasting structures from old documents into new ones. There must be a better way."
"It's frustrating when I have to search through countless documents to find the right template. We need a more organized solution."
"It's frustrating when I have to search through countless documents to find the right template. We need a more organized solution."
"It's frustrating when I have to search through countless documents to find the right template. We need a more organized solution."
"It'd be great to have a tool that not only helps with document creation but also ensures our team follows a consistent style guide."
"It'd be great to have a tool that not only helps with document creation but also ensures our team follows a consistent style guide."
"It'd be great to have a tool that not only helps with document creation but also ensures our team follows a consistent style guide."
"Our documentation process lacks version control, and it's causing confusion when multiple team members make edits."
"Our documentation process lacks version control, and it's causing confusion when multiple team members make edits."
"Our documentation process lacks version control, and it's causing confusion when multiple team members make edits."
"I'd love a solution that integrates with our existing tools. Switching between multiple platforms is inefficient."
"I'd love a solution that integrates with our existing tools. Switching between multiple platforms is inefficient."
"I'd love a solution that integrates with our existing tools. Switching between multiple platforms is inefficient."
Ideating the solution
Ideating the solution
Ideating the solution
After completing my research and gaining a better understanding of the product, I began creating personas to clearly differentiate between users' needs and pain points. This way, I could address all of them and provide a beautiful, user-friendly experience.
I created 2 user personas representing the two major sections of users. Defining user personas guided the identification of specific focus points for each group. This, in turn, aided in creating an inclusive experience during information architecture and wireframe design.
At this stage, I proceeded to create information architecture and user journeys for the above personas, ensuring that it aligns seamlessly with the user's needs and objectives. I aimed to map out the step-by-step experiences of the personas as they interact with Synthdoc in the user-journey. These journeys helped me identify pain points, decision-making moments, and opportunities for improvement in the user experience. By combining both the information architecture and user journeys, I was better equipped to design a delightful and intuitive product.
After completing my research and gaining a better understanding of the product, I began creating personas to clearly differentiate between users' needs and pain points. This way, I could address all of them and provide a beautiful, user-friendly experience.
I created 2 user personas representing the two major sections of users. Defining user personas guided the identification of specific focus points for each group. This, in turn, aided in creating an inclusive experience during information architecture and wireframe design.
At this stage, I proceeded to create information architecture and user journeys for the above personas, ensuring that it aligns seamlessly with the user's needs and objectives. I aimed to map out the step-by-step experiences of the personas as they interact with Synthdoc in the user-journey. These journeys helped me identify pain points, decision-making moments, and opportunities for improvement in the user experience. By combining both the information architecture and user journeys, I was better equipped to design a delightful and intuitive product.
After completing my research and gaining a better understanding of the product, I began creating personas to clearly differentiate between users' needs and pain points. This way, I could address all of them and provide a beautiful, user-friendly experience.
I created 2 user personas representing the two major sections of users. Defining user personas guided the identification of specific focus points for each group. This, in turn, aided in creating an inclusive experience during information architecture and wireframe design.
At this stage, I proceeded to create information architecture and user journeys for the above personas, ensuring that it aligns seamlessly with the user's needs and objectives. I aimed to map out the step-by-step experiences of the personas as they interact with Synthdoc in the user-journey. These journeys helped me identify pain points, decision-making moments, and opportunities for improvement in the user experience. By combining both the information architecture and user journeys, I was better equipped to design a delightful and intuitive product.
The Information Architecture
The Information Architecture
The Information Architecture
Designing the product.
Designing the product.
Designing the product.
Following the User Journey & Information Architecture, I created a few pen-and-paper sketches. After creating wireframes for the main section screens for the Synthdoc dashboard, I went ahead and created high fidelity User Interface.
Following the User Journey & Information Architecture, I created a few pen-and-paper sketches. After creating wireframes for the main section screens for the Synthdoc dashboard, I went ahead and created high fidelity User Interface.
Following the User Journey & Information Architecture, I created a few pen-and-paper sketches. After creating wireframes for the main section screens for the Synthdoc dashboard, I went ahead and created high fidelity User Interface.
Pen & Paper Sketches
Pen & Paper Sketches
Pen & Paper Sketches
Visualising the interface
Visualising the interface
Visualising the interface
After studying some similar tools, and experimenting with the wireframes, I had a plan, and a direction to start my work. Next, I decided to get started on the visual style for the platform, which once confirmed will help me in building the high-fidelity wireframes.
After studying some similar tools, and experimenting with the wireframes, I had a plan, and a direction to start my work. Next, I decided to get started on the visual style for the platform, which once confirmed will help me in building the high-fidelity wireframes.
After studying some similar tools, and experimenting with the wireframes, I had a plan, and a direction to start my work. Next, I decided to get started on the visual style for the platform, which once confirmed will help me in building the high-fidelity wireframes.
Design System
Design System
Design System
To establish a visual style for the web app, I evaluated multiple references and options, ultimately choosing a modern, professional look. This style incorporates solid colors, vibrant flat illustrations, clear and bold titles, and a soft, easy-to-read body text.
The color scheme is bright and appealing, with the perfect touch of black to add a sleek and polished feel. The resulting aesthetic is crisp, contemporary, and engaging - perfectly fitting for a modern web app.
To establish a visual style for the web app, I evaluated multiple references and options, ultimately choosing a modern, professional look. This style incorporates solid colors, vibrant flat illustrations, clear and bold titles, and a soft, easy-to-read body text.
The color scheme is bright and appealing, with the perfect touch of black to add a sleek and polished feel. The resulting aesthetic is crisp, contemporary, and engaging - perfectly fitting for a modern web app.
To establish a visual style for the web app, I evaluated multiple references and options, ultimately choosing a modern, professional look. This style incorporates solid colors, vibrant flat illustrations, clear and bold titles, and a soft, easy-to-read body text.
The color scheme is bright and appealing, with the perfect touch of black to add a sleek and polished feel. The resulting aesthetic is crisp, contemporary, and engaging - perfectly fitting for a modern web app.
Initial Iterations for High Fidelity Designs
Initial Iterations for High Fidelity Designs
Initial Iterations for High Fidelity Designs
During this phase, I started designing keeping in mind that the end result should be straightforward, and easy to use. I mainly attained this by keeping the navigation simple, making sure that the visual hierarchy in every screen made sense, and helped the users.
I tested my designs after every iteration I created, uncovering new issues that I hadn't previously considered. I reached out to a few friends with experience in cross-functional teams who had either participated in creating lengthy documentation or were familiar with template creation and management processes. Following several rounds of iterative design and feedback gathering, I crafted a final version that garnered positive feedback from all test users.
During this phase, I started designing keeping in mind that the end result should be straightforward, and easy to use. I mainly attained this by keeping the navigation simple, making sure that the visual hierarchy in every screen made sense, and helped the users.
I tested my designs after every iteration I created, uncovering new issues that I hadn't previously considered. I reached out to a few friends with experience in cross-functional teams who had either participated in creating lengthy documentation or were familiar with template creation and management processes. Following several rounds of iterative design and feedback gathering, I crafted a final version that garnered positive feedback from all test users.
During this phase, I started designing keeping in mind that the end result should be straightforward, and easy to use. I mainly attained this by keeping the navigation simple, making sure that the visual hierarchy in every screen made sense, and helped the users.
I tested my designs after every iteration I created, uncovering new issues that I hadn't previously considered. I reached out to a few friends with experience in cross-functional teams who had either participated in creating lengthy documentation or were familiar with template creation and management processes. Following several rounds of iterative design and feedback gathering, I crafted a final version that garnered positive feedback from all test users.
Final High Fidelity Designs
Final High Fidelity Designs
Final High Fidelity Designs
As decided earlier, the scope of this project consisted of the main platform design, along with data segregation and navigation, as well as template creation and management.
Therefore, the first part of the following designs consist of some important screens in the platform, according to the main navigation. The second part is mainly about creating and using a template.
As decided earlier, the scope of this project consisted of the main platform design, along with data segregation and navigation, as well as template creation and management.
Therefore, the first part of the following designs consist of some important screens in the platform, according to the main navigation. The second part is mainly about creating and using a template.
As decided earlier, the scope of this project consisted of the main platform design, along with data segregation and navigation, as well as template creation and management.
Therefore, the first part of the following designs consist of some important screens in the platform, according to the main navigation. The second part is mainly about creating and using a template.
Home Tab
Home Tab
Home Tab
Projects
Projects
Projects
Templates
Templates
Templates
Documents & Members
Documents & Members
Documents & Members
Using A Template
Using A Template
Using A Template
Creating A New Template
Creating A New Template
Creating A New Template
Concluding the project
Concluding the project
Concluding the project
I knew from the start that this project would be extensive, and I relished working on every screen, addressing each problem during every phase. The Define and Empathy phases were invaluable, helping me consider unique problems from a fresh perspective. Conducting a competitor analysis allowed me to evaluate the product and empathize with users. In-depth research into our target audience deepened my understanding of their challenges, which in turn clarified the product's vision. Wireframing and designing the UIs was a learning-filled journey, and I frequently tested the screens with potential users to refine them further.
I knew from the start that this project would be extensive, and I relished working on every screen, addressing each problem during every phase. The Define and Empathy phases were invaluable, helping me consider unique problems from a fresh perspective. Conducting a competitor analysis allowed me to evaluate the product and empathize with users. In-depth research into our target audience deepened my understanding of their challenges, which in turn clarified the product's vision. Wireframing and designing the UIs was a learning-filled journey, and I frequently tested the screens with potential users to refine them further.
I knew from the start that this project would be extensive, and I relished working on every screen, addressing each problem during every phase. The Define and Empathy phases were invaluable, helping me consider unique problems from a fresh perspective. Conducting a competitor analysis allowed me to evaluate the product and empathize with users. In-depth research into our target audience deepened my understanding of their challenges, which in turn clarified the product's vision. Wireframing and designing the UIs was a learning-filled journey, and I frequently tested the screens with potential users to refine them further.
Thank You For Reading
Thank You For Reading
Thank You For Reading
© 2025 | Designed and developed by me with ♡ | All Rights Reserved.
© 2025 | Designed and developed by me with ♡ | All Rights Reserved.
© 2025 | Designed and developed by me with ♡ | All Rights Reserved.