Jasmine Mai

DURATION

03/2020 – 05/2021


ROLE

Research

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 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. Users can use it to build their knowledge or learn new skills anytime and anywhere. Users can also create their own roadmaps and share them with others.


Competitors

There are many online education sites including Khan Academy, Udemy, Treehouse, Coursera, and more. Out of these four, only Khan Academy is free to all users. The other three have different costs for each course. Other than costs, the difference between these and NPath is that NPath users can create their own courses. We want to give users the freedom to create and share.


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.


First Design

First Design (1)

First Design (2)

Second 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!"