July 2022 – May 2023
Founder
Product Design
Extension, Mobile, Desktop

Jotted

As the lead UX designer for Jotted, a microlearning community aimed at transforming internet information into mindmaps, I worked closely with the development team to create a user-friendly platform aligned with its technical capabilities.

The Problem

The overwhelming challenge users face is navigating through the vast online content to learn new information, as the internet's abundance of resources complicates organizing, filtering, and assessing their quality. This problem, arising from the exponential growth of online information and a lack of efficient management tools, often leaves users struggling to sift through volumes of material and identify the most valuable resources and relevant topics. The internet, being a primary learning source for many, significantly amplifies the importance of this issue. A solution like Jotted is crucial as it transforms internet information into easily navigable mindmaps, enhancing learning efficiency and reducing overwhelm for users, while allowing for effective context-switching.

The Goals

Improve the health and well-being of college students:

The primary goal of the food delivery app is to address food insecurity among college students and improve their health and well-being by providing them with affordable and nutritious meal options.

Create jobs for college students:

The app will also create job opportunities for college students, allowing them to earn income and gain valuable work experience while pursuing their studies.

Provide a seamless delivery experience for both businesses and users:

The app will prioritize providing a seamless and user-friendly experience for both businesses and users. This includes a smooth ordering and delivery process, real-time updates on orders, and efficient communication channels.

Research/Analysis

The research methodologies employed were carefully selected to gain a deep understanding of user needs, preferences, and pain points, and to identify opportunities for improving the platform's design and functionality.


Product Research: This step was conducted to understand the technical capabilities of the platform. It helped us comprehend how the platform could be better leveraged to assist users in effective learning and navigation of online content.


User Interviews: We conducted both quantitative and qualitative interviews to delve into users' experiences with the platform. This process aimed to identify user pain points, needs, and preferences, and how well the current platform was meeting these needs.


Competitive and Comparative Analysis: A thorough review of direct and indirect competitors helped us understand the competitive landscape, how other platforms were addressing similar user needs, and where opportunities might exist for Jotted to differentiate itself.


Affinity Mapping: This method was used to categorize and synthesize the large amount of data collected from user interviews and surveys. It helped identify common themes and insights, which guided the design process.


Empathy, Experience, or Customer Journey Mapping: This helped us understand the user's journey, their emotions, and their pain points at different stages of using the platform. The insights gained from this exercise informed our design decisions and helped us empathize with our users.

The research process revealed several areas for improvement. For instance, users found the node creation process complex and unintuitive. In response, we simplified it by introducing a new toolbar. This change reduced the learning curve for new users, increased productivity, and improved user satisfaction.


Goal 1: Help users effectively navigate and learn from the vast amount of information available on the internet.

  • Design solution: Provide a simple and intuitive interface that makes it easy for users to find the information they are looking for.

  • Design solution: Provide a variety of tools that help users to organize and structure their information, making it easier to learn and retain.

  • Design solution: Allow users to create their own mindmaps, which can help them to learn and retain information more effectively.

Goal 2: Simplify the learning process by turning information into mindmaps.

  • Design solution: Use mindmaps to organize information in a way that is easy to understand and navigate.

  • Design solution: Allow users to create their own mindmaps, which can help them to learn and retain information more effectively.

Goal 3: Help users determine which resources are of the highest quality and which topics to search for.

  • Design solution: Provide a variety of tools that help users to evaluate the quality of information.

  • Design solution: Provide a search function that allows users to find information on specific topics

Research Goal

Design for Effective Navigation and Learning:


The primary goal is to design the Jotted platform in such a way that it assists users in effectively navigating and learning from the extensive information available on the internet. This includes creating intuitive user interfaces and information architecture that make it easy for users to find and understand the information they need.


Develop Simplified Learning Tools:


To streamline the learning process, we aim to develop a feature that turns information into mindmaps. This solution is designed to simplify complex information, allowing users to digest and retain new information quickly and easily.


Implement Resource and Topic Identification Features:


The platform will incorporate tools that help users in determining which resources are of the highest quality and identifying relevant topics to search for. This could involve implementing rating systems, search filters, or recommendation algorithms to enhance user's learning efficiency and satisfaction.

Results

Node Creation

The app's node creation process was simplified by introducing a new toolbar that allows users to create a new node directly, rather than having to drag from a node handle. This change has made the process more intuitive and user-friendly, reducing the learning curve for new users. The new toolbar provides a consistent and streamlined user experience, and has reduced user frustration and increased productivity. This significant UI improvement has made the app more accessible, intuitive, and user-friendly, which ultimately translates into a more productive and satisfying user experience.

Side Modal

Many users identified as visual learners and preferred consuming content in a visual format. This led to the transformation of nodes from pill static text to dynamic images. After receiving valuable feedback from users, significant UI changes were implemented. The drop-down menu was replaced with a side modal, which resolved the issue of overlapping nodes when expanding and made the user experience more intuitive and efficient. Additionally, an image option was added for each node, improving the overall aesthetic and making navigation between nodes easier for users. The introduction of snap to grid functionality further streamlined the process of creating and positioning nodes, enhancing the platform's user-friendliness and efficiency. These alterations resulted in a more visually appealing and accessible platform, leading to a positive impact on the overall user experience.

Chrome Extension

One significant user experience enhancement change I made to the platform was the introduction of a Chrome extension. The extension streamlined the user flow by allowing users to easily add new links to the platform with just a few clicks. Additionally, the extension included a site full mindmap that enabled users to quickly view a visual representation of the links and nodes associated with a particular website. This change made the platform more accessible and user-friendly, positively impacting the overall user experience. The ability to quickly add resources and view site mind maps directly from the Chrome browser also increased efficiency, enabling users to more easily organize their research and learning.

Impact

The significant UI changes made to the nodes had a significant impact on the platform's performance. Before the changes, the platform's conversion rate in geting users to sign up was 13% when visiting a mindmap. However, after implementing the changes, the conversion rate increased to 24.5%, indicating a substantial improvement in user engagement and overall platform success.

Takeaways

The changes made to Jotted to accommodate for WCAG accessibility standards have resulted in a more inclusive and user-friendly platform. These changes have also resulted in improved usability and user experience. The new color themes provide better contrast between text and background elements, making it easier for all users to read and distinguish text. The side modal introduced in place of a node dropdown has also improved usability, allowing users to access to retain more information as many individuals are visual learners and it removed the issues with overlapping nodes. In addition, the chrome extension allowed for a quick user flow of adding resources into mindmaps which aligned new features with the goals and mission of the company.

As a designer, the key takeaway from this project is the importance of considering accessibility from the start of the design process. By incorporating accessibility considerations from the outset, we were able to make changes that resulted in a more inclusive and user-friendly platform. Overall, the changes made to Jotted have resulted in a more accessible, usable, and user-friendly platform that better serves the needs of all users.

Achievements

jotted - Curate & sell valuable lists of links | Product Hunt
jotted - Curate & sell valuable lists of links | Product Hunt
Ultimate Design Resource Pack - The best-researched collection of design tools you need | Product Hunt