Personal Work
Gather – PDF Reader & Notetaker
Project Information
Brief
Design a digital product that solves the problems I experienced when studying with PDF books.
- 1Students want to review PDF textbooks, but finding specific information in a long PDF requires a lot of scrolling and recall.
- 2Students want to read documents they had referenced in their notes for more context, but finding the referenced sources is tedious.
My roles · 4 Months (2021)
Definition, ideation, design & design system.
Design Process Overview
Discover
Competitor feature audit – PDF viewers
- Switching from PDF document to another note-taking tool is disorienting.
- Bookmark and mark-up panels lack visual context to content.
- Page thumbnails lack context and a sense of place.
- Users can write notes and view documents in one space.
- Users can link notes to document excerpts.
- Users can import web pages.
- Notes canvas can become disorganised.
- Page thumbnails lack context and a sense of place.
Competitor feature audit – Note-taking tool
- Fast multi-tasking between notes.
- Fast and simple text formatting.
- Robust and deep notes organisation.
- Fast and simple text formatting.
User interview & analysis
By interviewing six users, I learned that most users use online resources for their work and study. This finding prompted me to include web page capturing as part of Gather's requirements.
Definition
Defining goals
I extracted 'HMWs' from research and tests to define goals. Here, I've backlogged developing the search function (pink stickies) due to resource limitations and focused on feasible but still valuable goals like clarifying the visual design to users.
Mapping IA and functionalities
I used sticky notes to itemise requirements in Gather's PDF viewer based on competitor standards. Next, I mapped out the high-level information architecture and solutions for the 'HMW' goals and product requirements.
Ideate and Build
Sketching ideas
I translated the Definition stage diagrams into sketches to quickly test ideas for the UI and interaction flow. Here, I'm testing how users could find a sentence they highlighted using page thumbnails in a user journey sequence.
Hi-fi wireframing and prototyping
I developed this wireframe from the most successful page thumbnails feature sketch. The page thumbnails allow users to find their highlights in a book at a glance.
Test
Usability testing
I wanted to test the copy-pasting workflow between PDF documents and notes, so I asked five users to batch copy texts from a PDF into notes.
Extracting Insights
After extracting trends from the tests, I learned that users preferred drag-selecting multiple texts over checkboxes, which wasn't possible due to the prototype's limitations. Thanks to this finding, I backlogged the development of this interaction design.
Solution
Notes-taking, reading and referencing all in one place.
View and find contents at a glance.
Save and annotate web pages.
Lessons Learned
Target users offer relevant insights
Many users didn't think they'd have a use for Gather, but said it would've been helpful during university. In hindsight, recruiting target users like students would've provided more relevant insights.
Learn user behaviour from contextual inquiries
My learning of users' wants and behaviour from usability tests were limited. Thus, some design decisions lacked backing rationale. In retrospect, conducting contextual inquiries would've helped me learn more about important user tasks and how they do them.
More Featured Works
UX Design
Architecture & Art
