CASE STUDY
Connecting users in a content finding social app
I created a mobile app experience for Chapter - a startup that aims to enable meaningful human interactions through sharing of interesting articles, podcasts, etc.
I designed an experience where users are matched according to similar books, blogs, movies, etc they like, so that users can meet others who they want to share and find new content from, and invite them to partcipate in the same chapter.
MY ROLE
UX/UI Designer
UX Researcher
TOOLS
Figma
TIMELINE
5 weeks
Feb - Mar 2020
TEAM
Kyle Ladewig
Co-founder/CEO
Steve Flory
Co-founder/CTO
BACKGROUND
Chapter is currently a community based newsletter sharing concept. It consists of an email service and a web app. At the start of the project, the product was 2 months old.
How it works - you belong to a chapter, where you can submit the best thing you read, watched, or listened to that week. If you submit, you get a newsletter composed of the submissions of the other members in your chapter.
THE CHALLENGE
Design a mobile app that tackles Chapter's biggest user problems in order to increase engagement
Over 5 weeks, I worked with the 2 founders of Chapter to:
Complete an exploratory research study - to uncover the biggest user problems and discover insights that will help the founders unlock product market fit.
Explore the mobile app experience - so that the founders can imagine what their product would look like in mobile.
RESEARCH METHODS
01. Stakeholder interviews
02. Generative research - moderated user interviews with 3 Chapter users
03. Competitive research
04. Current state assessment of Chapter
FROM STAKEHOLDER INTERVIEWS
The end goal
Enable people to connect with others online and interact in ways that are meaningful - unlike the cheap reactions that are commonplace today.
The anti-goal
Not trying to build an app where users can sit alone on their couch and just consume info. Rather, we want to create a social community.
The principle Chapter is built on
Content is both the initiator of the interaction, and the basis for an ongoing relationship.
UNDERSTANDING THE USERS' ENVIRONMENT
Chapter's current user flows do not fit into the broader user journey of finding and consuming content
Currently, the interaction with Chapter is linked to when the user checks their email. However, the user interviews uncovered that users like to browse for content during bathroom breaks and moments of distraction, and read articles when they have a block of time they can dedicate.
AREAS OF OPPORTUNITY
1. Connect users with relatable chapters that provide relevant content for the user
Many users don't find the content that is shared interesting enough to open and read it. And currently, users don't have a way to add and find new chapters, so they're limited to the one they got placed in when they onboarded.
2. Increase submission rate
Users may skip submission because they didn't read anything worthy enough to share that week or they forgot what they read.
I focused on #1 because it is the biggest current risk. Looking at the engagement loop on the left, users are not reading the content, and thus don't get to enjoy it. If this happens repeatedly, there's risk of users losing interest and dorpping off of submissions.
See the full research summary ⟶
How might we enable users to find the right chapters for themselves, where they resonate with the content being shared?
Exploring different concepts
Chapter browser -
Enable users to see all available chapters. They can join and leave chapters as they please until they find the right fit.
However, this leads to fluid memberships, over meaningful connections within chapters.
Connections -
Connect people thorugh similar shelf items and empower the users to congregate into the right chapters. This utilizes the newly released shelf feature, where you can add your favorite books, movies, etc.
This is closer to Chapter's roadmap ahead and their mission. It encourages more intimate groups and more meaningful interactions.
Designing the Connections concept
User flow
I defined the various entry points and user actions to map out the app user flow. This exercise identified the key screens of the app. Labeled in blue are the screens I focused on for the scope of the project.
Iterating on the Connections screen
USABILITY TESTING
Testing the concept with Chapter users
I created a mid-fidelity prototype and ran a moderated usability test with 3 current Chapter users. I tested the following tasks:
See chapters
See connections
Start a conversation
Invite to chapter
Start a chapter
Top insights
⟶ People need a strong reason to start talking with strangers - it's not the social norm.
⟶ People want to get to know who the person is before messaging. Just displaying the common shelf items is not enough to start randomly messaging a stranger.
See the full usability test summary ⟶
PRIORITIZED DESIGN CHANGES
What changed in the final designs?
Encourage Follow over Message -
Instead of making the primary action be to message the stranger, I changed it to follow. I also changed the messaging from an open-ended messaging platform to limited conversation threads based on specific content.
Connect the dots for the user. Point out the similarities -
If the user has shelf items, chapters, or followers in common, then clearly show this. It will help the connection feel less like complete strangers.
Applying visual design
Although Chapter is an existing product, I had flexibility on the visual design decisions of the new mobile product. My goal in defining the mobile visual design was to 1) design smart for the smaller mobile screen, 2) modernize the look, and 3) improve usability.
I worked off of the existing web app style guide and selected a concise set of font styles and color palette. I also defined new elements and layouts that were new and necessary for mobile.
Final designs
Given the limited time and resources I had, I was not able to have another round of usability tests. Instead, I relied on the feedback I received from participants in the first round and feedback from the founders.
Feed
See the recent submissions shared by your chapter members and updates from people you follow.
See feed for all chapters or by a specific chapter if you are interested about a particular topic.
Chapters
See chapter specific details. You can find your weekly newsletter for the chapter here as well as a list of members.
Profile
See other people's profiles to learn more about them. Their shelf shows their favorite books, movies, etc which depict a part of who they are.
See commonalities you have with the other person pointed out directly.
Connections
Each week, get connected with others who you have common items with. They may or may not already be in your chapters.
Ask questions and have discussions on the common content.
Conversation starter
Ask your own custom question or select from a set of questions - lowering the barrier of entry of the first message. Also, you can choose to ask anonymously - removing the fear of being judged.
Invite to chapter
If you hit it off with someone and see a connection between the person and a chapter you belong to, you can invite them to the chapter.
This enables users to cultivate the chapter they want and find the right chapter through the deep connections they make on Chapter.
THE OUTCOME
My final deliverables to the founders included the final designs in a Figma file, the final prototype, and the mobile style guide.
Before building out the mobile designs, I recommend that another round of usability testing is done to ensure that the changes I made addresses the problems surfaced in the first usability test.
Although these designs may not be conclusive, I was able to share many learnings on the Connections concept with the founders. As they continue to build upon the Shelf feature on the web app, I believe the insights they gained from the initial user research and usability test will help them to design strong hypotheses in their search for product market fit.