INK APP

Monterey Bay Aquarium / 2019

After several years of using existing apps in their 6-12th grade educational programs, our client wanted a more complete solution for student and teacher needs. Our team’s goal was to leverage user-centered design to deliver a digital notebook app prototype for iPad.

Our early focus was on foundational research, which supplemented the client’s existing research and domain knowledge. We conducted a literature review, competitive analysis, field observations, interviews, focus groups, and a card sort to discover and prioritize user needs.

Next, we moved into iterative prototyping and usability testing with students and teachers. This feedback from users helped us to create a robust set of deliverables for the client, including an interactive prototype (Figma), pitch video for stakeholders, website, style guide, and documentation.

This was a six-month capstone project, organized through UC Irvine’s Master’s of Human-Computer Interaction & Design program (MHCID). Since we had a limited window to deliver a product that our client could use as a jumping off point for future app development, it was crucial for us to maximize our impact.

Our final deliverables (prototype, video, website, and documentation) were designed to help our nonprofit client seek funding from stakeholders and donors, and provide guidance to future development teams after funding is secured.

Working on INK has been one of the most interesting and inspiring projects of my career. I feel extremely privileged to have collaborated closely with people (of all ages) who are passionate about education, science, and conservation. I share our client’s hope that this app–once funded and launched–can be offered for free to teachers and students across disciplines and around the world.

As a pioneer of STEM education, Monterey Bay Aquarium helps students build lifelong technology and science skills. The aquarium wanted to create a science notebook tool designed specifically for education, since existing apps are not tailored for classroom use.

MBA’s education department is growing rapidly. The $42 million Bechtel Education Center opened in 2019 and has invested heavily in learning technologies like smart classrooms, innovation labs, recording spaces, and more. 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.

An app that brings together elements of collaboration, ownership, and reflection. It should be cross-platform, so that students can use it in the field, in the classroom, and at home. 

Our project was the first step toward this goal: An interactive prototype to guide development and funding.

We gathered feedback from our client on apps they’d already used for this purpose. Education staff walked us through each one, describing what they liked, where they struggled, and how teachers and students experienced each app in the classroom.

Next, we reviewed apps on the market to compare features, strengths, and weaknesses based on user feedback and feature ratings. Notability, Google Science Journal, Evernote, OneNote, and Zoho Notebook were a few of the apps we examined.

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 for education.

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 were our first major milestone.

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

Our goals for usability testing were to understand usability problems that would impact the real-world use of the app, and to gather qualitative data for iterative design. Putting the prototype in front of actual users (teachers, students, and education department staff) helped us determine which design choices worked, and which needed to be changed.

Our research questions focused on UI, layout, information architecture, and key features. We developed scenarios for participants to aid them in task completion. Because we wanted qualitative feedback from participants in addition to task completion metrics, we asked a mix of open-ended and Likert scale questions after each task. We also collected overall feedback at the end of every testing session.

We conducted our usability testing on iPads with the Figma Mirror app to create an immersive and realistic experience for participants. We recorded screen, hand gestures, and audio. Five students and four teachers participated in our first round of usability tests.

After testing, we synthesized our data to identify areas of improvement and expansion. Participants loved the UI and range of features, and felt that the information architecture was intuitive. However, they occasionally struggled to discover features and complete tasks without assistance.

Guided by our data, we built solutions to assist with discoverability and we prioritized features that were make-or-break for our participants. We revised the prototype with these changes and built out some new features for the second round of testing.

Our second round of testing allowed us to validate solutions and vet additional research-supported features not covered in round one. We wanted to delve deeper into users’ mental models around the core functions of the app.

We followed the same format as our first round of testing, with new participants– six students and three teachers. We performed A/B testing on a few key features as well as standard usability tasks and walkthroughs.