WEB-BASED APPLICATION
RESPONSIVE DESIGN
COMPANY
UX, UI, RESEARCH
MY ROLE
TOOLS
DURATION
3 WEEKS
ChattyKathi
PROJECT SUMMARY
What is ChattyKathi?
If you ask them, most people will tell you that they're a bad friend. Amidst all of the demands on our time, maintaining friendships can feel like a low priority, and social media only makes matters worse. The ChattyKathi team believes that everyone can be a *great* friend - you just don't have the tools to show it. Their simple "invisible app" is just that tool. It takes just 5 minutes to set up a KathiChat with the people close to you, and team Kathi will send you personally-curated conversation starters and fun topics on a schedule of your choice. Conversations happen over SMS, so you don't have to worry about downloading yet another app.
The
Challenge
Prompt
Libraries
Initially, our stakeholders from team Kathi asked our team of three to redesign their newly launched Prompt Libraries.
They also wanted to remove their own biases and evaluate the process and product concept to ensure the process is intuitive to their target user. Our team worked to evaluate the product so users would have more buy-in & engagement with the prompt libraries. At the time of this sprint, ChattyKathi had plans to grow from a D2C business model to a B2B model within the next 6 months; therefore, they wanted whatever solutions we came up with to be scalable with their business goals and new target users.
Team Kathi provided us with a target user.
Target
User
Nina is extremely busy with her grad program and other obligations, and often forgets to reach out to her friends. She isn’t a big fan of social media, but she wants to foster deeper relationships with friends, both near and far.
RESEARCH
C&C Analysis
To tackle our stakeholders top priority - Prompt Libraries - we dove into comparative analysis to see what leaders in the field of content curation offer. While we looked at nearly 10 competitors overall, we focused our research into companies that had experience with content curation, like Tumblr, Pinterest, Twitter & Behance, since they had developed intuitive onboarding flows while also helping users customize their content journeys.
In particular, we found a lot of interest in how Tumblr did this, particularly on mobile, because of the visual way they were able to connect their parent categories and subcategories visually.
-
App designed for couples
-
Occupies social wellness industry
-
Sends couples daily conversations topics
-
Social self care app
-
Occupies social wellness industry
-
Offers daily self care questions to share with personal friends and app users
Our stakeholders identified to us two main competitors.
In our experience with getting acquainted with ChattyKathi, it became clear to us that the onboarding process was the avenue in which users discovered the content libraries, so we wanted to look at how our competitors tackled their onboarding flows.
Number of Onboarding Steps
5 steps
9 steps
15 steps
While both apps had certain small features we thought could translate to Kathi well, the top insight from the task analysis became the length of onboarding process since ChattiKathi's onboarding flow was the lengthiest of the three. Giving us another clue that ChattyKathi’s onboarding flow maybe something we wanted to explore in during the sprint.
We needed to further validate new questions:
Are we offering useful information to users?
Are we offering useful information to users?
Are users understanding the
value of the Prompt Libraries?
What do existing and potential new users think and feel about
the onboarding process?
This task analysis offered us our first clue in the discovery phase that ChattyKathi’s onboarding flow maybe something we wanted to explore deeper during the sprint. We then decided it was time to see real users interacting with the product during the next phase of user research.
Understanding the User
Original
Onboarding Experience
To understand what users feel and think about ChattyKathi's onboarding process we conducted 9 contextual inquiries with users across the globe. Very quickly this exercise provided major trends and pain points began to emerge.
“I'd like to skip entering phone #s”
“This is great, helps me understand the product more.”
“I’m not sure who will see it and how this works yet”
“Would have loved to see this earlier, makes me understand the product more.”
“I don’t understand the product on this page to be comfortable giving my phone number. “
“What am I getting into?”
Insights
Onboarding process is
overall too long for most users
Users don't understand
the product and how it works
Adding phone numbers
is the biggest pain point
Users understand + enjoy CK when introduced to the Libraries
Reimagining Onboarding Experience: Addressing User's Major Pain Points
It was important to us to provide a shorter onboarding to new users while still being able to gather critical information in order to customize their prompt libraries/conversation starters. We decided to expose users to the libraries earlier in the onboarding process, so they would be more familiar with the tech, and thus, more likely to invite their friends and family to participate.
Original
User Flow
After consolidating and eliminating unnecessary screens in the original onboarding flow, we wanted to challenge ourselves to come up with a creative solution to “add phone numbers” which was the biggest challenge to new users across the board.
After brainstorming through obvious solutions, for instance; connecting to users' contacts (which isn't an option since ChattyKathi is a mobile website instead of an app, so it doesn't have the capability to connect to user's contacts as an app does). We decided then to leverage an existing ChattyKathi feature; their opt-in text buried in settings for users who did not automatically get a text to join their created chats.
Existing Opt-in Text
By using this opt-in text, users wouldn't have to manually enter their friends phone numbers to the ChattyKathi chat, instead users would get to a screen with a similar message as the above and they could simply copy and paste this text on their own phones and then send it to friends to JOIN.
.jpg)
Updated
User Flow
As excited as we were with our creative solution for our users biggest pain point, the messy constraints of the real world and business limitations forced us to go back to the drawing board. Because of the SMS API pricing ChattyKathi was currently using, they had a limited amount of numbers that would not make this solution viable for them at the moment.
Luckily, our overall new and improved flow allowed us to switch out our innovative “Opt-in” feature screen for the traditional add numbers screen we could still optimize.
INFORMATION ARCHITECTURE
Original
Prompt Libraries
Card Sort
It was then time to tackle our stakeholders top priority; the prompt libraries. With over 100 internal libraries and 1,000 prompt questions and growing, we knew we first wanted to perform a card sort on their existing categories to optimize for hierarchy and intuitive navigation and to ensure that users would be able to easily find the most relevant prompt topics.
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
Card Sort
Results
Simplifying Libraries from 25 to 15 top-level, parent categories
Validating this finding
later on in User Testing
Our initial card sorting activity included only 4 users. With more time, we would like to conduct card sorting with an additional 10 users to validate our findings.
DESIGN
%201_edited.png)
%201_edited.png)
Design
Exploration
Having built our research and information architecture artifacts, we sought to design tangible solutions to address our findings.
We first started with a design studio method, this way we could generate lots of ideas in a short amount of time while also cherry picking the best solutions that we would eventually combine when we moved into wireframing.
While we did design for responsive web, we focused on a mobile first model because that is where most of ChattyKathi’s user traffic comes from.
Wireframing
Newcomer Nina, our target user, starts the new onboarding flow by going through ChattyKathi's existing sign-up process.
Existing homepage
Existing sign up screen
Next she sees the first new addition to the onboarding flow, a "How it Works" screen, so she can see the product in use with real world examples to help her understand the product and gain clarity on the steps necessary for creating chats.
Option to skip
Preview of categories
Example of a ChattyKathi chat
Example of prompt question sent via SMS in relation to category
Previews of schedule screen
Example of contact avatar for adding friends
Feeling more comfortable with what Nina is getting into, she enters and verifies her phone number to then start creating a chat.
Enter phone number
Enter verification code
Nina starts setting up her first chat after landing on the new "Libraries" screen. Here she names her chat, chooses who she will be chatting with, what type(s) of questions and topics she wants her chat to receive.
We chose to consolidate the information on this screen so it would be easier for users to understand that the filters "Relationship Type" and "Types of Conversation" customize the type of prompt questions they will get on their chat. This consolidation was important to us because we noticed during our contextual inquiry that users didn't understand the relationship between these questions/filters and the categories they chose.
Name your chat
Tooltips to further understanding
Customize "type of conversations" you want to have
Customize "type of relationship" you have with the people you're going to add in your chat
Next sessions are graey out to guide user through required sessions
It's then time to choose topics that she would like her chat to receive/discuss.
Badge for new categories
Subcategories
Badge for trending categories based on engagement
Existing "sample questions"
Existing category description
Tooltip for engagement success
Clarity on "active" and "inactive" selection states
More clarification on the relationship between parent category and subcategories
In the next screen, Nina sets the schedule for when and how often her chat will receive prompt questions/text messages from ChattyKathi.
Choose day(s) of the week
Timezone is autofilled by GPS location
Next sessions are graey out to guide user through required sessions
Tooltip for engagement success
The last step in setting a chat is adding the phone numbers for each member Nina wants to add to the chat. This used to be the first step on the original flow, but it was a pain point to users since they didn't yet understand the product and why they had to give their friends/family info right away.
Popup for option "Heads Up"text to send to friends before finishing setting up the chat
Contact information of every friend added to this chat displayed
Friend's contact information populate above the fold once added
Tooltip for engagement success
After that, Nina sees a confirmation and celebratory skeleton screen animation, and gets takes to the ChattyKathi's dashboard where she can see the chat she just created. She's also able to edit her hat from the dashboard.
Confirmation skeleton screen
Current dashboard. All chats created are displayed and can be edited from here
USABILITY TESTING
2 rounds of usability testing conducted with a total of 12 users.
~ 7 min.
~ 4 min.
Reduced onboarding time by ~ 3 min.
75%
Users found subcategory under the
correct parent category on their first try
Explore Prototype
While the overall testing was successful with users noting this was a simple and intuitive experience (a massive improvement from our contextual inquiries) we did discover some insights for changes that would further improve the user experience.
BEFORE
AFTER
Adding information tooltips to explain how the filter questions affect the prompt questions users receive because while the new Library page was overall easier to navigate to users, there were still some users who felt unclear about the relationship between the filters and prompt library.
BEFORE
AFTER
Plus buttons and check marks were added to every subcategory to indicate when categories & subcategories are added.
BEFORE
AFTER
Moved the heads up text from the bottom of the "How it Works" section to the "Add Numbers" screen since users had the option to skip "How it Works" and most users found this feature useful.
NEXT STEPS
While we accomplished our stakeholders goals and beyond during this 3-week sprint, there are still some next steps and recommendations we have in mind to ensure the success of our solutions.
Card Sort
Revisit card sorting as the
libraries and categories continue to grow.
Opt-in Feature
Revisit the opt-in feature as it becomes
more financially viable to solve for user's
biggest pain point (adding phone numbers)
Analytics
Set-up analytics to monitor onboarding success (mobile vs. desktop, bounce rates, exit rates, etc.).
A/B Testing
To compare our solution with the
original + take into account SMS, which is
part of the onboarding process in the real world.
Premium
Evaluate e design for the premium user
flow since ChattyKathi runs a freemium model.