UI Design / UX Design
skillreader Academic reading app design
ROLE
Researcher
Designer
Prototyper
TOOL
Sketch
Framer
DURATION
Sept - Dec 2017
SKILL
User Interviews / Persona / Task Analysis / Wireframes
Paper Prototype /Digital Prototype / Usability Testing
introduction
Skill Reader is a cross-platform paper reading application that fuels up the university students or researchers’ paper reading by providing immersive reading experience and quick access to insights fo paper.
Problem: Reading papers are a common activity for every student and an essential activity for every researcher, but most of them find themselves either resistant to dive into the sea of the reading materials or unsatisfied with the quality of the takeaway from the readings after several hours time investment, even though most of them think reading paper is beneficial to their academic achievement.
Solution: This application is a powerful tool to solve this problem, which is powered by useful non-fiction reading techniques. The app includes the following features:
-
Users can quick access to the insights of the paper of interests:
-
Reviewing the self-generated note collections related to the paper.
-
Checking out other readers’ note collections of the paper on the community page.
-
-
Users can select only to read the most important contents of the paper automatically filtered by the app based on the hierarchy of the article: titles, paragraphs, lines, table or figures.
-
Instead of creating a notebook, note taking experience in this app is insight focused. Users can create their note card collections. Note taking is as simple as writing your thoughts on the margin of a physical paper. insight-focused and easy note taking.
design process
① Need Finding
6 User Interviews / Affinity Diagram / Persona
To define design problems and understand the users: who are they, what they like and hate, I conducted six user interviews, and then analyzed users' data with the help of Affinity Wall and finally synthesized these findings via 4 Personas.
② Design Rationale
Competitive Analysis / Sketching / Storyboard / QOC Design Rationale
Brainstorming and Sketching opened up multiple design possibilities for this problem while Competitive Analysis and QOC design rationale enable me to narrow down the scope of the solution.
③ Realization and Iteration
User Flow / Information Architecture / Wireframes / Prototyping / User Testing
Personas based on real users’ data help me conduct Task Analysis which result in reasonable Wireframes that were tested in the paper prototypes. Then with the help of the digital prototype, I tested and iterated the detailed interaction way and interface styles with three users.
User Interview
“Define the design problem with real needs of target users.”
| Target Users: College students.
| Research Goals: deeply understand the expectations, motivations, and frustrations of target users about academic paper reading.
| Research Method: 6 face-to-face interviews including 4 Master students, which include two International students and 2 Ph.D. students. I used the affinity wall to encapsulate all my in-depth user interviews takeaways into a diagram (seen as below); these sentence in the box are created from the real users' characteristics.
| Answer
What: The problems I found from the interviews are mainly around:
-
Hard to find time to read
-
Hard to remember what they've read
Why: The above diagram helped me to identify the root cause of the reading problem: Lack of reading skills caused low efficient reading experience and then hampered the motivation to read these articles even though they think these words are beneficial.
How: to sum up, our users need some tools which could help them to read more efficiently, like quickly getting access to the important insight of the paper as well as good retention after reading.
Persona
“Visualize the mental models of your target users."
To better utilize these insights from the target users for later design, I generated 4 personas including 2 primary users, 1 secondary user, and 1 anti-personas based on the user's interviews.
Persona as a tool that creates some fictional but vivid characters was continually guiding me to make thoughtful design decisions with users in mind in the later course of designing:
-
These Personas play a critical role in my design rationale by generating the should-do and should-not-do lists regarding these four personas’ preferences, personalities, and habits.
-
Through conducting task analysis for these personas, I developed user-centered and thoughtful wireframes for my applications as guidance for my prototype.
Competitive Analysis
“The opportunity and inspiration from products around market."
According to target users' problems and needs, I did some researches on current solutions by comparing not only 4 tangible reading applications but also 2 intangible methods used by teachers -reading quiz and reading response assignments.
There is a lot of reading apps around the market that address different reading problems, but none of these methods and products address the problems our students encountered in the academic paper reading:
-
Reading apps assist users to read across devices and take notes easily but none of them helps the reader to improve the efficiency of reading.
-
Reading quiz and response assignments indeed enhance their reading efficiency, whereas this method only solves the reading problem for a specific course, not apply to the overall academic reading problems.
|The Opportunities: Thus, my application is going to focus on empowering our target users to become more motivated, and skillful for non-fiction reading.
Brainstorming & Sketch
“Start to brainstorm the specific solutions."
Then, how to improve the motivation and the efficiency of the paper reading?
I brainstormed and sketched 8 different solutions. Sketching was a great way to help me do brainstorming and storyboarding helped me gradually flesh out my design solutions, which provides sufficient details for afterward design rationale.
I had a chance to discuss these ideas in a brainstorming session, where I got some meaningful and valuable suggestions. One potential user reminded me that whether the reading experience is enjoyable is also important to enhance reading efficiency. I kept this question in my mind during my later design process-how I can make the reading process engaging? Someone suggested me that locating the main points of an article by concept cards can help readers review easily. This idea gave me a great inspiration; my final solution for labeling some important content of the article was inspired by this.
These discussions lead me to identify three main goals my design aimed to achieve to improve the motivation and efficiency of paper reading:
-
Motivation. Easy access to the insight of interests from the paper.
-
Engagement. Engaged reading experience by adding insight cards freely.
-
Efficiency. Users can select only to read the most important contents of the paper automatically filtered by the app based on the hierarchy of the article: titles, paragraphs, lines, table or figures.
Storyboard and Task Analysis
“How will the target users use this app? "
To provide more details of my design concepts about the motivated, engaged, and efficient paper reading experience, I drew the storyboard that vividly depicted user reading experience on this virtual app.
I extracted key tasks that my app will assist users to accomplish, then used Personas to do task analysis for the reading process.
Wireframe
“The body of the product should be a good reflection of the mental model of users accomplishing these tasks."
The step-by-step tasks turned out to be the visualized wireframe that specifically described how the pages flowed to help my target users to do their tasks. The page flow is aimed to provide a smooth, engaged, and efficient reading experience. Here is part of the wireframe.
Paper Prototype
“Test the mental model of the product by real users."
Paper prototype as a communicator to help me convey my design idea to the real users. To test the wireframe of the product, I built low-fidelity paper prototypes based on the Task Analysis results to test the gap between what I thought users will accomplish the tasks and what they really do to finish their tasks.
2 round iterations and 5 design improvements
I tested this interaction flow with three real users where I got some useful feedbacks that led to 5 design improvements in the interaction flows. For example, two users asked me how to edit these notes when reading, which inspired me to add an “edit” button for these notes so that readers can change these notes while reading without leaving reading modes. ( See Below ) I also changed the location of the add book button according to the confusing observed from tests.
Digital Prototype
“Test the visual style of the product by real users."
Tool: Sketch, Framer
Digital Prototype Link: https://framer.cloud/SVnww
High-fidelity prototype is a great tool to test user interface styles.
For example, while I asked users about their feelings concerning my UI style, some of them told me that “I can’t view it as a reading app cause it is just like any other apps.” I fixed this problem by adding some realistic elements into the interface; the background has added some wood pattern and other interactive features like the navigation bar and sidebar are shown in a paper-like way. After changing, all of my tested users told me that they more like this version which gave them a sense of reading with paper on a wood desk.
High-fidelity prototype is also a useful tool to test some interaction details like with which way we can activate a feature, long-press? Tap? Double tap?
For instance, in the course of developing this prototype, I found that if highlighting a sentence is activated by tapping, it would conflict with other functions- showing the navigation bar by tapping on any place on the screen. Thus, I changed this interaction way from tapping to long-pressing. By long-pressing the sentence, users can highlight it. To sum up, the digital prototype is a self-tested and testable.
Visual reDesign
Highly efficient academic reading experience powered by scientific reading methods. The whole reading experience of this app is highly efficient and content-focused.
Before reading. Once the user is landing on this app, they can quickly access to the reading material of interests via a clear and direct list of sources. The most recent reading material is always on the top of the list because it’s highly possible that the reader wants to keep reading it or reviewing the content of the paper. To make sure the paper access is as easy as possible, the app also supports direct searching by name or categorized searching by labels.
