Dashboard & Features Design
at Neoboard
I reworked the product framework & improved team workflows, and redesigned key features like Workflows and Tags to create a solid foundation for future design and development.
i.
introduction
About Neoboard
Neoboard addresses the modern issue of platform overload for educators and students. As a very new organization, they rely on interns to help bring their vision to life, and students are continuously rotated on and off every quarter.
I came on as a UI/UX Design Intern from October to December 2023, and my proactiveness led me to become the Design Team Lead for the duration of my internship.
The Design Problem
Neoboard aims to make instructors' lives easier by integrating multiple platforms and features, but internally the design framework and core features are unclear.
Project Overview
Role: UI/UX Design Intern & Design Team Lead
Team:
Julie Wang, UI/UX Design Intern, Design Team Lead (me!)
Student A, UI/UX Design Intern
Student B, UI/UX Design Intern
Each team member focused on a different part of the product, and we met regularly to review each other's designs and ensure a cohesive UI/UX. As the team lead, I planned our next steps, assigned tasks, and served as the main point of contact with the CEO and the developers.
Timeline: 3 months (October-December 2023)
My Goal
Clarify Neoboard’s product vision & improve future work by reorganizing the design framework and advancing the design of core features.
To achieve this, I focused on three main areas of improvement:
Product Framework
Workflows (a feature)
Tags (another feature)
ii.
product framework
A Rocky Foundation
Neoboard's design files and site map were disorganized, making it difficult for the team to work effectively or understand the platform’s vision.
Collaborating with the CEO, I clarified and documented the product’s mission and brand goals, creating a new site map and reorganizing scattered files. This gave the team a clear foundation to build on and set up future contributors for success.
When I joined Neoboard, the design files were overwhelming—spanning multiple Figma files filled with outdated, redundant, and irrelevant designs. There was no documentation or roadmap to guide the team. It was clear that without a structured framework and clear direction, the product would remain stuck in a cycle of inefficiency.
To tackle this, I worked closely with the CEO to clarify the product's vision. Together, we created documentation that outlined the platform's purpose, the problems it aimed to solve, and the target audience it was designed for. This collaboration not only gave me a deeper understanding of the product but also became a foundation for refining our priorities.
Old Site Map
This old iteration of the site map bites off more than it can chew. There are several pages and features that are "nice to have" but don't address core problems, and their existence here only cloud the next steps forward.
New Site Map
The intention with the new product site map was to (1) simplify and focus on core functionalities, and (2) create a strong foundation that allows future features to be added on with more ease.
I created a clear, centralized resource for the platform’s direction.
The updated site map and reorganized design file, supported by the documentation I worked on with the CEO, became essential references for the team. This clarity helped the design team focus on meaningful work and make decisions more quickly.
These changes not only helped the current team but also set a strong foundation for future iterations: future interns also benefit from a more organized workflow and a better understanding of the product’s goals, making it easier for them to continue fleshing out the platform!
iii.
workflows
About Workflows
Workflows is a feature that lets instructors create if-then statements that execute specific actions—such as, 'If a student drops my class, then send them a survey about their experience.' It’s intended to help instructors automate classroom tasks, but when I joined, its functionality and design were incomplete and unclear. Logically, users would like to see existing workflows as well as a path to creating new ones, but designs for such did not yet exist.
I created the Workflows dashboard to simplify access to creating and managing workflows,
turning a confusing and incomplete feature into a clear, easy-to-use tool that helps instructors automate simple tasks in their work.
I intentionally designed the dashboard to highlight the most relevant information: existing workflows and options for creating new ones.
The interface included large buttons at the top for quick access to premade workflow setups and a card-based system at the bottom to display existing workflows. This design made it easy for instructors to set up and manage automated tasks at a glance, without feeling overwhelmed by complexity.
Pre-existing Wireframe
This was one of several wireframes from older Figma files. I compiled and organized them all, and found that this wireframe was likely the most recent version of the Workflows dashboard. Using this as a base, I made some slight design changes when moving into a higher fidelity.
Higher Fidelity Draft
Other than using more detailed aesthetic choices, I also moved an entirely separate function, "Create a Survey" into a subtype of Workflow. This change clears up the dashboard and is a more logical compartmentalization of Workflow capabilities.
The redesigned Workflows dashboard transforms a confusing and incomplete feature into an effective, easy-to-use tool for instructors.
By organizing the interface into clear sections—quick access to premade setups at the top and a card-based display of existing workflows at the bottom—it allows instructors to create and manage automated tasks easily.
When we shared the design with instructors, they had positive things to say about its design. The updated dashboard makes managing workflows more straight-forward and less time-consuming.
iv.
tags
About Tags
Tags were created to give instructors a way to track student behavior by applying labels, either automatically or manually. For instance, a student who frequently submits late assignments might receive a tag like "Often submits late." The feature was intended to include a set of default tags while also allowing instructors to create custom ones. However, when I joined, the design was incomplete and lacked clear functionality.
I designed this feature to help instructors create, manage, and apply tags,
turning an unfinished feature into a practical tool for providing additional context and identification to students.
The Tags system was created with an overview page where instructors could see all their existing tags and which students were associated with them.
I also designed a flow for adding new tags: specifically choosing a modal pop-up—explicitly separating it from the overview page—and a step-by-step flow within it—making it clear and easy for instructors to set up.
To guide my design, I looked at other platforms with similar features to understand best practices. One big reference was Discord—the messaging platform allows each "server" or group to have its own "roles" (equivalent to our tags), and has complete UI flows for creating, managing, and applying them.
The final design focused on clarity, with segmented navigation to help instructors manage tags efficiently.
Tag Center
"Tag Center" is an informal nickname that basically refers to the entire Tagging system. Below I show my sketch idea for the 'homepage' or dashboard of the Tags Center ("Tags"), and a higher fidelity design.
Sketch Wireframe
There are two types of tags: Default tags, which come premade, and Custom tags, which are created by the instructor themselves. It made sense to have 3 views that essentially acts as a sorted list for viewing either of the two types, or all of them.
Higher Fidelity
The core ideas don't change much from sketch to this screen. I heavily referenced Discord's system of "roles".
View and Edit an Existing Tag
Clicking into an existing tag in the list takes a user to a new page where they can view or edit details of the tag.
Sketch Wireframe
At first, this would take a user to an entirely new page. The instructor can see and edit how the tag is displayed (such as its name or color), how it is applied (manually or based on automated rules), and which students currently have the tag assigned.
Higher Fidelity
In moving to higher fidelity, I changed this to a modal, because it would help a user remember where they are in the platform, but also forces the user to focus on the details of this one item.
Create a New Tag
This flow is very similar to viewing an existing tag—the biggest difference is that there are numbered steps that accompany the set-up, so a user knows how long it is and where they are in the process.
Sketch Wireframe
Set up of a tag is broken down into steps so that users aren't overwhelmed by a large form. It also mirrors how details are broken down when viewing an existing tag.
Higher Fidelity
Again, nothing crazy changing from sketch to higher fidelity. I just made sure to include some more details that were missing, such as "Cancel" and "Next" buttons.
Flow Demo
The updated system makes it easier for instructors to holistically manage their tags, understand their students, and create a more supportive classroom environment.
The redesigned Tags system offers instructors a simple and effective way to label and track student behavior. This helps instructors quickly identify patterns like frequent late submissions, enabling them to address issues more effectively.
v.
conclusion
What's Next: The Rest of the Platform
This internship showed me the value of stepping up and taking initiative, especially in unclear situations. A key takeaway was how critical it is to deeply understand the product—its purpose, users, and challenges—to make informed design decisions. Collaborating with the CEO to define the product’s mission gave me clarity that guided the rest of my work, from refining workflows to ensuring features aligned with user needs.
My goal was:
Clarify Neoboard’s product vision & improve its functionality by reorganizing the design framework and advancing the design of core features.
Did I achieve it?
Yes!
Now it's up to the next batch of interns to continue to build on top of it.
During my time at Neoboard, I turned a scattered and incomplete product design into an organized product roadmap. The redesigned Workflows dashboard and Tags system are practical tools that instructors can rely on, while the restructured design framework gave future teams a clear starting point. These improvements not only enhanced the current platform but also made it easier for others to continue building on the work.
Impact: Better Future Work
By reworking the product framework and documenting key goals, I created a solid foundation for Neoboard’s current and future development. A clear and well-organized product site map allowed my team to focus on building meaningful features rather than untangling confusion. Setting up this foundation also ensures that future designers can pick up where we left off with less friction, allowing the platform to grow and evolve over time without losing its vision or usability.