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.
overview
Client
Responsibilities
- UX research
- Branding
- Documentation
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.
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.
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.
scope definition
features
content creation
collaboration
ownership
reflection
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.
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.
usability testing: rounds 1 & 2
Total Participants
11 students, 6 teachers, 1 MBA education staffMethod
In-person, moderatedScenarios
Task completion, qualitative think-aloud feedback, open ended and Likert scale questionsSet Up
Figma Mirror app on iPad with overhead camera (smartphone)Capture
iPad screen, hand gestures, audio, written notes
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?
test scenarios
We developed our test scenarios to walk users through the main functions of the app as outlined in the wireframes.
organization / navigation
create a notebook, project, and sections
content creation
text, sensor data, photos, annotations
feedback
add and view feedback
personalization
edit notebook cover and profile
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
- Clean interface, follows familiar design conventions
- Easy to use and navigate
- Icons for personalization menu and content creation toolbar
- Findability of text formatting menu and sensor data menu
Information Architecture
- App's organization of notebooks, projects, and sections was useful and easy to understand
Features
- Personalization, feedback, search, and content creation tools
- No app onboarding, no add/import file feature
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?
test scenarios
Our test plan included A/B tests on a few features, in addition to walkthroughs on new features.
welcome
view tutorial, explore help features
information architecture
add sections, add a page
text formatting
choose between version a and b
collect data
test use of top menu vs keyboard menu
comments
view a new comment
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
- Clean and simple aesthetic
- Icons (pages sidebar, help overlay, add text)
- New comments were not obvious
Findability
- Updated menu locations worked. Users were able to find the text and data menus much more easily.
- Users preferred text formatting menu where options were laid out on keyboard
Features
- Personalization: Students and teachers loved being able to personalize covers.
- Help overlay and tutorial language was vague
- Interactivity between sections and pages
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.
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.