Iterative Design

Design an interface to meet a company's goals. Apply user feedback to improve a website's design.

To practice iterative design, our team of 4 created a prototype tablet app for Heptabase, a visual note-taking tool that helps you learn complex topics.

The Problem

We attempted to solve the same problem that Heptabase's developers were trying to solve, based only on their description on YCombinator. This left us with three success criteria:

1. Our solution must involve putting notes on whiteboards;
2. It must allow users to search through their notes to support visual recall; and
3. It should ultimately support a user's ability to learn complex topics.

Ideation

To kickstart our design process, we first drew up several sketches for potential interfaces. In these, we explored a few design alternatives:

• We centered our user flows around either a home screen, a files page, or a whiteboard;
• We considered different primary screen orientations;
• We varied tool and menu placement, between having toolbars on page margins, buttons that reveal slide-out menus, and icons on notes themselves; and
• We laid out our file views in different ways (in grids/lists, with/without thumbnails, etc.).

We then distilled our sketches into a number of key features—ones which we felt would allow our ideal note-taking app to better support learning:

1. Multi-Modal User Input:
   • Our app should support both free-hand writing/drawing and typed text, as users absorb content most effectively through different mediums.
   • It should also provide a way to quickly jot down notes with similar levels of flexibility, so that important information isn't missed due to UI inefficiencies.
2. Flexible Organization:
   • The folder system should be as unopinionated as possible, to prevent constraining the user to a certain way of organizing (like OneNote does, with its pages/sections).
   • There should also be ways to side-step bad organization, e.g. search, quick access.

Finally, we refined our sketches into wireframes incorporating the above features:

Prototyping

In order to begin iterating on our design, we first had to have something to show, to collect feedback. Thus, we developed an interactive, high-fidelity prototype in Figma:

Then, having received feedback from fellow UX practitioners, we made a round of revisions addressing the main points brought up in their critiques:

1. App Navigation
   • [Feedback] Reviewers didn't expect to be sent to a whiteboard right after logging in.
   • [Improvement] To provide a better mental model of app navigation, we modified our app to instead direct users to the files page, which now acts as a home screen.
2. Feature Learnability
   • [Feedback] It was unclear what snippets were for and how to use them.
   • [Improvement] To enhance learnability, we added instructional placeholder text to new snippets to help explain their purpose and usage to first-time users and testers. We also added a new user flow to our prototype.
3. File & Folder Creation
   • [Feedback] It wasn't immediately obvious how new files, folders, etc. could be created.
   • [Improvement] We added a "create" section to the files page (accessible also from the files overlay), which allows users to more efficiently create new whiteboards, folders, and/or snippets.
4. Prototype Representativeness
   • [Feedback] Reviewers commented that our prototype's file structure was improbably clean, and wanted to see how we would deal with more "realistic" scenarios: e.g. multiple nested folders.
   • [Improvement] We included more representative files and folders, and added nested folder navigation + scrollability to the prototype. This allowed us to demo a more intensive file structure.

User Testing

As a last step, we also sent our prototype to UserTesting.com to obtain feedback from users outside of the Brown University Community. Their recordings can be found below:

Recordings

• User 1
• User 2
• User 3

As our app's main functionality centered on multi-modal note-taking and flexible organization, we asked our testers to complete tasks using features relevant to those goals.

Specifically, we provided them with the following instructions:

1. Find the "Demo Whiteboard", and add a textbox somewhere near its top-left corner.
2. You remember that you took notes on a specific term several weeks ago and want to review them. Use the Search functionality to search for the term "Lorem Ipsum."
3. You have a brilliant idea that you want to write down immediately without creating a new whiteboard. Create and save a new "Snippet" to record your thoughts.

Here's a summary of our findings from those user tests:

• Users found the home page to be intuitive, clean, and easy to navigate.
• Users quickly figured out how to add textboxes and perform searches, as the icons we used for them conveyed their meaning effectively.
• Creating snippets took the most time, as our users didn't know what a snippet was, nor how to create one.

These findings aligned with our expectations. We emphasized simplicity in our interfaces, so icons played a heavy role in communicating their functionality. Because snippets are a novel concept, and its icon was poorly chosen, it made sense that users struggled with that task.

For our next iteration, we'd like to incorporate an in-app tutorial, in the form of a series of short animatics, to provide first-time users with more clarity. We'd also experiment with different icons for our snippets overlay, possibly changing its placement altogether to improve noticeability and access.

Final Mockup

Our final mockup can be found here.

We believe that our app somewhat achieves its goal of being a visual note-taking tool that helps users learn complex topics—doing so by supporting multi-modal user input and enabling flexible organization. It goes without saying, though, that there is still plenty of room for iteration and improvement!

Conclusion

Through this project, our team came up with a new design for an app based only on a startup's description. We refined sketches and wireframes into interactive prototypes, made improvements based on collected feedback, and conducted user testing.

All told, it was good practice! 4 out of 5 designers agree that iteration is central to good design, after all; though, it's a shame we didn't actually do multiple rounds of it this time.