ChattyKathi
Redesigning the administration portal to get new groups chatting.
What is ChattyKathi?
An “invisible app” designed to bring groups together through curated, scheduled prompts sent to their SMS. The group chat curator signs up through the website, adds up to 10 members and their phone numbers, adds interest libraries based on their group likings, and finally schedules the chat.
The Task
The current portal is in beta phase, aimed to let group administrators onboard students and place them into ChattyKathi chats of up to ten people. Our task was to redesign it to give it a new look and feel, and also make it easy for the school administrator to onboard students and create chats.
“We wanted to build a social connection tool that puts people before the technology — not the other way around.” ChattyKathi
Research
Competitive and comparative analysis
We compared team-based sites: Microsoft Teams, GroupMe and Slack. We also looked at other icebreaker sites like Kaapi and Donut that both can work within slack. These would all be instrumental inspirations in creating something for our persona to onboard students.
Usability Testing
By usability testing the original portal we were able to identify key areas of improvement. This included onboarding, adding members, creating chats, scheduling chats confusion, student interests to already be built into the interface, and standard convention of buttons to provide clarity.
Persona
Combining our usability data and C+C analysis, we created our Persona, Sarah - a busy school administrator who wants her students to have the best possible experience.
Problem
Sarah needs an easy way for students to spark conversation, drive retention, and increase engagement so they feel a sense of belonging; therefore performing better academically, and more likely to finish their program.
Site Map
Original Site Map of the Administration portal. We would focus on reformatting how to Add members and Creating a Chat based on usability testing.
New Site Map: Reformatted Add members and Creating a Chat with guided steps through the process, new Dashboard with new call to actions, and the beginnings of a Student Portal.
User Flow
Two flows
First-time users are taken through onboarding, then to the dashboard. Option to add members or create a chat. These two actions would coincide with each other depending on which is chosen first, followed by adding interest libraries, scheduling a chat, and selecting prompt text.
Sketches
Here we brainstormed ideas about various ways to onboard the administrator, how to add members and create chats. This is where we came up with the idea of having an all-encompassing Dashboard where they could have an overview of everything, and be able to access new and incoming members/chats.
Wireframes
Dashboard
Our first iteration, in light mode. Call to action buttons are similar to navigation, chat is on the left.
Darkmode
The second iteration with more refined look and feel, call to action buttons to help guide the user to adding members or creating chats. Ultimately, we went with light mode to better fit the business needs of the client.
Landing Page
This was one idea for a landing page, similar to other compared sites it gives a more extensive how-to with ChattyKathi, and informs of different benefits including medium articles.
We decided on something more similar to above, but with more elaborated instructions along the way.
Mid-Fidelity Flow
1. Name the Chat
2. Add members
3. Schedule chat
4. Add interest
libraries
5. Add custom text / prompt
Final Usability Testing
What to Improve…
Lots of positive feedback for the overall look and feel, but our testers also expressed desire for more information differentiating the groups and chats on the dashboard, preference to create chat text first followed by scheduling the chat, additionally a calendar shown while scheduling chat.
Mockup Flow
Landing Page
We decided on a Landing page without the long scroll down with explanations of the site - that would be later on.
Onboarding
Here Sarah would input her information, with more information about ChattyKathi on the left as they go through each step.
Dashboard
Arriving for the first time, Sarah has the navigation on the left as before - now there are new call to action buttons on the dashboard including Add Members and Create a Chat. Below are more prompt guidelines, sample prompts, interest libraries and Q&A’s about the Chats.
Add Members & Creating a Chat
Add members
From the dashboard, the user can add members by sharing an invite link, uploading a list (CSV or excel), or manually adding.
OR
Create Chat
Whether they create a chat or add members first, they must add members in one of three ways to begin. This was an important feature to include expressed by the client.
Name Chat
Next is to name the chat, and enter the duration period for the chats to be sent.
Choose Chat Frequency
Choose which days of the week and at what times the chats will be sent.
Customize Greeting Text
Option to use ChattyKathi’s intro text or create your own to be sent out to the chat group.
Congrats, Chat scheduled!
Sarah is shown the chat is scheduled, option to view ongoing chats or return to the Dashboard for more actions.
Conclusion & Next Steps
Being that it was a 3-week sprint team project, we were limited in time. We would love to continue working on the following:
Redesign of remaining navigation features: Message Blasts & Analytics
Add multiple administrators with various capabilities
Clearer differentiations between group and chats on returning dashboard
Toolbox tutorials in the hover state
Interview current ChattyKathi clients
Student Portal - desktop version
Student Portal
We realized in usability testing it would be tedious for the administrator to manually input student interests. Why not have the students add their own interests themselves and have them populate in the admin portal? Here the student would be sent a link from the admin, choose three interests, and then their information would populate in the admin portal for Sarah to place them into chat groups. Next steps is to further create for desktop.
Thanks for reading! For a clickable prototype of the Admin portal, click below 🥳