INK Digital Notebook

UX Research

INK digital notebook app was created in collaboration with the Monterey Bay Aquarium.

As a UX researcher on this 6-month project, my research plan, analysis, and design recommendations helped contribute to a final prototype that exceeded client expectations.

As a result of my team’s work, our client has everything they need to get funding and develop the app, with potential impact for students and teachers worldwide.

Play Video about Mockup of INK app on white ipad

overview

Client
Monterey Bay Aquarium
Responsibilities
Team
opportunity

A leader in science education and conservation, Monterey Bay Aquarium needed an app that seamlessly blends field and classroom interactions among students and teachers as they collect data, share observations, and reflect on their work. Existing apps weren’t doing the trick, so our team’s goal was to design a dream digital notebook app prototype for iPad, centered around user needs.

impact

Our 6-month capstone project was organized through UC Irvine’s Master of Human-Computer Interaction and Design program (MHCID).

To maximize our impact during this limited window, we provided final deliverables (prototype, video, website, and documentation) to help our nonprofit client seek funding, and to provide guidance to future development teams.

Our client and team’s hope is that the app can be offered for free to students and teachers of all disciplines and around the world.

process

project background

client introduction, context, goal

Foundational Research

Client research review, literature review, competitive analysis, field observations, interviews, focus groups, card sort

scope definition

App features, scenario, user flows, wireframes

iterative design

Prototype development, usability testing

delivery

Interactive prototype, pitch video, website, style guide, documentation

project background

Why this project?

As a pioneer of STEM education, Monterey Bay Aquarium advocates for building technology skills in students that will serve them both academically and professionally. The aquarium wanted to create a science notebook tool specifically designed for educational use, since there isn’t anything quite right on the market right now.

Why now?

MBA’s education department is in a time of growth. They opened the $42 million Bechtel Education Center building in 2019 and invested in smart classrooms, an innovation lab, and recording spaces. Education is an institutional priority.

This digital notebook app is a dream project for MBA. They have been using other notebook apps in their education programs, but nothing has quite fit the bill in terms of features, platform, and price.

The Goal

MBA’s goal was to build one app that brings together elements of collaboration, ownership, and reflection. It needed to be cross-platform, so that students would be able to use it in the field, in the classroom, and at home.

Our interactive prototype was the first step towards this goal.

Bechtel Education Center
Student wearing goggles fitting a pipe together

foundational research

the current landscape

Client Research

Because of their experiences using digital and paper notebooks with students and teachers, Monterey Bay Aquarium’s education staff had already given a lot of thought to what they wanted this app to look like. Their requested features included:

  • Content creation (text, annotation, photos, videos, audio)
  • Multi-platform access
  • Easy organization
  • Feedback & assessment (from teachers & peers)
  • Language recognition and translation
  • Data collection tools using sensors
  • Data visualization tools
review of existing apps

We gathered feedback from our client on apps they’d already tried to use. Education staff walked us through each one and described valuable features and pain points. They also shared how students and teachers experienced each app in the classroom.

We reviewed apps on the market to compare features, strengths, and weaknesses of each app. Notability, Google Science Journal, Evernote, OneNote, and Zoho Notebook were some of the competitors we analyzed.

literature review

Finally, we reviewed academic papers and studies to learn what experts had to say about notebooks, technology use in the classroom, and designing engaging tools.

Person holding tablet with 3D shapes on screen
Google Science Journal screenshots

understanding our users

field observations

We observed middle school students collecting data at tide pools and took away insights on small group collaboration, note-taking, data collection, and scaffolding.

This allowed us to gain a better understanding of group dynamics among students and with teachers. We also saw how teachers integrated classroom materials into fieldwork, and determined use cases for our digital notebook app.

interviews & focus groups

Speaking to teachers and education staff helped us understand their current learning process and the limitations they face.

We learned that students learn best when they are able to set up and organize their thoughts in whatever way works best for them, with supplemental activities and guidance from teachers. Teacher and peer feedback are both crucial to the learning process. Students are encouraged to use data to tell stories.

Teachers and students both struggle with the limitations of physical notebooks, like having to carry dozens of them back and forth, or forgetting to bring them. 

But digital tools have their own challenges. Device and wifi access is limited outside the classroom, which can make giving timely and actionable feedback a challenge for teachers.

card sort

After synthesizing our preliminary research and determining potential features, our next step was to identify which ones our users thought were the most important.

We conducted a remote card sort with 49 middle and high school students and 36 teachers of all disciplines.

  • Students show a high preference for data management, more so than teachers.
  • Text input and photos are much more important to students than other media input types.
  • Students are more interested in teacher interactions than peer-to-peer feedback.
students collecting data from tidepools
classroom with students at desk and teacher at front
OptimalSort card sort screenshot

scope definition

features

orange pencil icon

content creation

  • Type text
  • Take photos
  • Collect data w/ sensors
  • Push content to devices
  • yellow speech bubble icon

    collaboration

  • Share with others
  • Peer feedback
  • Teacher feedback
  • green heart icon

    ownership

  • Organize content
  • Personalize
  • Access everywhere
  • teal lightbulb icon

    reflection

  • Search content
  • Annotate
  • Export to other apps
  • Easily access external resources
  • scenario

    Sarah, a high schooler in one of the aquarium’s teen science programs, is studying tidepools at Asilomar Beach with her team. She uses the INK app on her iPad to put data into a chart as her team members collect it and take photos of their observations.

    When Sarah gets home later that day, she shares her data and notes with all four team members. They provide feedback remotely, and Sarah highlights sections and adds hand-drawn annotations.

    At the end of the quarter, Sarah searches through her projects, notes, and data to reflect on her work and synthesize it for her team’s final presentation.

    Girl at beach

    wireframes

    Our designers built out the high-priority features established during our foundational research phase. Then, the whole team reviewed and revised before presenting to the client for their feedback. This ensured that the ‘shape’ of our prototype would match up with user needs uncovered in research, as well as client expectations.

    iterative design

    prototype development

    The first version of our high-fidelity prototype developed key user flows that aligned with our usability testing goals and MVP. Throughout the design process, we leaned on previous research, ideation, style guidelines, and client/team feedback.

    Our goal was to create a clean and easy-to-navigate UI that would be suitable for students of a wide range of ages and technological literacy. We chose colors that aligned with the client’s style guide and utilized design conventions from Google and Notability that our users would already be familiar with.

    Before the prototype was ready for usability testing, the whole team went through several rounds of internal revision and testing, making sure that it functioned as needed and matched the user testing protocols.

    The research team worked with the design team to provide UX/UI feedback, cognitive walkthroughs, and functionality testing.

    mockup of INK app prototype

    usability testing: rounds 1 & 2

    Total Participants
    11 students, 6 teachers, 1 MBA education staff
    Method
    In-person, moderated
    Scenarios
    Task completion, qualitative think-aloud feedback, open ended and Likert scale questions
    Set Up
    Figma Mirror app on iPad with overhead camera (smartphone)
    Capture
    iPad screen, hand gestures, audio, written notes
    a usability testing participant using the INK prototype search function
    A usability testing participant trying out the search function on the prototype

    usability testing: round 1

    Our goal with the first round of usability testing was to gather general feedback on UI and design, information architecture, and features.

    We tested with 5 students and 4 teachers.

    Research Questions

    UI & Design
    Is the layout and design intuitive for first-time users without onboarding?
    Do UI elements support recognition and ease of use?
    Are icons and labels easily understood by users of all ages?

    Information Architecture
    Does the organization of the notebook support how users work in the real world?
    Is the notebook’s navigation findable and usable?

    Features
    Are users able to accomplish the tasks we outlined?

    Adding text on the INK prototype
    test scenarios

    We developed our test scenarios to walk users through the main functions of the app as outlined in the wireframes.

    1

    organization / navigation

    create a notebook, project, and sections

    2

    content creation

    text, sensor data, photos, annotations

    3

    feedback

    add and view feedback

    4

    personalization

    edit notebook cover and profile

    5

    search

    search everything

    findings

    Most of our overall feedback was positive, with many participants telling us how excited they were to see future iterations of the app.

    UI & Design

    Information Architecture

    Features

    "Honestly, I would love to use it for my everyday life. It’s pretty helpful and it’s really fun in its own way."
    - student
    usabliity testing participant

    app revisions & usability testing: round 2

    The second version of the prototype included several new additions and improved upon features noted in the previous round of testing.

    In our next round of testing, our goal was to validate solutions and to test the additional research-supported features not covered in round one. Our focus was to delve deeper into users’ mental models around the core functions of the app.

    6 students, 2 teachers, and 1 MBA staff member participated.

    Research Questions

    UI Updates
    Are icon and design updates understandable to users?

    Findability
    Are users able to find the features that we changed, including menus and icons?

    New Features
    Do the onboarding flow and help overlays help first-time users understand how to use the app?
    Does the pages sidebar function as users expect?

    Mockup of help overlay
    The onboarding flow guides new users through the features
    test scenarios

    Our test plan included A/B tests on a few features, in addition to walkthroughs on new features.

    1

    welcome

    view tutorial, explore help features

    2

    information architecture

    add sections, add a page

    3

    text formatting

    choose between version a and b

    4

    collect data

    test use of top menu vs keyboard menu

    5

    comments

    view a new comment

    6

    personalization

    test updated icons

    findings

    Again, people were very excited by the app, how it looked, and how they might be able to use it in the future.

    UI & Design

    Findability

    Features

    "All the features I saw are immediately usable in the classroom. Seems very much like something I’ve been looking for."
    - teacher
    usabliity testing participant

    delivery

    final prototype

    To finalize our prototype, we consolidated all prior feedback and research on features, flows, styles, elements, and information architecture. We standardized changes across all prototype screens, implemented consistent interactions, and designed new screens and interactions to fill in gaps.

    Our final prototype was informed by a large amount of research, testing, and iterative design. INK was built on user needs, and tested repeatedly with our target users.

    deliverables

    Our final deliverables were designed to help our client obtain funding from donors and to provide guidance to future development teams.

    We created a pitch video to explain who the app is for, what it does, and why it’s the ideal cross-discipline educational tool.

    The INK website provides comprehensive technical, research, and design documentation and a style guide to ensure seamless handoff to future teams.

    impact

    In the long term, I share our client’s hope of seeing INK adopted in classrooms across the country, and even the world. We sought to design an app that could be used to teach all subjects, and expect that teachers of every discipline could benefit from a notebook tool designed specifically for education.

    We look forward to seeing INK come to life and hope that in the future, it will be used not only at Monterey Bay Aquarium, but in classrooms all over.

    INK digital notebook app logo

    reflection

    I’m truly grateful to have had the opportunity to work on this project. In addition to collaborating with my incredible teammates, it was also inspiring to connect with so many people of all ages dedicated to leaving the world better than they found it, through science education and conservation.

    It was also valuable to break down the learning process and think about how INK’s three main focuses of reflection, collaboration, and ownership can apply to my own practice as a researcher. As I connect with team members, users, and their stories throughout my UXR career, I know I’ll remember these lessons from INK:

    Working together helps us grow beyond what we’re capable of individually.

    Our past work and history have a lot to teach us if we’re open to listening.

    up arrow