Jasmine Mai

DURATION

03/2020 – 05/2021


ROLE

UI Designer


TOOLS

Figma

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, there are 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 transitioned to fully online. NPath is a free educational web application that will have roadmaps for many subjects.


Competitors

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 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, clicking on different nodes to view its content to learn, and starring 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 own 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. These topics are categorized as well by “My Courses” and “Discover”. "My Courses" contain the courses that the user created, bookmarked courses, and history of recently viewed courses. "Discover" is for the users to see popular courses and any that is 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.


Solution

I worked with three software engineering students to create NPath. We created this web application for anyone to learn anything they want. Users can learn course(s) created by other people or create their own course(s). 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.


Takeaways

Figma

I learned how to create components for buttons, colors, and anything that is used multiple times throughout the application. I learned techniques that made it so much easier and quicker for me when creating high fidelity mockups as well as making 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 learned more about design. When in-person classes transitioned to remote, I learned to cooperate and work with my team members through Google Meet.


Designing

This is a new project so everything is made from the beginning. This gave me a huge opportunity because I get 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!"