skillreader Academic reading app design
SI582 Interaction Design Course
Individual Project
Photoshop / Sketch / Framer
UX Designer
Design process
My whole design process can be divided into three stages:
1 Need Finding
METHODS :
6 User Interviews / Secondary Research / Needfinding Diagram
To define design problems and understand the users: who are they, what they like and hate, I conducted six user interviews. I analyzed users' information with the help of Personas.
2 Design Rationale
METHODS :
Competitive Analysis / Sketching / 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.
3 Realization and Iteration
METHODS :
Persona / Task Analysis / Wireframes
Paper Prototype /Digital Prototype
Personas based on real users’ data help me conduct Task Analysis which result in reasonable Wireframes that are tested in the paper prototypes. Then with the help of the digital prototype, I tested the detailed interaction way and interface styles with three users.
NEED FINDING
Interview
“What’s the real problem?”
| Problem Statement: College students find it hard to squeeze time for reading assignments although they think those readings are valuable.
| Research Goals: Figure out why college students don’t have time to effectively finish academic readings.
| Research Questions: what factors would affect the speed and quality of academic reading?
| Research Method: Six face-to-face interviews including 2 local students and 4 international students.
Data Analysis
| Data Analysis Method: affinity wall.
In order to analyze the real user information I gathered from interviews, I used the affinity wall to encapsulate all my user research takeaways into a diagram (as right); these sentence in the box are created from the real users' characteristics.
Real Problem
At first, I thought this problem was caused by the busy schedule and too many reading assignments, however, after conducting 6 deep user interviews, I found the root reason leads to the problem.
It's not because they don't have time to read
but because they don't know how to read efficiently.
Persona
“Who are my target users? How do they look like?"
Based on the user's interviews, I developed 4 personas including 2 primary users, 1 secondary user, and 1 anti-personas.
Persona as a tool that creates some fictional but vivid characters was continually guiding me make thoughtful design decisions in the course of designing
-
These Personas play a critical role in my QOC 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.
DESIGN RATIONALE
Competitive Analysis
I conducted a competitive analysis to capture some inspirations and opportunities for reading skills improvement.
I compared not only 4 tangible reading applications but also took 2 intangible methods used by teachers into account -reading quiz and reading response assignments.
I found none of these methods and products provide a way to handle the reading problems our students encountered in the long run:
| 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.
| Reading apps assist users to take notes easily but not how to take notes so that we can have better reading retention.
I then determined my solutions role as a teacher that can guide my target users how to read not a reading assistant tool.
Brainstorming
Sketch
Storyboard
The start of design realization
Based on the findings from competitive analysis, 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 got some meaningful and valuable suggestions for my solutions in the group brainstorm session. For example, my users 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 interesting? 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.
QOC Solution Rationale
Select the best solution
The QOC method I learned from paper Questions, options, and criteria: Elements of design space analysis written by MacLean, A., Young, R. M., Bellotti, V. M. E., & Moran, T. P is a really handy and useful way to help me make a reasonable final design decision. Based on the takeaways from user interviews and group brainstorming session, I narrowed down three solutions that were highly related to users’ preferences and my design goal. Then with the help of QOC, I determined my final solutions.
DESIGN REALIZATION
Task Analysis
“How to realize these features in a user-friendly way?”
At the beginning of design realization, I used Personas to do Task Analysis, which ended up with the wireframe that specifically described how the pages flowed to help my target users to do their tasks.
Paper Prototype
Paper prototype helped me cross the gap between the abstract feature descriptions
to concrete interaction logic in a visual way.
Paper prototypes were created based on the Task Analysis in a short time.
2 round iterations and 5 design improvements
Then paper prototype as a communicator to help me convey my design idea to the real users. 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
The high-fidelity prototype is a great tool to test user interface styles.
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.
UI Design
Aesthetic and Functional
Build good reading goal - Article Hierarchy Generator
Keep good reading direction in mind - Important Contents Magnifier
Have good retentions - Labeled Reading Notes
Words Cloud and Reading & Notes-Sharing Community