Atmosoft Dashboard Design

Category:

EdTech SaaS

TecoAdvise Content Hub

I led the design for a admin-facing content management and publishing system that enables school administrators to author, schedule, and distribute resources through a centralized content library integrated with student-facing dashboards.

SaaS

Visual Design

Product Design

Role: UX/UI Designer
Timeline: 3 months (April – July 2025)
Delivery: Pilot rollout in Sacramento City Unified, expansion planned across 13 Sacramento County districts

Team: UX Designer (me), 3 Engineer, 1 Product Manager, 1 Co-Founder
Platform: EdTech SaaS (Web App)
Tools Used: Figma, FigJam, Adobe Illustrator, Photoshop

Highlights ✈️

Designed an admin-facing content management system piloted in Sacramento City Unified, enabling 50+ staff to author, schedule, and distribute resources to student dashboards.
Introduced inline editing and streamlined workflows, cutting content creation time by 35% in stakeholder testing.
Defined and shipped a 0→1 admin system, creating the information architecture, interaction flows, and scalable templates (guides, events, scholarships) to support future content growth.

Highlights ✈️

Designed an admin-facing content management system piloted in Sacramento City Unified, enabling 50+ staff to author, schedule, and distribute resources to student dashboards.
Introduced inline editing and streamlined workflows, cutting content creation time by 35% in stakeholder testing.
Defined and shipped a 0→1 admin system, creating the information architecture, interaction flows, and scalable templates (guides, events, scholarships) to support future content growth.

Role: UX/UI Designer
Timeline: 3 months (April – July 2025)
Delivery: Pilot rollout in Sacramento City Unified, expansion planned across 13 Sacramento County districts

Team: UX Designer (me), 3 Engineer, 1 Product Manager, 1 Co-Founder
Platform: EdTech SaaS (Web App)
Tools Used: Figma, FigJam, Adobe Illustrator, Photoshop

Highlights ✈️

Designed an admin-facing content management system piloted in Sacramento City Unified, enabling 50+ staff to author, schedule, and distribute resources to student dashboards.

Introduced inline editing and streamlined workflows, cutting content creation time by 35% in stakeholder testing.

Defined and shipped a 0→1 admin system, creating the information architecture, interaction flows, and scalable templates (guides, events, scholarships) to support future content growth.

Platform Ecosystem & Background

TecoAdvise is Inspirame's school-facing platform that equips administrators, counselors, and superintendents with tools to guide students through college and career pathways. It complements TecoGuide, the student-facing platform, which provides personalized planning, real-time college information, and culturally relevant resources for first-generation and underserved students. While TecoGuide focused on empowering students, TecoAdvise was designed to give school staff more control over the guidance they deliver.

TecoAdvise vs TecoGuide

When this project started, TecoAdvise was still in its early stages and did not yet have a system for content creation. School administrators relied on a mix of emails, PDFs, and separate announcement tools, which often led to inconsistent communication with students. There was no centralized place for staff to create, schedule, or manage content that connected back to the student dashboard. Defining and building a dedicated Content Creation Hub became the next step to support both educators and students in a more structured way.

How can I?

Give school administrators a centralized way to create and manage content that connects directly to the student experience?

When I began exploring this question, it was clear that administrators had very different responsibilities depending on their role. Superintendents needed broad oversight and the ability to push district-wide announcements, while counselors required more personalized tools to tailor content for smaller groups or individual students. To fully understand these needs, I developed a series of resources that mapped responsibilities, permissions, and workflows.

Feature Comparison Table

Broke down what superintendents vs. counselors could and could not do, clarifying overlaps and gaps. This helped define role-based permissions for the system.

Content Distribution Map

Shows how content should move from administrators to students, showing the layers of approval, assignment, and scheduling required

Feature Comparison Table

Broke down what superintendents vs. counselors could and could not do, clarifying overlaps and gaps. This helped define role-based permissions for the system.

Content Distribution Map

Shows how content should move from administrators to students, showing the layers of approval, assignment, and scheduling required

Feature Comparison Table

Broke down what superintendents vs. counselors could and could not do, clarifying overlaps and gaps. This helped define role-based permissions for the system.

Content Distribution Map

Shows how content should move from administrators to students, showing the layers of approval, assignment, and scheduling required

Use Cases Matrix

Captured concrete scenarios (e.g., announcing FAFSA deadlines, assigning personalized checklists, pushing district-wide policies) to validate design decisions against real-world needs.

Personas

The feature comparison table and content distribution map revealed clear role-based differences in responsibilities and workflows, which directly informed the creation of superintendent and counselor personas to capture these distinct needs.

After defining the superintendent and counselor personas, I translated their goals and frustrations into a role-based use case matrix to map how each type of administrator would interact with the system.

File Organization & Documentation

Why it mattered in this project

To keep momentum in a fast-moving project, I prioritized structured file organization and clear documentation. This allowed me to iterate quickly on designs, capture feedback from PMs and engineers, and maintain clarity as flows expanded.

How I approached it

Layer Naming in Figma: Adopted consistent, role-based naming convention
Developer Notes: Created annotated panels with toggling logic, collaboration rules, and backend triggers, bridging design-to-dev handoff.
Design Map & Notes Board: Centralized all flows, edge cases, and feedback in a single workspace for faster iteration.

Why I included this

Previously, especially on case studies that didn’t have much impact, my Figma files were messy and hard to track. Since this was a real-world project with multiple collaborators, I made sure everything was organized and easy to follow, and I’ve carried that practice into all my work now.

Why it mattered in this project

How I approached it

Layer Naming in Figma: Adopted consistent, role-based naming convention
Developer Notes: Created annotated panels with toggling logic, collaboration rules, and backend triggers, bridging design-to-dev handoff.
Design Map & Notes Board: Centralized all flows, edge cases, and feedback in a single workspace for faster iteration.

Why I included this

Design System Overhaul

Before moving from Phase 1 to Phase 2, I conducted a design system overhaul to strengthen the foundation of the Content Hub. While colors, typography, and brand identity remained consistent, the underlying information architecture and grid layouts were restructured to support scalability and reduce design friction.

I explored two different layout structures for the Content Hub flows. The earlier iteration (left) used a wide single-column approach with minimal hierarchy. While it presented information cleanly, it often left large portions of the interface underutilized, forcing users to scroll more and creating higher cognitive load when switching between steps.

Justification of New Layout Approach

I worked with TecoAdvise’s existing design system, which was still fairly new at the time. This meant that many elements such as icons, buttons, and other design components had to be created from scratch. I reused icons whenever possible to maintain consistency across the platform, but I also ended up designing several custom ones. Our current font is Inter, though we plan to transition to either Noto Sans or Poppins in the future. The goal is to give the platform a more playful and approachable feel for schools, administrators, and teachers, while still preserving a sense of professionalism.

Key Problems Revealed After Alignment Meeting

During my alignment meeting with the CEO and engineering team, several critical gaps in my Phase 1 concepts were revealed. Because TecoAdvise was still a relatively new tool, I didn’t have the benefit of robust, long-term usage data, which meant many of my initial design assumptions were made by extrapolating from TecoGuide’s live content library and available site interaction data. While this approach helped me ground my wireframes, the session exposed structural limitations that required rethinking the system.

In the earlier design above, content types were presented in large blue icon-based cards. While visually bold, this approach had two major usability drawbacks:
- It didn’t allow space for critical supporting details (e.g., how each content type would be used, restrictions, or required formats).
- It emphasized visual weight over clarity, making it harder for users to quickly scan and differentiate content types.
- The layout mirrors the structured forms users encounter later in the creation process, creating a smoother mental model.
- Each card now includes a short description to help users understand the purpose of each type without guessing.
- The design can scale as more content types are added without overwhelming users, maintaining readability and reducing cognitive load.
In the earlier design above, content types were presented in large blue icon-based cards. While visually bold, this approach had two major usability drawbacks:
- It didn’t allow space for critical supporting details (e.g., how each content type would be used, restrictions, or required formats).
- It emphasized visual weight over clarity, making it harder for users to quickly scan and differentiate content types.
- The layout mirrors the structured forms users encounter later in the creation process, creating a smoother mental model.
- Each card now includes a short description to help users understand the purpose of each type without guessing.
- The design can scale as more content types are added without overwhelming users, maintaining readability and reducing cognitive load.
In the earlier design above, content types were presented in large blue icon-based cards. While visually bold, this approach had two major usability drawbacks:
- It didn’t allow space for critical supporting details (e.g., how each content type would be used, restrictions, or required formats).
- It emphasized visual weight over clarity, making it harder for users to quickly scan and differentiate content types.
- The layout mirrors the structured forms users encounter later in the creation process, creating a smoother mental model.
- Each card now includes a short description to help users understand the purpose of each type without guessing.
- The design can scale as more content types are added without overwhelming users, maintaining readability and reducing cognitive load.
In the earlier design above, content types were presented in large blue icon-based cards. While visually bold, this approach had two major usability drawbacks:
- It didn’t allow space for critical supporting details (e.g., how each content type would be used, restrictions, or required formats).
- It emphasized visual weight over clarity, making it harder for users to quickly scan and differentiate content types.
- The layout mirrors the structured forms users encounter later in the creation process, creating a smoother mental model.
- Each card now includes a short description to help users understand the purpose of each type without guessing.
- The design can scale as more content types are added without overwhelming users, maintaining readability and reducing cognitive load.

- No real-time updates, creating friction for iteration and increasing cognitive load for counselors/superintendents.
- Only provided a plain text link to “Preview Content Post,” forcing users to wait until publishing to see layout, violating UI feedback best practices.
- Visually unappealing as it felt like a buried feature rather than an integrated part of the workflow.
- Introduces an empty state preview panel on the right, which dynamically populates as users fill in fields.
- Provides immediate visual validation without breaking flow, aligning with user expectations for modern content editors.
- Cleaner layout that avoids disruptive pop-ups and keeps the preview persistently accessible.
- No real-time updates, creating friction for iteration and increasing cognitive load for counselors/superintendents.
- Only provided a plain text link to “Preview Content Post,” forcing users to wait until publishing to see layout, violating UI feedback best practices.
- Visually unappealing as it felt like a buried feature rather than an integrated part of the workflow.
- Introduces an empty state preview panel on the right, which dynamically populates as users fill in fields.
- Provides immediate visual validation without breaking flow, aligning with user expectations for modern content editors.
- Cleaner layout that avoids disruptive pop-ups and keeps the preview persistently accessible.
- No real-time updates, creating friction for iteration and increasing cognitive load for counselors/superintendents.
- Only provided a plain text link to “Preview Content Post,” forcing users to wait until publishing to see layout, violating UI feedback best practices.
- Visually unappealing as it felt like a buried feature rather than an integrated part of the workflow.
- Introduces an empty state preview panel on the right, which dynamically populates as users fill in fields.
- Provides immediate visual validation without breaking flow, aligning with user expectations for modern content editors.
- Cleaner layout that avoids disruptive pop-ups and keeps the preview persistently accessible.
- No real-time updates, creating friction for iteration and increasing cognitive load for counselors/superintendents.
- Only provided a plain text link to “Preview Content Post,” forcing users to wait until publishing to see layout, violating UI feedback best practices.
- Visually unappealing as it felt like a buried feature rather than an integrated part of the workflow.
- Introduces an empty state preview panel on the right, which dynamically populates as users fill in fields.
- Provides immediate visual validation without breaking flow, aligning with user expectations for modern content editors.
- Cleaner layout that avoids disruptive pop-ups and keeps the preview persistently accessible.

- District-level visibility was missing, preventing leaders from seeing what other schools were posting and increasing the risk of duplicate content.
- Drafts were hard to distinguish from published posts, making it difficult for users to manage their workflow.
- Access needed to be scoped so that district-level posts were visible to all, while school-specific posts were restricted to relevant users.
- The CEO stressed the importance of avoiding redundant posts across schools by surfacing activity streams at both the district and school levels.
- An empty state was designed to onboard first-time users smoothly, guiding them into creating or sharing content right away.
- District-level visibility was missing, preventing leaders from seeing what other schools were posting and increasing the risk of duplicate content.
- Drafts were hard to distinguish from published posts, making it difficult for users to manage their workflow.
- Access needed to be scoped so that district-level posts were visible to all, while school-specific posts were restricted to relevant users.
- The CEO stressed the importance of avoiding redundant posts across schools by surfacing activity streams at both the district and school levels.
- An empty state was designed to onboard first-time users smoothly, guiding them into creating or sharing content right away.
- District-level visibility was missing, preventing leaders from seeing what other schools were posting and increasing the risk of duplicate content.
- Drafts were hard to distinguish from published posts, making it difficult for users to manage their workflow.
- Access needed to be scoped so that district-level posts were visible to all, while school-specific posts were restricted to relevant users.
- The CEO stressed the importance of avoiding redundant posts across schools by surfacing activity streams at both the district and school levels.
- An empty state was designed to onboard first-time users smoothly, guiding them into creating or sharing content right away.
- District-level visibility was missing, preventing leaders from seeing what other schools were posting and increasing the risk of duplicate content.
- Drafts were hard to distinguish from published posts, making it difficult for users to manage their workflow.
- Access needed to be scoped so that district-level posts were visible to all, while school-specific posts were restricted to relevant users.
- The CEO stressed the importance of avoiding redundant posts across schools by surfacing activity streams at both the district and school levels.
- An empty state was designed to onboard first-time users smoothly, guiding them into creating or sharing content right away.

🥅The new changes and layout achieved alignment with Inspirame's user and business goals more effectively.

💼 Business Alignment

The refined filtering system supports Inspirame's business goal of scalable content distribution by making it easier for districts and schools to surface relevant resources quickly and reduce redundancy across the platform.

💟 User Alignment

The new UI meets counselors' and administrators' user goal of efficiency by allowing them to apply multiple filters at once, reducing time spent searching and ensuring students receive the most relevant content.

Interaction Audit & Heuristic Validation

I introduced a validation stage before final designs to ensure my solutions were grounded in usability and interaction design principles. Instead of jumping directly to high-fidelity, I ran a structured evaluation using heuristics, walkthroughs, and accessibility checks. Since we didn't have the resources for user testing, which I would have preferred, I relied on the following methods for design validation:

Projects

tecoAdvise