Dynomantle

Take Note!

ROLE

Product Designer
(sole contributor)

Timeline

July 2020- September 2020

Key Responsibilities

research, interaction design,
visual design

Problem Space

Existing note-taking apps focus on collaboration and project management. But no note-taking app is tailored for people learning a skill!

I was brought on board to design a great note-taking app specifically for autodidacts that would keep the good stuff right where they needed it.

I pictured an app that acts like a transcendent bulletin board — a place where I can just throw materials at a wall but magically know where to find each morsel of information in the future.

Dynomantle keeps everything in one place— effortlessly organized; instantly searchable. An extension of your memory!

Persona/User Flows

A V1 of Dynomantle had already been released when I joined the project, and user feedback showed us that it was time to get back to fundamentals and build a better flow. I performed a usability audit and heuristic analysis to put a finger on the UX problems that users were experiencing.

This allowed me to create specific use cases and map out smoother flows for our persona. You can explore these in the Figma embed below!

Lo-Fi Wires

People who are learning a skill want to save reading lists and reference items— a LOT of them— and be able to recall them instantly. So I prioritized link surfacing and discoverability even in the low-fi stage.

Dynomantle's UI was pretty fundamentally different than leading note-taking apps and users were experiencing a lot of friction — so I made sure to ground the product in accepted UI patterns.

Testing

I performed validation testing with 10 prospective users through Maze usability tests and in-person contextual analysis. Interact with the prototype below!

I gained a lot of insights from this round of testing that I used to improve the app. Here are some examples of things that I changed:

Creating a Note

What I Expected:

What People Actually Did:

What Changed:

Link Organization

The Problem People Had:

Links added to a note congregated at the top, and pushed the text offscreen. This disoriented people, and they had to scroll pretty far to edit their note, depending on how many links they had added.

What Changed:

I instead organized links in a collapsible sidebar, so people could view and browse links while keeping their note at the forefront.

Mockups

Mobile

This was my favorite part of the project! Mobile is always a fun challenge because it's like information tetris-- how can things fit together in the most efficient way?