Students Study Desktop App

1. Define

Create a comprehensive studying tool that accommodates various learning preferences and anticipates the integration of AI technology to further enhance its capabilities.

2.  How Might We...

How might we develop a state-of-the-art educational software application that empowers college students in their learning journey?

3. Stakeholders Needs

The stakeholders are focused on the development of a note-taking app tailored to college students. This app needs to accommodate various learning practices and make it an indispensable tool for their learning journey.

The design team will document the current elements and functionalities of the app, and identify areas for improvement in user interface (UI), user experience (UX), visual design, and interactions.

The company has two existing prototypes and the founders like a few elements from each. They want to take a few elements from each design and continue to improve on the design.

4. Above the Call of Duty

Despite stakeholder expectations, we integrated cost-effective user interviews into our design process. This unexpected approach offered us valuable insights into user needs and experiences, greatly influencing our design decisions. As a result, we were able to exceed the initial scope, delivering user-approved solutions.

Initially free from the responsibility of developing an AI summarizer due to the challenging timeline, the team managed to exceed expectations by ultimately integrating the feature into their innovative study tool application.

Even though we received key branding assets only in the fourth week, we integrated them into the final prototype, creating a cohesive study tool app. This highlights our resilience and strategic problem-solving in a fast-paced work environment.

5. Discovery: Existing Prototypes

The company provided two initial prototypes, each with their strengths and weaknesses. While the stakeholders weren't completely satisfied with these designs, they requested us to retain the general layout and incorporate certain features from both prototypes into our final design.

6. Problem Statement

How might we develop a state-of-the-art educational software application that empowers college students in their learning journey?

7. User Testing

Once we identified the company's issues and objectives, we chose to evaluate Prototype A using five participant trials to pinpoint user challenges and requirements. Zane conducted these 15-minute interviews with five individuals at a campus in Seattle, Washington.

Specific Issues

• All five participants had trouble connecting/linking notes to each other.
• Three out of five participants mentioned that labeling the functions when the user hovers would make it more clear what to do with each icon.
• One participant couldn’t find a way to delete or remove a document after uploading it.
• One participant was initially confused about how to highlight a sentence in the PDF and expected the highlight to stay even without adding a note.The participants had difficulty creating highlights and creating notes. They didn’t see a connection between the highlighted text and the note.

User Frustrations

Participants main UX issues currently are removing a document, undoing/redoing actions, highlighting separately from adding a quote, intuitively connecting notes, seeing labels/tutorials/tooltips for icons.

8. User Flows

The main user interactions involve note-taking during class and studying afterwards. In class, a student might encounter the e-book/PDF for the first time, necessitating note-making directly from the text and linking these to the professor's lecture. Out of class, students possibly review the material for the second time, wanting to emphasize certain parts of the text and add personal notes. They find the AI summarizing feature particularly beneficial during this process.

9. Wireframes

To establish a fundamental visual structure, we crafted the wireframes incorporating the features desired by the stakeholders.

Upload a .pdf

The left panel facilitates PDF uploading from the user's computer and also serves as a repository for the imported PDFs.

Create a Note

Users can emphasize text in the PDF panel to form a "quote note." Additionally, they can generate a "custom note" by selecting the first icon on the bottom toolbar and clicking on the workspace.

Link Notes

By choosing the fourth icon on the toolbar, users can create connections between notes on the workspace. Once they select which notes to link, a connector will visibly join them.

10. Mid Fidelity Screens

Once the design team had the wireframe feedback, we began to build the mid fidelity screens. Some of the changes included:

Moving the canvas toolbar to the right
Adding an annotation bar on the PDF panelAdding a PDF file dropdown and a toolbar at the top of the panel
Using color and arrows to identify linkable notes.Establishing the visual for the AI Summarizer

Wireframes

The stakeholders had conflicting opinions about the placement of the toolbar, suggesting a top toolbar or a vertical toolbar along the right side of the canvas.It was pointed out that there were too many clicks to when adding or linking notes.

High Fidelity Screens

• The stakeholders want some form of tabs in order to open multiple PDFs.
• They decided the plus sign in the corner (add a custom note) didn’t need to be separate from the vertical toolbar.
• The AI Summarizer is too small and needs to have a much larger space so the user can summarize pages of text.

11. UI Elements Mock Up

To refine key functionalities, the team designed a mockup that guides users through the various interface elements.

12. Iterate: V2

Over a four-week period, we continuously updated the design in response to the weekly feedback from the stakeholders.

AI Summarizer

The AI feature was moved to the bottom and sits as a tab that can slide up.

Adding Tabs

In order to view multiple PDFs, the team added tabs at the top so the user can upload more PDFs.

13. Iterate: V3

Adding Tabs

In order to view multiple PDFs, the team added tabs at the top so the user can upload more PDFs.

AI Slide Out Panel

The AI Summarizer was recreated to slide out when the user highlights text and selects the AI icon on the annotation pop up.

14. Iterate: V4

Moving Tabs

The bottom dark blue tab that was originally for the AI Summarizer is now where the PDF tabs are.

Linking Notes

When the user selects one of the arrows around the note, it changes to green. Once two notes are linked, they both turn green.

15. Iterate: V5

The 5th version of the design was tested with 5 participants. Some of the changes that were made included:

• Adding green bubbles that define what kind of notes the user is adding (custom note, quote note, and crop note)
• Adding a resize bar in between the panels

16. User Tasks and Feedback

In our hands-on testing session, we invited participants to dive into key task flows to give them a whirl. This interactive experience was a checkpoint for us to ensure that everything was running smoothly and that our design was on the right track.

User Tasks

Zane our UXR used the following tasks to test the design with the participants:

• Create a workspace and import a PDF.
• Change the pdf that you’re viewing.
• Open a second PDF in a new tab. (lab-review-intro.pdf)
• Highlight an area and create a quote note.
• Highlight an area, crop and create into a cropped note.
• On the canvas side, create a custom note.
• Link the cropped note and custom note together.
• Open the AI Summarizer and copy and paste area into the AI window. Rephrase the portion. Copy the new phrasing into a new note.

Participant Feedback

• One user suggested that the prototype could be improved by allowing users to “do all the features from the notes themselves” instead of having to go to the top.
• Another suggested that the prototype could have “more helpful tips for navigation”.
• One user found the prototype difficult to use and suggested improvements such as being able to make markups on PDFs, creating flashcards within the note-taking tool, and collaborating.
• One user mentioned that the prototype seemed “straightforward” but would prefer a “more modern UI.”
• One user found the image feature to be particularly helpful and suggested that the prototype could automatically align images.

17. Tutorial for App Startup and Updated Features

Using stakeholder and user feedback, we devised a new tutorial for the app's startup. We also streamlined the design by decreasing the arrows around linkable notes and unifying the toolbars.

Spotlight Tutorial

We introduced this tutorial to help reduce user uncertainty regarding the app's functions and operations.

Creating Notes

Notes can be added as cropped notes, custom notes, or quote notes.

Linking Notes

Users can create a connection between notes by selecting an arrow on the perimeter of one note and dragging it to another note.

AI Summarizer

Users can highlight text and click on the AI icon in the annotation bar to activate the summarizer, which they can then add as a note.

18. Annotations

In our final deliverables, we ensured that Innota was equipped with clear annotations for their developers.

Adding a .pdf Annotation

For the "add PDF" feature, we aimed to clarify for the developers the intended function and operation.

Resize Bar Annotation

For the "resize pane" bar, we envisaged a functionality similar to other programs. When users hover over the central bar, a highlight appears, giving them the capability to adjust the pane's size either larger or smaller.

Highlighting Annotation

When hovering over the left pane, the text selector icon appears to facilitate precise text selection. After selecting, you can choose a highlight color, which, upon confirmation, gets mirrored in the sidebar. This design is intended to enhance user interaction by providing intuitive text selection and highlighting tools.

AI Quote Note Annotation

You start the AI text selection by dragging over your desired text. A precision tool refines this to specific words. By clicking the 'AI' button, you activate the process. This approach was designed for accuracy and seamless use of AI in text annotation and providing a way to create a "quote note".

19. V6 Handoff

Copy

Reflections

This project illustrates the adaptability and iteration inherent in product design, as we navigated unique challenges and found innovative solutions. The resulting educational software stands as proof of our approach, deeply rooted in user research, creativity, and tech innovation.

What I Learned

Looking back on this project, I gained valuable insights. One key lesson is the significance of actively listening to all stakeholders, even when their perspectives on certain ideas may differ. By navigating through the details and finding common ground, we successfully delivered an exceptional product.

Next Steps

The journey does not end here. We plan to monitor the application's performance closely, collect user feedback post-launch, and make necessary iterations to the design for continuous improvement.

Project Summary

This project illustrates the adaptability and iteration inherent in product design, as we navigated unique challenges and found innovative solutions. The resulting educational software stands as proof of our approach, deeply rooted in user research, creativity, and tech innovation.