1. How to thread messages

The big question we had to answer for this project before starting designs was about how to thread messages.
Without reinventing the wheel, we had 4 options:

We narrowed it down to 2 based on customer needs and user stories so to make a decision, I wireframed the ideas for a visual.

We decided on the inbox solution for 2 main reasons:

• The ability for all users to have their own inbox would make it easier to manage.
• Users wouldn't be able to have a 1-to-1 conversation with families when there's a shared inbox, and that was a customer priority.

2. How to organize messages for all user levels

The product becomes more complicated because we have multiple user levels - so we always have to take into account how it would look for higher users. Answering questions such as:‍

• Directors need to have access and oversight into all communication in their center while also managing their own messages. What is the best UI for that?
• What is the best way to manage an inbox as an administrator with hundreds of students?

I explored a few workflows for user stories based on problems we found, specifically for each user level.

As a teacher, I want a clear and quick way to message families individually and know the priority of messages.

As a director, I want my inbox sufficiently organized and not distracting.

As a director, I also want a UI that gives me oversight into all communication between my teachers and families while keeping my messages separate.

For the final solution, what we ultimately decided on was a filtering system so you can truly oversee all communication at once. We also added an archive function to easily clear out inboxes and not be overwhelmed.

From there, it was building out the specs on both the family and user side to complete the 2-way communication. Started with early wireframes to land on the framework and then built out the UI details after sign off.
‍
Although we picked the inbox solution because we didn’t want it to seem as real time as chat, I still wanted it to feel modern and not out-of-date.

Early Wireframes

Final Designs

Spec Handoff

Key Takeaways

Don’t reinvent the wheel: Two-way messaging is not a new concept, there are many examples of great two-way messaging out there. So in terms of design and basic layouts, there is no reason to rethink it. What I aimed for was making it familiar for the user while also staying on brand and making it stand out from competitors.

Understand use cases: With the different user levels and the changing environment in schools, understanding the needs that each user has is crucial to building out the cleanest UI that will solve the issue without being distracting. While directors need access to all communication, it doesn’t necessarily mean they need to be distracted from other work.

Ongoing Learnings

A global style guide is absolutely necessary if you have multiple designers but if you are the only one, it won’t be useful for anyone else unless you create an external resource.
I linked the style guide with a zeroheight resource so everyone has access to my style guide but ideally, and for a next project, I’m going to build an external site with all of the components