Notewardy Reading Dashboard

Worked with our Ed Tech clients Notewardy, our design team build a dashboard to help college students achieve a faster and more convenient skim-reading experience by providing support for multi-tasking sections, clear annotation labeling features, and trustworthy source indicators.
Role
UX Designer
Timeline
Jan 2023 – May 2023
Team
2 UX Designers
1 UX Researchers
1 Product Manager
1 Developer
Skills
Figma
Miro
MY ROLE
I contributed to the overall design process and oversaw aspects related to product scoping, user flows, wireframes, prototyping and usability testing. I conducted user research, communicated with clients to produce viable ideas.

CONTEXT

What is Notewardy?

Our client Notewardy is a generative AI focused tech start up aiming to revolutionize digital learning experiences. For our project, we were asked to design a new product 0 - 1 to help students with note taking.

As part of my final capstone project in Cornell's Information Science program, my team and I collaborated with Notewardy to propose a new feature and workflow for the main dashboard, which focuses on improving the skim-reading experience.

PROBLEM

College students have limited time but face an overwhelming # of lengthy reading assignments.

College students frequently encounter extensive reading assignments and often prioritize efficiently capturing the main points to fulfill class requirements. They are trying to improve the process of extracting key information from these readings to optimize their time management and academic success.

SOLUTION

An AI reading dashboard to streamline college students' skim-reading experience

We designed the MVP for Notewardy Dashboard, which revolutionizes skim-reading for college students,  by integrating multi-tasking sections, clear annotation labeling features, and trustworthy source indicators, ensuring a faster and more convenient academic experience.

OVERVIEW

My role and impact

I contributed to the overall design process and oversaw aspects related to product scoping, user flows, wireframes, prototyping and usability testing. I conducted user research, communicated with clients to produce viable ideas.

25%
Reduction in Reading Time
High
User Satisfaction Increase in Net Promoter Score (NPS)
20%
Increase in User engagement

Collaboration is a key tone in the process.

I closely collaborating with cross-functional teams and pitched the final proposal to the leadership, garnering their full support.

Design process

I spent about one month on the discovery research, deeply exploring the potential user needs and market environment by using a variety of research methods shown below. This laid a solid foundation for our following ideation work.

PART I

Discovery

PROBLEM FRAMING

Human-level explanation

Balancing the gathering of key information with time constraints is an ongoing process for students. When faced with limited time, they must consider two perspectives:

01 | Gather key information
The challenge students face while skimming is the overwhelming amount of reading, particularly for incoming students.
02 | Managing time effectively amidst competing demands
In the context of students, this means strategically prioritizing activities such as studying, attending classes, participating in extracurricular activities, and maintaining personal well-being.

Use cases

Our focus lies in improving skim reading, primarily targeting new college students or those in social science programs with extensive reading materials with the need for efficient skim reading.

GOALS

Product motivation

We want to enhance the student experience, and understand user motivation as to why they're willing to have a better experience on skim reading and what factors matters when they skim.

01 | Design Goals
Our design goal is to create a reading tool that helps students efficiently skim read while providing an intuitive interface.
02 | Business Goals
Stakeholders aim for a high retention rate on platforms and the effective use of generative AI.

SUCCESS METRICS

What does success look like?

Working with the stakeholder, we learned what defined what success looks like for this project.

PART 2

Define

DOMAIN RESEARCH

How does literature identify methods for enhancing the reading experience?

We started our discover research by conducting a literature review by analyzing 10 articles regarding learning feedback to further my understanding of the problem.

01 | Capture Keywords and Summary Information
The challenge students face while skimming is the overwhelming amount of reading, particularly for incoming students.
02 | Use for Converation AI
When reading with a specific purpose, people prefer the use of Conversation AI for Q&A, as it streamlines the process and reduces the need for multiple tools.

More findings

Validation: Many studies and articles have highlighted the challenges college students face when it comes to their reading experiences, such as skimming through texts and extracting crucial information. This issue is particularly significant for incoming college students who are confronted with an overwhelming amount of readings.

Our analysis indicates that feedback loops can play a vital role in enhancing learning and performance, regardless of the specific context. Adaptive interfaces that dynamically adjust based on subtle feedback can prove more effective than static interfaces in fostering learning and improving performance. Moreover, feedback loops can have a positive impact on both students and teachers, offering valuable support throughout the learning process. By providing task-specific feedback, they create a state of flow, leading to heightened engagement and improved learning outcomes. Furthermore, the automatic generation of feedback can be equally beneficial as manual feedback, enhancing student performance in various activities.

Citation

Where NoteWardy stood among competitors?

Our team started to research existing solutions out there to help us better understand the current process of connecting note-taking with reading experience.

USER RESEARCH

Semi-structured interviews

I asked each participant to describe their current learning experience, what pain points they had, and what information they wanted to see in our products to improve their experience.

USER RESEARCH

persona with pain points

Our client Notewardy is a generative AI focused tech start up aiming to revolutionize digital learning experiences. For our project, we were asked to design a new product 0 - 1 to help students with note taking.

DESIGN OPPORTUNITIES

So, what did we discover?

After the user interviews, we concluded major insights into three goal-oriented personas. They tend to struggle with the time, key concepts and evidence.

From our above primary and secondary research, we incorporated market needs into our ed-tech solution, offering a feature-rich PDF reader for organizing notes.

PART 3

Ideation

BRAINSTORMING

We brainstormed and prioritized solutions.....

To facilitate our generation phase, we further reframed our design requirements into key actionable statements that create multiple solutions paces, but narrow to set focus too.

USER FLOW / INFORMATION ARCHITECTURE

Streamlining user navigation

Our initiative focuses on optimizing user flows and restructuring information architecture to enhance user comprehension and navigation efficiency. By refining the organization and presentation of information, we aim to provide users with a clearer and more intuitive pathway to accessing content, ultimately improving overall user experience and satisfaction.

USE CASES

Proposed solutions with use cases...

We created a set of wireframe prototypes to prepare for a usability study. We used very minimal colors in the wireframes to avoid our users giving us feedback on the visual design or UI over their user flows.

PART 4

ITERATION

WIREFRAME

Validating with users along the way

We conducted multiple rounds of tests, collecting user feedback and iterating for better solutions, here are a few of our key insights for improving the user experience.

CHALLENGE ONE

Resizable Split Layout for Customizing

Difficult-to-read content frustrates users, lowers engagement, and creates a negative impression. To enhance readability, we we aim to optimize the available space.

CHALLENGE TWO

Adjust Color System to Prompt Accessible Decisions

During the testing process, our team had a lot of disagreements on what the color system should represent. Ultimately from our user tests, we realized using colors to signify "importance" was extremely confusing to the users, what the users really wanted the highlights to represent was what category the highlighted notes fall under

CHALLENGE THREE

Remove Keyword to Quickly Locate

We removed the keyword features generated by AI and instead provided a more conversational way for users to locate answers within sentences. We also implemented a feature to save AI-generated content for future reference.

PART 5

FINAL DESIGN

Systemic visualized view to read
Free size & layout to support multitasking, including note-taking, reading, and annotation in one place.
Help students effectively labels annotations & concepts
A color and words labeling system for different annotations and label group naming.
Understanding through AI chatbox
Incorporation of a chatbot to answer questions while providing in-text sources for validation.

DESIGN SYSTEM

Consistency in products

We chose Lato as the main text for its clean, interesting, and technological feel. Semibold heading styles and regular body styles were used for clear visual contrast and readability.

In terms of colors, we selected a deep primary color to distinguish it from four functional colors on the dashboard. The color system meets WCAG 2.0 AA level accessibility standards.

DESIGN SOLUTIONS

All Hi-Fi Prototypes

PART 6

REFLECTION

WHAT DID I LEARN?

Validating with users along the way

Navigating complex issues with subjective elements
We have faced challenges with big topics that require difficult decisions, and have had to figure out how to solve complicated problems that involve personal preferences and experiences.

Working with clients with lots of back and forwards
One of the most significant differences I gained from the capstone compared to school projects is how stakeholders often bring in various opinions, and as designers, we need to justify our designs using various strategies, such as a product roadmap or metrics to provide evidence.