A versatile and powerful tool that makes planning and managing work a breeze. From taking notes to tracking projects and sharing knowledge, it's got you covered. Plus, it's designed to be simple and aesthetically pleasing, taking content collaboration to a whole new level.
Note: Final designs have been altered and research findings have been redacted in accordance with my NDA.
Design - Sketches, wireframing, hi-fi design, usability testing.
Research - Affinity mapping, semi-structured interviews, competitive analysis, expert evaluation
18 weeks
Feb 2023
Jun 2023
Figma
FigJam
Notion
Miro
PM
05 Developers
02 Product Designers
02 Business Analysts
03 Quality Assurance
00
OVERVIEW
01
RESEARCH
Our team divided the research work into three phases. Firstly, we performed our first research activity by defining and analyzing top document management tools to gain valuable insights. The second phase was when we conducted user interviews, cognitive walkthroughs and then organized our research findings & sorted design ideas using the affinity diagramming method. The last phase was testing the sketches, wireframes and high-fidelity designs with domain experts and users of a variety of roles.
.svg)
To reach a broader sample of our target audience, we performed a qualitative survey. In this way, we can gather rich feedback from them.
We conducted competitive evaluations by defining and taking the evaluations under the form of competitive review - where we collected and analyzed our competitors' strengths & weaknesses, and competitive usability testing - where users were asked to complete some tasks using our defined competing web apps. In that way, we could understand the apps’ product model, figure out what works and what doesn’t, and draw out some insights and initial design solutions.
We prepared a few open-ended questions that allow the participant to freely talk, the participant then asked follow-up questions, and from there we could gain so many helpful insights by understanding user's interactions and experience with some digital documentation management tools.
In this step, we gathered all insights and comments from ourour interviewees, and sorted them into different categories to quickly organize observations and key issues in current document management apps.
We remotely observed and recored the process to see how a person nagivate through note-taking/document management apps to better understand their pain points and needs.
We conducted cognitive walkthrough sessions by walking through our early conceptual designs and focusing on the cognitive processes that our participants go through as they explore the interface. From there, we could identify areas for development and ensure that our design performs just as we intended.
We had interviews with active users of document management tools and two domain experts (01 Work Plus Director & 01 Product Solution Director) to learn more about the scope of the pain points they face to understand how they manage their document, as well as what they find to be effective and where they feel there are problems.
What are the most important features that you expect the app to have?
Tell me more about them.
Why are they important to you?
Do you insert a variety of date expression ways into your document?
If yes, what are they? Name a few.
How do you feel about that?
When was this?
Did you get any trouble finding it?
How long did it take for you to find the exact document?
Did you know where the document comes from, in other words, the relation between it and other several documents?
How would that make it easier for you?
Tell me more about that.
Why is that important to you?
We collected all the data from our survey and interviews, then sorted them into corresponding categories and subcategories. In this way, notes that were considered top-level categories would help us determine our next steps in design.
Affinity mapping
Users don’t want their documents, links, plans, and projects to be scattered all over the place. Moreover, they dislike spending too much time tracking down a particular file or folder when there are too many different places and they would need to think about where they need to put the specific document they are working on, vs actually just writing the document.
Many users reported that they found it challenging to get used to feature-rich platforms. Sometimes they got lost while trying to find ways to understand at least some of the most important features and how to use them effectively.
A knowledge repository acts as a centralized repository of information that stores, organizes, and manages essential information related to a specific topic, product, or organization. Users of many roles, from managers to new hires, reported that they got problems answering a question again and again or finding the information they need to do their job. They would like to have a document management app that improves the time it takes for a new person to get up to speed, and helps team members address customer issues faster since the information on how to address the issues is readily available.
To condense our findings from the surveys and interviews, we created three user personas. These fictional, yet realistic descriptions are used to develop empathy - becoming aware of our target users: not just their needs and expectations, but also their constraints and the context of their situation as a whole. In addition, an empathy map with four quadrants Says - Thinks - Does - Feels created a shared understanding of user needs and aided in design decision-making.
.svg)
Personas (3)
02
IDEATION
We built a product module where we have an overview of our app's structure.
Product module
We created a site map to offer our users a visual presentation of the information space. The main goal is to provide a logical, clean and simple overview of content and user inferface of the web app.
Sitemap
Taking on what we've gained throughout our process to this point, I sketched out all the screens we need to explore possible solutions to our current design problems. They turned out pretty messy, yet helpful wireframes.
Paper wireframes
03
HI-FIDELITY DESIGN
We incorporated a minimalist style into our app's interface design but still managed to bring both a professional and clear impression to our users. Users can not only eliminate distractions but also keep their focus on what is important.
We designed the components in only two dimensions using the flat design foundation to promote readability and simplicity. We can reduce cognitive burden in this way, making our designs simpler. Our goal is to provide a platform for note-taking, file management, and collaboration that does not require a steep learning curve.
.png)
Homepage, My workspace, Shared with me
For management, we chose the treeview structure to organize our documents. A treeview is a hierarchical structure that provides nested levels of navigation.
The structure is good when there are large amounts of information and those information can nest within multiple levels. We focused on our target audience's frustrations when using other note-taking/file management tools, then created a file management structure that can display the relationships between documents, considerably assisting our users in navigating the platform or searching for information.
.png)
Table of contents
TreeView Anatomy
To overview a collection's status, we designed a page that includes general information: sub-document list and real-time activity updates of all documents in that collection. This feature helps when one wants to see their progress just scanning through the table, and especially for managers or C-suite, this makes the managing process much faster and more effective.
We upgraded our editor by redesigning the interface and adding some new blocks to help users' every idea come to life. Blocks are categorized into groups with supporting texts above, which helps users scan and find their blocks easier. We provided a variety of blocks so our users can turn a blank canvas into informative and stunning web pages. We will definitely upgrade this block editor in the future to bring users a more meaningful experience.
.png)
04
EVALUATION
We conducted user testing of our final hi-fidelity prototype with two domain experts, one marketing executive and one business consultant under the form of a remote unmoderated usability test. We did everything online because we wanted to have recordings of the sessions, then we observed video recordings of the tasks to collect and review the data.
We conducted cognitive walkthroughs to evaluate the learnability of the app from the perspective of a brand new user. We prepared a set of questions and asked participants coming from different teams to join and walk through each task flow. Basically, there were some key questions that helps our team to define design problems that derail new users.
We gathered our participants' feedback on document management systems before introducing the design solutions and after the cognitive walkthrough to learn about their reactions to our design concepts.
.png)
06
REFLECTION
User experience cannot exist without users: as a product team in a SaaS company, we collaborate to create and develop meaningful products. From the perspective of a product designer, I realized that everyone, from multiple different fields including development, business, marketing, design, etc. should be involved in the process of looking out for the user. We couldn’t have launched this product if we hadn’t taken users’ needs and frustrations into account during every step of the product development.
User testing is indispensable: even the best UX designers can’t design a perfect, or even good enough, user experience without observations of real users and of their interactions with the design.
.svg)
.svg)