Client

Chapter

Kyle Ladewig, Founder

Steve Flory, Founder

Team

Jamie Namba, UX Designer

Rabab Darugar, UX Designer

Mentors

Bob Duncan, Senior Product Designer

Patrick Multani, Product Designer II

Timeline

4 weeks

2021, March - April

Background

Chapter is a community newsletter platform with the mission to connect people through meaningful interactions based on shared interests. Each week, group members submit links to the most interesting content they read that week. Chapter then sends out a weekly newsletter with the community curated links and provides a portal for members to comment on the newsletter submissions.

Chapter’s mission is to break down social media silos by connecting humans to online communities through long form content sharing.

Design Challenge

With Chapter’s mission of driving intimate connection and discussions in mind, they are looking for fresh ways to continue developing their service.

HMW help total strangers feel like best friends so that they’re willing to share and develop deeper communication with each other?

Design Objectives

With my co-designer Rabab Darugar, we built a mobile application for the Chapter platform, with a focus on creating a more unified and flexible customer experience.

The new application includes new ways to interact with other Chapter members and the newsletter content. By building community-focused features, we aimed to expand our customer base and cultivate member connections so that users feel invested in the Chapter experience.

Preparation

• Market Research
• Project Timeline
• Research Plan

Research

• Competitive Analysis
• User Interviews
• Affinity Map
• Existing User Flow & Journey Map
• Persona

Ideate & Define

• POV/HMW Statements
• Mind Map Brainstorm
• Feature Roadmap & UI Requirements
• Information Architecture
• Task Flows

Design

• Sketch
• Mid-Fi Wireframes
• Mid-Fi Prototype

Test

• Usability Test
• Findings Synthesis

Iterate

• Priority Revisions
• UI Kit
• Final Prototype

Tools

Asana • Airtable • Evolve Research App • Figma • Framer • Google Suite • Miro • Notion • Zoom

Research Focus

The Chapter founders' vision for the platform is to encourage quality one on one interactions between their users through content. With this in mind, we focused our research on understanding how online social interactions can build more meaningful interpersonal experiences and relationships with the following research questions and assumptions.

Research Questions

• What are people looking for in online interactions?
• How do people want to connect online?
• What pain points do users have with social media and content sharing applications?

Research Assumptions

• People experience a sense of loneliness and lack of interpersonal connection despite the large presence of social media.
• People want to engage with others online in a deeper and more meaningful way than current social media practices might allow.
• People are curious and find value in content that other people consume.
• People want to learn about different perspectives through discussions.

Industry Research & Competitor Anaylsis

The founders shared a list of competitors, seven of which we shortlisted as the strongest to analyze for our industry research based on notoriety, visual design, and service offering.

Competitors (and Chapter) are solving for the problem of...

• User curated content organization
• News aggregation
• Sharing content and engaging with others

Industry Trends

• Empower people with tools to curate and consume content they deem personally relevant
• Flexibility in content type and sources
• Gap in sharing and discussing long form content

Target User

Based on the existing market and with direction from the Chapter founders, we moved forward in our research with the following provisional persona.

• Mid-20s-late 30s
• Lives in major metropolitan cities
• Career oriented
• Trying to get ahead
• Early adopter of technology
• Entrepreneurial tendencies/mindset

Learning from Chapter Members

To build real connections with our users and gather direct insights, we conducted six 1-1 video interviews with both existing Chapter users and potential users.

Our goal was to understand why people use Chapter and engage in social media and content sharing platforms more generally. We asked participants open-ended questions to learn about how users form new connections, find and engage with content online, and what a meaningful relationship or discussion looks like to them.

Interview Participants

• Age range: 21 - 28
• Locations: Los Angeles, Barcelona, North Carolina, Pennsylvania, Toronto

Interview Findings

After organizing the interview data in Evolve, we synthesized the data into broad themes and crafted key insights based on our findings. To connect our empathy research to a defined problem, we developed a working definition for meaningful interactions and generated how might we questions (HMWs) to help frame our brainstorming.

Validating our assumptions

People value connecting with and learning from others (both in person and online) in a deeper way beyond surface level social media interactions.

In order for user submitted content to feel more relevant, people want to know more about their community members.

Users defined meaningful interactions as:

• Feeling connected, heard, appreciated, inspired
• Open and honest discussions where people can learn from each other
• Bonding through shared interests or experiences

Key Insights & Design Objectives

"I don't know who the people in my Chapter are, so I don't know what they are sharing or why."

Getting to know chapter members on a more personal level makes content more relevant and engaging.

HMW help people feel more connected to their Chapter members so that they are invested in the content and community?

"Meaningful discussions happen in a way that the other person and I are building upon and learning from each other."

People want to have meaningful interactions with others, and this often happens through small group or one on one discussions.

HMW help total strangers feel like best friends so that they’re willing to share and develop deeper communication with each other?

"I don't want to have to be my LinkedIn persona."

Within the current social media landscape, people can feel pressured to embody a certain persona which may or may not limit the depth to which they can genuinely connect with others.

HMW create an inclusive environment so that community members can authentically connect with each other?

"It's hard to know what content is actually valuable."

With the increased volume of content available, people want to consume relevant information.

HMW guide users to submit quality content so that others find value in the Chapter community?

Persona

We created a primary persona that represents key audience segments that we uncovered during our research phase. Throughout the project, we referred back to this persona to ensure that we were staying aligned with the most important problems that need to be solved for users and to help inform our design decisions.

Journey Map

After speaking with members to understand their experiences with Chapter interactions specifically, we mapped out the existing web platform user flow with joy and pain annotations based on our interviews.

Takeaways

This asset helped us to visualize pain points and areas for improvement within the current user journey. Mainly, how could we incorporate user interactions into a unified platform?

Brainstorm

With our research findings and persona in mind, we brainstormed solutions for each HMW question. This process helped us generate as many ideas as possible without thinking about feasibility and avoiding filtering out any potential solutions at this stage.

Feature Roadmap & UI Requirements

We discussed our ideas and the implementation feasibility for each within the scope of our timeline and decided to move forward with the following core feature additions to the Chapter service:

1. Newsletters - Incorporating public comments so that community members can see others engaging with newsletter content.
2. Chapter Dashboard - Building a community beyond the newsletters through Chapter events and Chapter discussions.
3. Messaging - Bringing private messages between members onto the platform (rather than emails as it exists through the current website).

Information Architecture & Task Flows

After researching competitor design patterns and information architecture structures, we worked through several iterations of a site map and task flows based on our feature roadmap.

Originally, we wanted to highlight ongoing conversations happening within the newsletters on the home page to encourage users to engage in discussions, but the app structure and flow started to get too complicated with multiple tabs within a navigation section.

With the final structure below, we refined the design to be more in line with the overall Chapter mission of connection through content while keeping a simple overall structure.

We accomplished this by keeping the home page focus on the Newsletter content to avoid the potential for users to endlessly scroll through an "recent activity" feed. We highlighted avenues to deepen connections within the newsletter communities on the Chapter and Messaging pages instead.

Sketches

We then drew out sketches of the core functionalities. Comparing our sketches was an efficient way for us to discuss our ideas and make sure we're aligned with the direction of our design. For some of the more detailed pages, we found it easier to jump into Framer to experiment with different arrangements the smaller elements.

Mid-Fi Wireframes & Wireflow

We created mid-fidelity wireframes in Framer. This level of fidelity allowed us to focus on the overall experience flow and information architecture before moving into high-fidelity visual design. In these wireframes, we incorporated design patterns that have worked well in competitor products while also including features that address our users' needs and frustrations.

Usability Test Plan

In order to test the overall functionality of our prototype and desirability of the new service features, we conducted feedback sessions with both Chapter users and non-Chapter users.

Test Subject: Mid-Fi Framer Prototype

Methodology:

• Moderated remote video screen share sessions (Zoom/Framer)

Participants:

• 4 Participants
• 1 Chapter User, 3 Non-Chapter User
• Mid to Late 20s

Prototype Task Experiences

With our task flow and design goals in mind, our prototype prioritizes experiences that focus on user to user interactions and community engagement.

1. Explore the app

• Familiarize participant with pages and interface
• General impressions

2. Discuss newsletter content

• View comments on Miguel's newsletter submission
• Reply to June's comment

3. Engage with a member

• Learn more about Miguel
• Message Miguel to ask for a recommendation

4. Engage with a Chapter community

• View Designers United Chapter
• Post a discussion question
• RSVP to brunch event

Main Findings & Key Insights

After sorting our test data into an affinity map, we evaluated test success and prioritized revisions based on the test results.

Measuring Success

1. Test goals met and evaluated by participant task completion and error free rates
2. Test assumptions validated by overall test findings

Test Successes

Overall our design was a success with 100% task completion and positive feedback from participants

Each participant reported that the prototype design patterns and task flows were intuitive and familiar based on their experiences with other mobile applications.

Test Concerns

• The main problem area in the prototype was navigation to and around the Chapters and Chapter Dashboard sections. Participants (incorrectly) made assumptions about the iconography and content due to a lack of labeling in our mid-fi design.
• Participants expected more system feedback and information after rsvp-ing to an event.

Improve Learnability

Include more labeling to improve app learnability

Increase System Feedback

Improve system feedback on Event RSVP to signal task execution

UI Kit

Last but not least, we added the finishing touches to our prototype and finalized our UI.

Prioritize Content

• Make text and image content pop through the use of contrast with dark UI (cool, sleek, rich)
• Include ample white space to maximize readability and ensure that users are not overwhelmed with information

Accessibility

• Ensure that dark mode color palette is in compliance with WCAG color contrast ratios.

Final Prototype

Please feel free to check out our final prototype below!

Challenges

• Defining a "meaningful interaction" from the user research and brainstorming how we might encourage such an interaction within the scope of our timeline was a sticky but productive process.
• We wanted to avoid surface level interactions and the potential for users to endlessly scroll through a typical activity feed. We took special care in brainstorming and defining new features that would prioritize and encourage user discussions while being cognizant of current social media pitfalls.
• While Framer can be a powerful prototyping tool, we learned the hard way about the prototype glitches with repeated interaction and the lack of exporting capabilities. We are glad that we learned how to use a new software and experimented with the built in animations, but we might have been better served designing and prototyping in Figma for this project and case study.

Takeaways

• Collaboration with another designer is fun! With mutual respect for each other's processes and perspectives, we learned a lot together and designed an MVP that we are proud of.
• Establishing a shared vision and understanding of the product mission and user problem (and using this as a North Star) will help ensure that design solutions and outcomes are aligned with user and business context.
• Design feedback from multiple perspectives leads to better solutions. By seeking out feedback from the founders, our mentors, and our peers, we were able to refine and pivot our design beyond our own perspectives and improve the overall user and service experience.

Roadmap

• Build out a more robust content reply feature with options to reply publicly or privately. We envisioned this feature for both Newsletter Submissions and Profile Shelf Items.
• Usability test participants reported that they would be interested in seeing a record of user activity via member profiles to learn more about their community members.

Acknowledgments

Thank you...

• Chapter founders, Kyle and Steve, for the opportunity and partnership in ideating expansions for Chapter services
• Co-designer, Rabab, for all the hours and laughs spent together collaborating
• Bob Duncan and Patrick Multani for their guidance on this project
• Interview and usability test participants for their time and insights
• DesignLab peers for their feedback and suggestions
• You! For taking the time to check out my case study