top of page

We field phone calls and try to meet all the
needs, and a feeling of needing to meet all
needs is a constant pressure…       
-School Counselor   

Year: 2023


     Role: UI/ UX Designer & 
     Project Manager

Tools: Figma and Miro 


Maro, is a start-up with a mission to develop an all-in-one toolkit to support K-12 school counselors in addressing students' mental health needs.

On April 23, 2023, Maro won the 2023 GSV Cup
for Risk Detection in Pediatric Behavioral Health 

In response to the escalating mental health needs among K-12 students, the question arises: 

How did school counselors effectively navigate and address these demands to ensure the well-being and academic success of every student?


Screen Shot 2023-05-12 at 12.13.00 PM.png

This UX case study unveils Maro,
an all-in-one, user-centric toolkit, designed exclusively for school counselors.

Delve into our exploration of this unique tool, revealing high user satisfaction, highlighting its time-saving features and personalized support for students, improving the way school counselors operate in K-12 school.   

Frame 1796.jpg

The Design Process


What is a "full stack child development kit?"

According to Maro, the child care development kit includes: 

  • better, modern mental health content

  • scalable compliance technology

  • efficient methods of monitoring student mental health 

  • a community-based approach to care

Inspected the existing Maro web platform design

To gain an insight into the high level changes for better
user experience and highlight its strengths and pain points,
identifying four main problems to start:


  • Visibility of System Status (Knowing what is happening)

  • Consistency and Standards (Keeping it familiar and consistent)

  • Error Prevention (Avoiding mistakes)

  • Aesthetic and minimalist design (Simpler and cleaner look)

As well as identify a list of questions to ask the users and
the clients to get a deeper u
nderstanding of the user
needs and client goals.

Screen Shot 2023-04-22 at 7.30.25 PM.png

School Counselors expressed: 

No capacity to build practices even if they save time….

If all the information was in one place - one window in which you can see emails, chats…, Right now it just feels like it is all over the place.                                           

“...there's just a lot of steps and a lot of paperwork and if it can be digitized and in one area, one platform and really able to access like simple access, quick access is really nice.”   

Competitor Analysis  

Among the many mental health platforms designed for schools, Panorama Education is Maro's main competitor.  


Panorama Education is a comprehensive platform designed for the entire school systems, while Maro is uniquely designed for school counselors.  

Maro allows counselors to customize individual and group screenings, referrals, teacher and family communication in compliance with specific school policies. 



Screen Shot 2023-04-17 at 1.07.51 PM.png


The counselors are
"overwhelmed and ove
rworked," and that was pre-validated by their hectic schedules that came in the way of our interviews,  reinforcing our focus and purpose for the project. 


Ultimately we managed to conduct interviews with 6 school counselors.  Having some familiarity with their working environment, I was able to probe deeper to fully understand the complexities of their daily responsibilities and tasks.   

We discovered that school counselors: 

  • are required to adhere to school policies. regulations and parent consent when providing mental health support to students. 

  • see approximately 10 students a day

  • have about 15 min to screen / refer students 

  • don't have actual tools they need to conduct these tasks

The Pain Points

Screen Shot 2023-04-22 at 9.41.18 PM.png

Sign - on process
is lengthy and lacks clarity


Dashboard lacks organization and prioritization of tasks and information


Guardian consent fails to accommodate varying student needs.  


Screening process hinders proactive mental health support, leaving counselors in perpetual crisis mode.

Referral process  lacks adaptability to individual student needs impeding  effective support and access to services.

"How might we create an efficient and tailored experience for counselors in the Maro mental health platform?"

The Counselor

Creating a persona helped identify most essential needs: 

  • manage tasks and save time 

  • obtain guardian consent

  • support student needs 

Frame 1797.jpg

Their lengthy journey

Focusing specifically on the screening process this visual journey map allowed me to align my understanding of counselor Jenna’s interaction with the web platform. 

  • There are too many steps/ touch points she has to take to complete a screening

  • Identified areas of frustration and opportunities for improvement in the design

Screen Shot 2023-05-06 at 10.58.32 PM.png

The four hierarchical stages

A sitemap was created to highlight 4 hierarchical stages of the Maro student support cycle:

  • The Sign-Up

  • Dashboard

  • Screening

  • Referrals 

This provided a logical and intuitive path for users and visualizes user-directed navigation to help counselors cater to unique student situations.  Finally navigation links are defined. 

Maro User Flow Chart - Final - Maro Site Map.jpg


The ultimate goal of our design was to save counselors time.

We made sketches, created mockups, and an interactive prototype to envision the student management screen of the platform.  Recording a long list of improvements, we made modifications to the design after each usability test with the couselors.

Sketches                                                                                           Iteration 1

Screen Shot 2023-05-12 at 11.30.36 AM.png

Iteration 2                                                                                                   Iteration 3

Screen Shot 2023-04-19 at 1.35.31 PM.png
Screen Shot 2023-04-19 at 1.38.41 PM.png

Considering the user's needs,  I suggested we:

  • Declutter and simplifying layout for better legibility and easier navigation

  • Centralize essential student information for quick access

  • Add progress indicator to estimate task completion time

  • Optimize the placement of call-to-action buttons based on natural left-to-right reading pattern

Drawing on my experience as a K-12 teacher, I had a deep understanding for the users needs, and was able to contribute significantly to Maro's user interface design.

My focus was on enhancing the organization of information and ensuring intuitive access to features, facilitating quick task completion for an improved user experience. 

The improved design and the qualitative feedback from the user interviews validated my assumptions. 

Improve efficiency and prioritize tasks

Our solution addressed the counselor’s ongoing struggle to find time to keep up with all their tasks.  

For example, here is the result of our improvements on the Screening and the Dashboard Page, two of the most utilized pages on the mental health platform.

The Screening  Page 

Before - The original wireframe from the client

Screen Shot 2023-04-16 at 2.37.40 PM.png
Screen Shot 2023-04-22 at 9.47.34 PM.png

The PROBLEM with the existing screening page

  • No intuitive structure for conducting a screening, getting consent and a system of communication that prioritizes urgent student needs. 

  • Also, the client suggested we design a mass screening process and scalability to manage a large number of students in the platform.

Our modifications and refinement of design for the screening page was rated “1” for being very easy on a scale of 1-5.  It shows an organization access to all student information all from one page. 

Screen Shot 2023-04-22 at 8.45.14 PM.png

The Dashboard


The original wireframe from the client

The PROBLEM in the existing screen
  • It lacks prioritization of tasks and structure for the counselor to prepare for their busy day.


The modified page is reduced to
3 relevant sections, removing the PD options and
placing the new messages section front and center.

Screen Shot 2023-04-22 at 8.59.34 PM.png

Automation does not always result in a personalized solution. 

Towards the latter part of our process, the client requested an automated Mass Referral process for efficiency, but our research showed that it was not possible to meet individual student needs and provide them with necessary support and services if we built an automated mass referral process.  At that moment we communicated openly and collaborated with stakeholders to recommend holding off on it, although it was not a smooth process.

Screen Shot 2023-05-16 at 11.32.26 AM.png

The Final Product

To fully experience the platform, we created a video to demonstrate the web platform from the perspective of the counselor.

“I like how simple it is, I like that everything is on the same page… would be helpful to keep up with everything… I feel it would be useful.”             

Results Summary

Screen Shot 2023-08-09 at 10.57.02 AM.png

Designed to instill trust in the ecosystem of schools.

Ultimately,  the counselor's best work happens in partnership with administrators, teachers, counselors, students, and guardians. 

Screen Shot 2023-05-12 at 11.56.37 AM.png


Into the future recommendations: 

  • Allow counselors to propose and add their own referrals to the Maro platform 

  • Allow counselors to request particular screeners or add customizable screener options onto the Maro platform 

  • Allow for easy integration of Google Workspace with Maro 

  • Include a print option for screener results

  • Consider adding a note-taking feature

  • Reconsider mass referrals 

  • Include FERPA as well as HIPAA compliances and badges on the Maro platform


  • For Maro to be an effective tool, TRUST is vital within the school mental health ecosystem, requiring collaboration among all community members.

  • Maro empowers school counselors to proactively address student mental health, shifting from crisis management mode.

  • Continuous app usage monitoring will inform tailored improvements for individual school districts and evolving student needs. 

Key Takeaways


  • Maintain open communication and collaboration with client
    to strike a balance between user needs and client priorities - it can lead to better outcomes for all involved. 


  • Listen deeply and inquire with genuine curiosity as it can help understand the perspectives and reasoning of everyone involved.  Building empathy for others is an essential skill for designers.


  • ​ Leveraging different UX tools by leveraging different tools, designers can effectively communicate design concepts and create engaging user experiences. As the industry continues to evolve, continuous learning and development in UX tools are crucial for designers to stay competitive and deliver quality work.  


Screen Shot 2023-04-22 at 9.49.41 PM.png


Reflecting on this experience fills me with pride and gratitude. As a former teacher transitioning into UX design, this project resonated deeply with me because of my empathy for school counselors and their busy schedule. This process allowed me to embrace challenges, learn from mistakes, and value constructive feedback, mirroring the encouragement I once gave my students. My incredible teammates—Sarah, Ava, and Ashley—kept us on track, fostering a collaborative and supportive environment. Working virtually with new collaborative tools and many modes of communication provided invaluable knowledge and skills that will undoubtedly enhance my career as a UX designer.

Thank you

Teammates: Sarah, Ava, Ashley 
Quotation human illustrations:  Aunsi Dumitrescu
Mentors: Mike, Sasha, Victoria, and Andy
Client: Maro (Kenzie and Olivette)
Program: Beginex

Feel free to contact me:
Get to know a bit about me

bottom of page