SwiftThink App

//image and then Tech stack on the right

What's a mind map?

At the core of it, mind mapping is a visual notetaking strategy where ideas are written inside nodes and lines radiate out of central ideas to related ideas to show hierarchical connection.

What's wrong with current mind maps?

Traditional handwritten pen-and-paper mind maps are one of the easiest and fastest ways to organize information. However, they have multiple issues:

• They are flimsy, easily misplaced, and might get destroyed by spilling a cup of water or tearing the paper
• If you wrote too much info to fit in the node, you gotta restart the mind map or erase the circle. Or just leave the text spilling out of the circle
• For people writing as fast as their brains think, illegible handwriting ruins readability for future use
• To share your mind map, you need to physically lend it or take a photo to share. It's one extra step but it adds up if this is your primary form of notetaking

Current digital mind maps solve all of these issues and offer great customizability that pen and paper can't offer. For example, multiple apps feature an infinite canvas, beautiful templates, and a plethora of design choices per each node, line, and text. However, these apps distract the user from mind map's whole purpose of being a rapid notetaking technique, and adjusting the basic nodes and lines are cumbersome and finicky.

Collaborator Anisa Lastname and I created the digital SwiftThink app that addresses all of these concerns by integrating multi-touch and gesture. By using SwiftThink, making nodes and connecting lines take only a few seconds! Any concerns about aesthetics, and design decision paralysis are solved by the minimalist interface. The demo below proves just how fast and easy it is to use our app:

SwiftThink Features

1. Canvas and ToolBar: Upon opening the app, the user will see a toolbar on the right and a blank canvas. The toolbar contains the necessary buttons for some key features. (See Figure 1)

Figure 1: SwiftThink Canvas and ToolBar

• The “N” button is for the Quick-Node Feature.
• The “C” button is for the Quick-Connect Feature.
• The Trash Icon is for the Quick-Delete feature. The Quick-Node, Quick-Connect, and Quick-Delete features will be explained later.
• The 2-bar button is an expandable menu where the user can choose a rectangle or oval shape for the next node they put down. To make the user’s selection obvious, when the user presses on either button, a toast alert will slide down from the top of the screen to notify the user of which shape they selected. After a few seconds, the alert will slide back up to disappear, so that it will not distract from the user experience.
• The Pencil Icon is a toggle-able edit feature that allows the user to enable or disable the nodes from being editable. When this button is green, the user can text in the node. When this button is red, the user cannot text in the node. This toggle feature was necessary because custom gestures are overridden by the default TextField gesture detectors, which would prevent the user from being able to do any features that need the tap or long-press gesture detection.

1. Custom Notes through drawing: This is an additional feature that we added to our mind-map application. The user can use the stylus to draw over the canvas, take custom notes, or add free-hand drawings to organize their thoughts and ideas in a customized manner.

Figure 2: Custom Notes Feature Demonstration

1. Quick Mind Map: The Quick Mind-map feature allows the user to quickly create a mind map. In our implementation, we used a long press gesture detector and multitap gesture such that when the user long presses on one node, that node becomes a “root” node. The user (while simultaneously long pressing the root node), taps on all other nodes they want it connected to, and they all are connected together.

Figure 3: Quick Mind Map Feature Demonstration

1. Quick-Node: The Quick-Node Feature allows the user to easily put down a node onto the canvas. In code, we used the long press gesture detector and multitap gesture detector such that the user must hold down the “N” button and simultaneously tap the screen in order to make a node appear at the tapped position.
2. Quick-Connect: The Quick-Connect Feature allows the user to easily connect multiple nodes with a quick swipe. In code, we used the long press gesture detector and pan gesture recognizer such that the user must hold down the “C” button and simultaneously swipe over the nodes the user wants to connect. The code will detect when the user’s pan touch has collided with a node. Let’s call this node A. Then when the user collides with node B in the same swipe, a line is created to connect the two nodes. The full overview of this gesture feature is demonstrated in Figure 2.

Figure 4: Quick Connect Feature Demonstration

Holding the C button and swiping → node A detected → (still swiping) node B detected → create a connection line for A and B → (still swiping) node C detected → create a connection for B and C, and so on.

1. Quick-Delete: The Quick-Delete Feature allows the user to easily delete any node of their choosing. In the code, we used the long press gesture detector and multitap gesture detector such that the user must hold down the Trash Icon button and simultaneously tap on a node to delete it. Deleting a connected node will delete that node and the lines attached to that node.
2. Other Features - An additional feature that we implemented, which was not added in the proposal, was draggable nodes. The user can drag the created node anywhere on the screen, and if the node is connected to an existing mind map, the lines are dragged along the node.

3rd Party Libraries / Packages / References

• Expandable Menu: https://pub.dev/packages/expandable_menu
• Toast Alert: https://pub.dev/packages/overlay_toast_message
• One Dollar Unistroke Recognizer: https://pub.dev/packages/one_dollar_unistroke_recognizer
• Flutter Documentation: https://api.flutter.dev/

My Role

Primary Coder & UX Innovator:

• Co-led the technical development of the application using Dart and Flutter.
• Spearheaded the integration and design of multi-touch interactions as the core innovation for rapid mind map creation.
• Contributed significantly to the overall UI/UX design, focusing on simplicity, speed, and intuitive user flows.

Impact & Results

• Unprecedented Speed: During fast-paced demonstrations, SwiftThink proved significantly faster at creating and organizing mind maps compared to regular single-touch digital applications.
• Enhanced Thought Capture: Enabled users to capture ideas at the speed of their brain, minimizing the loss of fleeting thoughts due to slow interface interactions.
• Improved Legibility & Shareability: Eliminated handwriting barriers, making mind maps consistently legible and easily shareable for collaboration or review.
• Reduced Friction: Successfully addressed cumbersome workflows and choice fatigue prevalent in other mind mapping tools, offering a truly intuitive experience.
• Demonstrated Technical Proficiency: Successfully learned and applied Dart and Flutter, showcasing the ability to master new technologies and implement complex multi-touch interactions.