Collaborative Note-Taking Application
UX Design
Project
Background
Every day, teams around the world use note-taking applications to improve communication and collaboration. Most commonly used note-taking applications offer at least some features geared towards helping teams accomplish this goal; however, the subset of note-taking applications that specialize in synchronizing notes with audio recordings (e.g. of lectures or meetings) completely lacks this kind of functionality. I designed SynchroNote to provide users with the power of audio/note synchronization while improving experiences for teams by emphasizing collaborative tools.
My Role:
- User Researcher
- User Experience Designer
- Information Architect
- User Interface Designer
- Content Strategist & Creator
- Visual Designer
- Interaction Designer
Deliverables:
- Competitive Analysis
- Persona
- Journey Map
- Empathy Map
- User Stories
- User Flows
- Site Map
- Sketches
- Wireframes
- Mood Board
- Style Guide
- High-Fidelity Mockups
- Interactive Prototype
Problem Statement
Users of synchronized audio-recording and note-taking applications lack the ability to work collaboratively on their notes. This lack of functionality creates points of frustration for users and the teams that they work on.
Audience
SynchroNote has a very diverse audience base that can be loosely sorted into 2 categories: students and business professionals. Users vary in location, industry, and years of experience. Their ages range from 16 to 64.
Solution
In order to maintain audio/note synchronization while also allowing multiple users to take notes at a time, I designed SynchroNote around the use of sessions. Under this system, one user hosts the session and records audio and notes; any users invited to join the session take their own notes on a separate page while the notes are synchronized to the host’s audio recording. Once the session is complete, notetakers can see each others’ notes and consolidate the most important pieces of information gathered onto a “Session Highlights” page.
Discovery & Research
I began the discovery phase of my design process by developing a research plan. In order to collect the qualitative and quantitative data that I required to make informed design decisions, I decided to utilize 3 types of research studies: a competitive analysis, a user survey, and user interviews.
Understanding the Competition
The first bit of research that I conducted was the competitive analysis. It helped me gain insights into features being offered by other audio-recording/note-taking applications, as well as how they organized their information architecture. The 3 note-taking applications that I researched were Noted, Notability, and AudioNote.
Noted stood out due to its fully customizable text editor. Users have full control over their text’s font, size, color, and more. It is the only app in my analysis that offered users that level of customization. Noted’s main weaknesses were the complete lack of a note replay feature, as well as only offering a drawing tool on their mobile version.
Based on my analysis, Notability is the strongest overall competitor. It provides users with customizable text tools, note replay, and an internal file system. Besides its lack of collaborative tools, Notability’s main weakness is a lack of visible note timestamps that makes it more difficult for users to find their place in the audio.
AudioNote is the oldest of the competitors. While it does provide note replay, visible time stamps, and a fully customizable drawing tool, it has an unattractive, outdated user interface and lacks an internal file system. Users can only download files in their native format and can only open them using Audio Note, which further complicates sharing notes with others.
Identifying Pain Points with a User Survey
After learning about the audio-recording and note-taking applications that are already on the market, I needed to learn more about the people who utilize such tools so that I could create a method of collaboration that would be both approachable and intuitive.
In order to gain data on users’ experiences with collaborative note-taking, I developed a survey with Google Forms. The survey was 15 questions long and asked participants about their typical methods of capturing notes and sharing them with others. Due to SynchroNote’s emphasis on collaborative note-taking, the survey included a screener question that filtered out participants with no experience collaborating on or sharing notes.
The questions in the survey were intended to identify pain points that users experience when collaboratively taking notes; they were also intended to identify the kinds of functionality that users require to meet and exceed their note-taking needs.
Participants:
- 21 participants
- Ages 25-64
- Recruited from various Facebook and Reddit groups
- 1 participant screened out
Major Inquiries:
- Preferred method of taking notes and collaborating
- Most needed features for note-taking applications
- Frustrations experienced while note-taking
- Frustrations experienced while collaborating
Once analyzed, the data from the user survey provided many useful insights that were essential in making decisions about the scope of the project and developing the future user flows.
Gaining a Deeper Understanding with User Interviews
In order to gain a richer, more nuanced understanding of user's previous experiences with collaborative note-taking, I finished my research efforts with a series of user interviews.
For this study, I conducted interviews with 2 individuals regarding their experiences with collaborative note-taking and with note-taking applications.
Participants:
- 24yo Female, interviewed over Zoom
- 27yo Male, interviewed over Zoom
Major Inquiries:
- Past experiences collaborating on notes
- Preferred note-taking applications
- High priority tools and features
- Pain points and places for improvement
"Going back through my audio recordings was always a such hassle...I would end up re-listening to an entire lecture just to trying to find a single part."
Summarizing Research Takeaways
By analyzing the data gathered through the user survey and the user interviews, I was able to identify the major pain points that users experience when utilizing note-taking applications and collaborating with others. Knowing these pain points allowed me to identify needs that hadn't been met by other note-taking services so that I could provide solutions with my design.
With the survey and interview data, I was also able to identify some of the delights that users had encountered in their experiences. These delights further informed my design decisions by allowing me to more accurately prioritize what features should be included in the MVP.
Pain Points:
- Inability to take notes as fast as the lecture or meeting is progressing.
- Having to consolidate and organize notes from multiple people.
- Difficulty identifying who contributed what notes when collaborating on note-taking.
- Having to re-listen to long portions of audio recordings to find the right information.
Needs:
- Ability to record audio so information is not missed.
- Quick and easy way to consolidate multiple users’ notes.
- Clear identification of notetakers and their contributions.
- Ability to easily find the portion of audio associated with particular notes.
Delights:
- Everyone having access to the same notes.
- Being able to include drawings and images in note files
- Having access to an automatically generated transcription of audio recordings.
Desires:
- Ability to work together in the same note-taking space.
- An assortment of note-taking tools that allow for flexible note-taking.
- Improved accessibility for users with hearing impairments.
Identifying the Primary Personas
After completing my research, I used what I had learned to develop personas for SynchroNote's two predominant user groups: students and business professionals.
While these two personas do not account for all of SynchroNote's potential users, they do represent a large portion and will serve as important reminders throughout the design process that the goal is to solve a real problem for real people. They ensure that empathy stays at the forefront of all design decisions.
Sophia M.
Demographics:
- College Sophomore
- 20 years old
- Single
- No kids
Bio:
- Sophia is a sophomore pre-med student who takes an assortment of classes on complex topics. In order to get into a good medical school, she has to keep her grades as high as possible. To help with her studies, Sophia relies on note-taking applications to capture information and review for tests.
Goals:
- To record class lectures so that she can listen to them again for review
- To capture detailed notes that can be used as study materials
- To improve her note-taking efficiency by collaborating with classmates
Frustrations:
- Searching for information within audio recordings is very time-consuming
- Consolidating notes with classmates is tedious and messy
- Classmates with hearing impairments are not able to fully utilize audio recordings
"I can’t collaborate with my friends on the audio-recording app that I typically use...I don’t want to sacrifice recordings of lectures just to be able to work with my friends.”
David H.
Demographics:
- Marketing Executive
- 32 years old
- Married
- 1 kid
Bio:
- David is an executive responsible for the marketing department of a quickly growing company. His team holds frequent meetings to discuss the progress of different campaigns, but ineffective note-taking often prevents proper follow through. He needs an effective note-taking system to help keep his team organized and moving forward.
Goals:
- To keep his team’s notes in one organized location
- To capture all important information during meetings
- To clearly identify which team members contributed what notes
Frustrations:
- Difficulty getting detailed notes for fast-paced meetings
- Inability to see who has contributed what notes
- Collaborating on the same note file leads to disorganized notes
“Too many things are slipping through the cracks...Everyone tries to help and contribute, but it just turns into chaos.”
Continuing to Empathize
with the Users
Once I had completed my research and established target personas, I needed to further explore the delights and frustrations that users would encounter when utilizing note-taking software or taking notes collaboratively.
In order to better understand and empathize with SynchroNote's target audiences, I created empathy maps. These resources helped to ensure that all of my design decisions remained aligned with the best interests of users.
Prioritizing Features and Establishing the Project Scope
During my research, I identified many different needs, frustrations, delights, and desires; however, only a limited number of those can be addressed at given a time. In order to establish a scope for the project and to focus my design efforts on the most important features, I created a list of the highest priority user stories that should be addressed by any of my potential solutions. Each other these stories must be satisfied in order to truly solve the problem statement and meet the standards of a minimum viable product.
Beyond these high-priority user stories, there were others that I determined were outside of the scope of the MVP. These included inserting pre-made shapes, editing the audio recording, and searching the users’ notes with keywords.
Clarifying the Information Architecture with User Flows
Once I had narrowed the scope of the project down to the highest priority user stories, I began to develop user flows for all of them so that I could break each process down into the singular actions and resources that would be necessary for a user to successfully accomplish their goal. By completing these user flows, I took the first step towards developing the site's information architecture and content strategy.
Ideating Potential Layouts with Wireframe Sketches
With my user flows completed and my information architecture already begun, I started to sketch out possible solutions.
My first round of sketches focused on fulfilling the high-priority users while experimenting with potential layouts. The second round of sketches focused in on the location and behavior of individual elements. My final round of sketches iterated upon the first round of sketches, but increased the fidelity of the content and updated components to reflect decisions made during the second round of sketches.
Refining Spacing and Alignment with Digital Wireframes
After utilizing sketching to develop SynchroNote's foundation, I moved to Adobe XD to create digital wireframes. During this step in the design process, I focused on refining the size, spacing, and alignment of different elements on the page.
In the second iteration of the digital wireframes, I began to increase the fidelity of the design and add content to provide the necessary context for effective usability testing. In this round of wireframes, I also began to show aspects of the interaction design.
The second iterations of the wireframes were used to create the high-fidelity mockups and interactive prototype.
Developing the Brand for a Cohesive Visual Design
Once the layout and information architecture had been finalized with the mid-fidelity wireframes, I moved forward to developing the app's branding.
As I began considering how to brand a collaborative audio recording and note-taking application, I returned to the two personas that represent the app’s target users. I started to brainstorm what kind of characteristics they would relate to. As with the other phases of my design process. I made my decisions based on what I believed would best meet users’ needs. I developed the brand with the following characteristics in mind.
SynchroNote Brand Characteristics:
- Collaborative
- Professional
- Creative
- Approachable
Mood Board:
Mind Mapping for Name Selection
As the brand vision became clearer, I began to brainstorm potential names for the application. I completed a mind mapping exercise to help generate inspiration
In the end, I decided on the name SynchroNote due to the importance of synchronization in the design. Organization of notes and effective audio review both depend on the notes being synchronized with the recordings; additionally, effective collaborative note-taking requires that team members be in sync with one another.
Iterations of Logo Design
With the application's name decided, I moved forward with designing the brand's logo. I began by creating several rough sketches to experiment with possible designs.
Next, I moved into Adobe XD to develop the final digital version. To further incorporate synchronization into the branding, I decided to include a sync icon within logotype. I chose a clean, sans-serif font(Poppins) and increased the spacing for an open, minimalistic feel. It encourages the user's notes to speak for themselves.
Developing the Color Palette
The next step in the branding process was to decide on the app's color palette. In order to evoke feelings of openness and creativity, I began to search for green hues; to add a sense of calm professionalism, I selected green hues that contained faints touches of blue.
For the main background color, I utilized a soft ivory color reminiscent of notebook paper. I chose a charcoal grey paired with black for text and dark backgrounds.
Establishing Typographic Hierarchy
I began to make decisions about typography at the same time that I began working on logo design. I selected Poppins for the logo because of its clean, approachable feel. As I considered the brand and its intended users, I decided to use Poppins throughout the design; the simplicity of this minimalistic font worked perfectly for a design based on accessibility and approachability.
As I began to draft a style guide for SynchroNote's visual design, I documented the many variations in typography utilized throughout the product.
Establishing Style Guidelines
As I previously mentioned, I developed a style guide for SynchroNote's visual design. I created this resource to improve consistency throughout the application.
In addition to documenting the correct color hex codes and font styling, the stye guide establishes rules for color usage, button shapes, and interactions.
Validating the Design with Usability Testing
With the first iteration of design and branding complete, the next phase of my design process was usability testing.
Participants:
- 5 Participants
- Ages 24 - 53
- In-person testing
- Adobe XD prototype
Tasks Tested:
- Creating new sessions
- Inviting friends to collaborate
- Recording audio
- Using note-taking tools
- Viewing other notetakers' notes
- Adding notes to Session Highlights
- Adding notes to Session Highlights
- Viewing Audio Transcript
- Using Note Playback
Summarizing the Usability Results
The results of the user testing indicated that the design successfully provides the functionality mandated by the high-priority user stories. 100% of the usability test participants were able to complete all of the tasks that were tested.
The testing also revealed some areas that are in need of improvement. Even with a prominent location on the left side of the top navigation bar, the "Create New Session" button was consistently overlooked by users. Multiple users gravitated towards the "Add Folder" button in Session Library when searching for the "Create New Session" button.
Another issue revealed by the usability testing was inaccessible interaction design in the form of hover states with low contrast. While users could still read what the buttons said during the hover state, the low contrast forced them to have to slow down and focus harder on reading the information.
"I really love the colors and vibe of the design."
“At first, I thought the 'New Folder' button was the 'Create Session' button, but I was able to figure it out."
“The hover states on the buttons are kind of dark and harder to read."
Overall Experiences
The experiences of usability test participants were, overall, very positive. Users were able to fulfill all six high-priority user stories and and stated that they found design to be organized, attractive, and easy to learn.
Design Revisions for Improved Usability
Utilizing the feedback that I gathered during usability testing, I was able to identify and improve aspects of the design that were detracting from a positive user experience. Two main revisions were made for the second iteration of the design.
The first revision was related to the difficulty that users were experiencing when locating the "Create New Session" button. In the first iteration of the design, the button consisted of an icon that expanded to say "Create New Session" when the user hovered over it. In order to clarify the button's function and make it stand out more to users, I decided to have the words "Create New Session" show during the button' s default state as well, instead of only during the hover state. This revision should remove ambiguity about the function of the button.
Before:
After:
The second revision was related to the styling applied to the group of buttons that appear on a dark grey background. Originally, the buttons switched from a light theme to a darker theme when the user hovered over them; however, usability testing revealed that the darker theme was more difficult for users to read. In order to increase the contrast and make the buttons easier to read, I changed the hover state to a lighter theme that exceeds WCAG AAA contrast standards.
Before:
After:
Recommendations for Future Iterations
With the core functionality of SynchroNote completed, the next steps for improvement will be aimed at improving the efficiency of the app’s collaborative features and expanding user’s nota-taking capabilities.
Possible Future Features:
Interactive Prototype
The final deliverable for this project is an interactive prototype that exemplifies hows users will take notes, collaborate, and more.
Final Thoughts
Successes:
The interactive prototype received high usability scores.
Overall, users found the design to be both intuitive and visually pleasing. All usability test participants were able to complete 100% of the usability test tasks, indicating that the design is free from any major usability issues.
This project served as an opportunity to learn a new design program.
Prior to this project, I had exclusively used Figma for creating wireframes and prototypes. I decided to complete this project with Adobe XD because I wanted to intentionally challenge myself to grow and improve my skill set. While this decision did require that I spend extra time learning new software, it was worth it to expand the base of tools that I can use to solve users’ problems.
Learnings:
Accessibility standards must be considered during any and all branding changes.
As I developed SynchroNote's visual design, I occasionally tweaked the color palette to increase contrast and make elements easier to read. At one point, I decided to use a slightly darker background color so that it would have enough contrast with the lighter accent color that appeared with it. When I made this change, I unintentionally lowered the contrast of the hover state for a group buttons that also utilized that background color. I was able to catch the mistake during usability testing, and will make sure that I fully consider how color changes will impact user interactions in future projects.
Considering interactions while sketching makes the rest of the design process easier.
In previous projects, I spent my sketching time so focused on layout, spacing, and alignment that I didn't fully consider factors like interactions and animations. This lack of planning caused the need for avoidable revisions during the prototyping phase of my designs. With SynchroNote, I began considering these interactions as soon as I started developing the user interface. The result was a smoother design process with fewer revisions.
In-person user testing provides much richer feedback than unmoderated user testing.
In previous projects, I have predominantly utilized a user testing tool such as Maze to conduct unmoderated usability testing. For this project, I decided to conduct moderated usability tests so that I would have the opportunity to ask participants follow-up questions and gather additional information. The information that I uncovered with these follow-up questions allowed me to make important revisions to the design.
