Jasmine Mai


03/2020 – 05/2021


UI Designer



NPath is an educational web application. It is an online roadmap to help guide people to learn new skills. NPath was my senior software engineer project. I worked on this project along with three other software engineering students and I was the UI designer for this project.

Website: npath.io

Problem Overview

Education is not accessible for everyone. Education is the key to success. However, many people who do not have access to education. The number of people increased significantly when the pandemic began. Many institutions had to either shut down or transition to fully online. NPath is a free educational web application that will have roadmaps for many subjects.


My Responsibilities

  • • Designed several vital pages such as application, dashboard, and profile page using Figma, which helped achieve 4000 views per month.
  • • Spearheaded the design of the landing page image, which boosted conversion rates and saved a network request (~100kb) by inlining SVG to HTML DOM instead of using PNG.
  • • Supported with creative direction a number of UI components with UX feedback.

Designing the Application Page

The application page is the main page of NPath. This page is where the user can explore and learn about the topic that they selected. Below are a few designs and improvements based on feedback from others. The main functions are to edit a node's content, click on different nodes to view its content to learn, and star a node to read it later. Each course (parent node) has many children nodes. Each node is a subtopic of this course and has its contents. A user can create a graph of their own and edit it.

First Design

Second Design

Third Design

Designing the Dashboard Page

The dashboard page consists of topics available on NPath. This page has two tabs: My Courses and Discover. The "My Courses" tab contains the courses that the user created, bookmarked and the history of recently viewed courses. The "Discover" tab is for the users to see popular courses and courses recommended for them. Below are a few designs and improvements based on feedback from others.

First Design

Second Design

Moving Forward

We made a minimum viable product. However, we have a list of features that we would love to have in the future.


I worked with three software engineering students to create NPath. We created this web application for anyone to learn anything they want. The users can learn from a roadmap created by other people or create their roadmap. Users can also learn at their own pace, bookmark course(s), discover/learn new skills, etc. We want everyone to have access to education for free with NPath.



I learned how to create components for buttons, colors, and anything used multiple times throughout the application. I learned techniques that made it much easier and quicker to create high-fidelity mockups and make new changes.

Communication and Teamwork

Even though we are a small team, we met every weekend to give updates. What made our team successful was that we combined our strengths. I learned to ask questions when I am lost or don't understand something. I learned to give feedback when necessary and ask for feedback for my part as well. This team made me grow so much and learn more about design. When in-person classes transitioned to remote, I learned to cooperate and work with my team members through Google Meet.


NPath is a new project, so everything is made from the beginning. Working on NPath gave me a huge opportunity to learn more about design because I got the chance to create many of its pages and content. I got to use my creativity to try new things and play around with the designs. I love getting feedback and hearing, "Awesome job on the design!"