Quote Block
A tool to help users save quotes, make notes and revisit them and learn
40K downloads and reach in 180 days of launch
Mobile, iPad, Desktop
Passion Project
Overview
Ever read a book and liked a turn of phrase that you wanted to save for future reference? Or take notes a little less painlessly when reading that article? Now you can. Add quotes by taking a picture of a text and cropping the region of interest, or by typing in the text. Tag and annotate them. Look them up when you want to review that article or revise a book you just read!
Role
​
UX / Product Designer
​
Research, Information Architecture, Interaction design,Visual design, Prototyping and Testing
Problem
​
No good way to re visit quotes from books read and too tedious to digitise these and make connections with all texts
Solution​
​
A tool that has OCR capabilities and allows users to make tags relevant with texts and quotes to help make connections later when you revisit them
Timeline​
​
8 weeks
​
2019- 2020
-
Overhauled the Information Architecture for an iOS note taking app called QUOTE BLOCK. Conducted target user research amongst 52 candidates and an affinity map. Defined workflows, wireframes and interactive prototypes. Worked closely with the developer to ship on mobile and iPad.
-
Completed over 2 months, follow up on feedback 1 month, desktop UI over 1 week.
-
Created responsive UI for iPad and desktop App version.
Platform​
​
Mobile, iPad, Desktop
Disclaimer: The project presented here lived on teh iOS app store for 2 years and will be leased with updates created earlier by September this year- those updates were created by me early 2020 but will not be published here until release
The Project
After much talk over few months the founding team arrived at a product problem to solve -
Help users who are looking to make notes relevant to them digitally and create a digital bank that can be tagged for future reference when needed, from books they read.
​Research goals
​
-
to create a tool for learning​
-
more than an app for note taking and then forgetting about a note​
-
there are already many note taking apps where you take notes and it disappears into a black hole
​Research objectives
​
-
what is learning to people today?
-
understand what are peoples motivations to take notes
-
what are their current concerns about note taking?
-
uncover what are the current methods out there for note taking
-
discover what Quote Block can do to make their concerns and problems with note taking disappear
"
How can we remind and create memory or intersections of things we have read in the past? Which target audience would find a tool like this relevant?
"
Process
Research Process
​​
-
Secondary Research methods used:​
-
Competitive analysis- help understand and collect statistics from other competing note taking applications out currently and what are their marketing strategies​
-
-
Primary Research method used:
-
Surveys- used to help determine statistical information needed about readers and digitising notes​
-
User interviews- these interviews with readers will help determine necessary features to include for note taking
-
Usability testing- Testing this product will help determine if this helped resolve all pain points for readers looking to make notes while they ready and if there are still pain points and issues to resolve
-
​
​
Product Research
Before getting our started out researching what the best UX and UI practices were for other note taking apps, I ran through some important questions relevant to these apps .
I ran these by the MVP's listed by the developers and after some research we put together some questions that would help us create a UI priority list before we started interview and wire frames
Key benefits​
​
The app will allow users to not only use the OCR option but additionally help them make connections between things read and saved by tags
Target users​
​
Avid readers and students looking to make notes and revisit them or be randomly reminded of plausible connections will be the audience for this product mainly
Research
Competitive analysis
To have a better sense of what makes quote block standout in the competitive knowledge and ed tech products I looked at other methods of note taking people use currently and why those are their preferred methods today
- Notion
- Bear
- Apple Notes
​
Vs Quote Block
Notion has a large number of functions but it is not a app that caters to readers looking to make notes of their reading material using their phones OCR abilities
Vs Quote Block
Notes do allow OCR today as of late 2021 but they have no tagging mechanism and do not have that learning feature which allows users to draw connections between things they have read
Vs Quote Block
Bear Notes don't have the OCR ability and even though it is extensive feature wise it is not designed for Readers
To Conclude
01. OCR star feature
02. Tags another feature to help nurture learning
Consolidation of research questions
Understanding the Users
-
What does learning from notes mean to you?​
-
How do you take notes?
-
What are you looking for usually when taking notes ?
-
How often do you look back at your previous notes or markups from reading previously?
-
How do you currently save your notes?
-
How do you currently search through your notes? Is there a system in place currently?
Other Questions to keep in mind
​
- What exactly is learning? forcing our brain to reach and recall and make necessary connections to remember a note or a fact or a quote.
​
- What is creativity? making connections between different disparate ideas in novel ways.
Participants
Once I had an understanding of what these answers entailed and what they would help me gauge to help my UX research I put together a survey for a few users and put together an interview set of questions for the ones I could talk to over the phone.
​
​
-
adults looking to make notes while reading and studying
-
people looking to make connections between all their notes
-
targets people using books, markers and digital notes
-
people who find it hard to locate previously taken notes
-
product developers are looking to build a product like this as well for their personal use as well
-
tech savvy individuals
-
students and adults
​
​
​
Product specs based on UX interviews and surveys:
​
-
Surfacing necessary connections between notes/ quotes made note of within the app (BY TAGS)
-
display connections on every screen- on homepage, by a random tag, or by a the last few common tags, a side panel, showing a quote of the day, by looking at the calendar.
-
the over all goal is to make links between different texts made visible through tags
-
using design practices to encourage people to make notes and jot quotes by using QB as an external dump for thoughts in their head, quotes from books they read.
-
by making QuoteBlock the first thing they want to visit in the morning and the last - delight factor for the user -very important
-
by making this annotation the overall note taking process will be seamless for both books and web by using the web clipper if needed.
-
by forcing recall and context - without notifications.
​
Define
Need for an easy way to take notes while reading a book or studying
​
​
Establish how QuoteBlock is unique in comparison to the other note taking products
​
​
Need a responsive UI for the product on Mobile, iPad and Desktop that is modern clean, easy to use, fresh and yet memorable that people wish to come back and use it
All information to be provided
- Info about making account for multiple device access
- explicitly inform user how many free notes available
​
​
Inclusive design
- for people looking to use OCR function to take notes
- for people looking to make notes by simply having the option to type them into the app
​
​
​
Organised notes
- organised notes by Tags
- organised notes by latest ones created
- guide to explain how they should use the app
- ability to favourite your notes
​
​
​
Key Insights
*****This product has alot of dense research which is proprietary and confidential. If you would like to learn more about the visual design elements and other design products of Quote Block do contact me and I am happy to discuss our process in detail with you.*****
Challenge highlights for me-
Discover
​
Finding the best way to use UI to inform the flow of the Product
Organisation
​
Finding ways to align the experience so that users find it easy to access all the past notes and search for what they look for easily. Eg - search by tag
Valuability
​
Find a way to keep users and retain them thru iterations and various launches of the product
​
Responsive so users can access their info on all devices
​
Cloud access so the same information can be saved and re accessed on other platforms
Iterate Flow
Task Flow:
​
-
Task flow help assign a basic path through the product where the user is logged in and has two options where he can either search for quotes/notes or directly create a new note/quote using the OCR built in feature. This feature is catered to the users for 7 free note/quote creations beyond which the product has a purchase constraint.
​
​
// Basic Wire Frame to help understand basic functionality of the App -- TASK FLOW - Additionally helped me understand what this layout was going to look like
​
​​
User Flow:
​
-
User flow had to be analysed for all possible options since the product was not for one typical user. The product had to cater to people looking for a quote or note they created in the past, people looking to create a new note/ quote from a book they are currently reading using the OCR star feature, people looking to create a regular note without OCR and people looking to just revisit an old note to make edits or re discover.
-
This additionally helped in creating a Product road map with we created to help prioritise most important features to design before working on all the other functions of this product
Define
Branding
UI Kit
-
based on user testing and survey - the logo and brand colours were picked after multiple iterations.​
-
This exercise was carried out during the process of research to double up on availability of time and getting the product ready for development
-
While conducting these logo and iconography surveys - some icons were created specifically to explain some of the functions within this application.
// Iconography and research conducted to best describe the Application
1
3
2
-
Splash screen leading upto the Home screen
-
Home screen hosts all current notes and quotes by the user
-
Create a new note/ quote if needed
-
Search through notes and quotes user is looking for
-
Additionally, ability to favourite a note on the home page
Prototype Test
Testing
Feedback after first release:
​
-
some icon sizes had to be increased to allow click-ability since CTA's are meant to be obvious, draw attention from the users and give a memorable experience when tapped on.
-
additionally there were some questions about the icons for notes (books in a row) there was a concern that it wasn't clear as to how that was different from the ones that had quotes iterated next to it
-
the other icons were all self explanatory and users understood their purpose and how to use them without fumbling
-
users enjoyed the search by tags or quotes toggle bar it helped tailor their search well
-
additionally users found the access to tags on side bar menu to be useful to simply see all tags created and look up notes by tags
-
they had some questions about incorporating a swipe delete feature on home screen to delete notes so they can avoid entering the note for deleting it
Summary
​
The app is intuitive and iconography and memorability helps the me navigate easily
Testing participant
​
It feels like ive been using this for a while and already know where everything is​
Testing participant
​
I cannot believe there is such amazing connections to help navigate the learning part of QB​
Testing participant
​
I will be using this alot in the coming months through medical school to help me remember my Objective material which I need to be often reminded off ​
Testing participant
iPad Prototype
Released as part of third release in 4 months of it hitting app store
Mobile Prototype
released as part of 1st release in 8 weeks .
40k+ downloads in the first 180 days !!
Desktop Prototype
This release never made it to the app store - but has potential to be released this year in September
First sole design experience
Working on this product was my first interaction with developers. Understanding their needs was vital and the timeline was short so it was important for me to strategise and deliver all the information precisely and with all the component data in the best way possible.
Project is in the works and will have more features in the coming months
As part of my original role I did create prototypes for more features which will be coming to the app store soon this year end as part of another update. Additionally this is the reason alot of the information from the case study cannot be share on this plat form at the moment . If you would be interested in the whole design process I am happy to walk you through the material and talk about my process on this project
Retrospective