Mentors
Bob Duncan, Senior Product Designer
Patrick Multani, Product Designer II
Timeline
4 weeks
2021, March - April
Project Overview
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.
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.
Design Approach
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
Understanding the Problem Space
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
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."
"Meaningful discussions happen in a way that the other person and I are building upon and learning from each other."
"I don't want to have to be my LinkedIn persona."
"It's hard to know what content is actually valuable."
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
Creating the Solution
I D E A T E & D E F I N E
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:
- Newsletters - Incorporating public comments so that community members can see others engaging with newsletter content.
- Chapter Dashboard - Building a community beyond the newsletters through Chapter events and Chapter discussions.
- 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.
D E S I G N
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.
T E S T
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
- Test goals met and evaluated by participant task completion and error free rates
- Test assumptions validated by overall test findings
Test Successes
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.
I T E R A T E
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!
Lessons Learned & Next Steps
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
