Web Application
Overview
How many note taking apps have you tried? How many have you stuck with? How many workarounds have you come up with to meet these needs? These are just some of the questions we were asking ourselves as we started to conceptualize Sidenote. Note-taking is something we learn to do at a young age and a behavior that is personal for many. In an age where high productivity is expected, recalling, documenting, and organizing information is pertinent to success. However, with the many tools that are available, both digital and analog, this common practice can become overwhelming. We set out to create a note taking application that could meet these needs while being easily integrated into your existing workflow and help you build good note-taking habits for years to come.
Problem
Users need a simple, reliable way to track notes, reminders, and action items, one that can be recalled easily without having to learn a new, robust app that might get in the way of their routines at work.
Solution
Providing users an automated way to organize their notes over time, while keeping functionality simple & intuitive, will help users build better note-taking habits that they can integrate into their workflow.
Role
I worked with a team of 2 other UX designers/researchers. My responsibilities included conducting interviews, analyzing user research insights, creating user personas, mapping out user flows, building wireframes (low to high fidelity), designing log in/sign up, pin board, share feature, elements of the sidebar navigation, and note-taking space, as well as testing interactive prototypes.
Research
User Surveys
179 Surveys
This quantitative method allowed us to understand common trends from a larger group of potential users. We created a survey on Google Forms and shared it on Facebook. This step in our user research allowed us to empathize with the user throughout the design thinking process.
49% reported that what they like best about their current note taking habits were the “ease of use” and “convenience.”
45% reported they had difficulties with keeping track of notes over time.
User Interviews
4 Interviews
To understand users’ current pain points, needs, existing habits, and note-taking process, we started by conducting user interviews. We interviewed 4 people, asking them to elaborate on their current routines, workarounds, and experience with existing apps to collect qualitative data. Each interview was approximately 20 minutes in length.
Key Behavioral Insights
After creating an affinity diagram to synthesize our data we found the following to be true for our participants:
-
Tool: Uses a variety of tools online and offline, but hasn’t found one single tool they particularly like.
-
Routine: Wishes it was easier to adopt a note-taking routine.
-
Organization: Wishes they had a method that was more organized.
-
Easy to use: Enjoys using tools that are convenient and easy to use.
User Personas
From our data analysis, we created a user persona to help us make key design decisions and empathize with our user. Tory is a Data Scientist who is creative but also analytical. She is tech savvy but doesn't want to learn a new complicated app just to take notes. She would like to build strong note taking habits at work so she can spend less time searching for information and more time on her career goals.
Competitive Analysis
The next step in our research was to analyze three direct competitors and one indirect competitor. We understood that the landscape for a product in this category is robust, so it was important to understand what was and wasn’t working and how we could solve our specific problem. A few elements that stood out:
-
Apple Notes was very simple but had little to no organizational features
-
Evernote had tons of features to figure out and adopt.
-
Google Keep was easily integrated into the Google suite, relied heavily on skeuomorphism but was also reported to crash often.
Ideation
Problem Statement & Hypothesis
Users need a simple, reliable way to track notes and reminders that can be recalled easily without having to learn a new, robust app that gets in the way of their routine.
Providing users an automated way to organize their notes over time, while keeping functionality simple and intuitive, will help users build better note-taking habits and incorporate Sidenote into their work routine.
User Flow
By mapping the user flow of the app, we were able to better understand and visualize how a user would interact with our product. From this step we realized why a lot of existing note taking apps get overly complicated with layers of features to complete a seemingly simple task. Since ease of use was key to our solution, this exercise helped us stay on track with our goal. We were able to iterate the flow from getting too complex, which properly prepared us for creating our wireframes. This way we wouldn't go too deep down the rabbit hole, to then realize we had strayed from our intentions of keeping this product simple and easy to use.
Initial Sketches
After agreeing upon the user flow it was time to do a team brainstorm and ideation session. We started by each sketching out our ideas on paper and then coming together and sharing them with one another. This helped us ensure we were on the same page in our designs but were also able to flesh out our individual ideas to move forward. We agreed on keeping a large middle section for note taking, a left sidebar navigation and on the right, a collapsable "pin board."
Style Guide & UI
We stuck with a material design approach to help guide our visual design elements.
Typography
For a clean and friendly vibe, we used a san serif font with a little flare. Gothic A1 as our primary and Helvetica Neue for the text editor.
Color Scheme
We chose cool inviting colors that keep the design fresh and indicate different sections of the user experience visually.
Logo Design
A nod to the analog world of a pen in your pocket; this represents convenience and ease to jot down a note when and where needed.
Prototype & Test
Iterations: Wireframes to High Fidelity
Main Side Bar Navigation
The main sidebar navigation is really the hub and key feature of the product. Sidenote can be integrated with your current calendar app, so your notes are associated with your meeting markers. This provides automated and cataloged organization of your notes. Simply toggle between your Action Items, Reminders and Notes to stay on top of your work. Action Items and Reminders are populated from your notes or can be created ad hoc. Easily look at past notes, reminders and action items with a simple calendar tool. After user testing our wireframe prototype, this design went through many iterations. Our final product can be seen below on the far right.
Text Editor
I took the lead on building out the the text editor, the component where the user takes notes. This feature also went through a handful of iterations. I pulled different parts of the UI from other well known text editing tools in order to keep a familiar feel. We didn't want the user to feel that our product was foreign and too hard to learn, it needed to be intuitive. I included a top navigation for the Share function and bread crumb like organization indicator. I included optional templates when starting a new note, tagging feature to help with search and a movable editing toolbar. Users expressed that this part of the product felt familiar and were able to complete our user tests with ease.
Pin Board
I also took the lead on building out the pin board. These pins are separate from your notes, making them easily accessible and organized. Users can easily and quickly reference small bits of information i.e. codes, names, addresses, etc. Since pins are kept separate, this keeps the user organized. Hover over the pinned note and limited editing options and delete options will appear. This feature has 3 visual states: collapsed, standing and expanded, based on the user testing feedback. Pins are not meant to be the main note taking tool, only a complement to the main text editing feature.
High-Fidelity Prototype
Final Takeaways
Main Challenge & Lesson Learned
For this project I learned how difficult it can be to really stick to simplicity and not keep adding more features, when it comes to designing the User Experience. When you want to solve all the user’s pain points at once, you can get lost in the excitement of the ideation phase, losing sight of what your product is really trying to solve. It’s important to continue to refocus on the initial problem you are trying to solve throughout the entire design process. I also found that as a designer you don't always have to try and reinvent the wheel. Using best practices and familiar design patterns and flows will benefit the user resulting in higher retention of the product. Our team was able to check in with each other and do this through our design thinking, resulting in a more successful outcome.
Next Steps
For future iterations of this product we would want to release a mobile version that would seamlessly integrate with the desktop version of the app. Taking notes on the go and being able to interact with our product from any device is key to the future success of the product. We also want to include additional collaboration features as people begin to work more remotely and globally, such as thread discussions and visibility of who has viewed your notes.
