The Mighty – Topic Pages
The Mighty is a platform that helps people facing health challenges and disabilities to empower and connect with one another. The platform strives to provide safe spaces for its community to express themselves and get the support they need.
The goal of this project was to identify better ways to meet our users' needs through a redesign of the topic pages. These pages would provide the community with relevant posts, useful resources, and a safe environment to engage with others on the platform.
Role
UX Designer
UX Design, UI Design, Wireframing, Prototyping, Interaction Design, Beta Testing
Background
When the Mighty first launched, it was primarily a platform for users to read articles published by staff and other approved contributors. Eventually we allowed all members to create short form posts. These were grouped together based on hashtags and could be viewed from their respective Topic pages.
As the posting feature gained more popularity and more users were ending up on these topic pages, we saw an opportunity to add more value to our users through these pages. We aimed to achieve this through dynamic features and rich content to get users engaged with one another and the platform overall.
Users
Our community often experiences difficulty in their lives and want a way to connect with others. The Mighty provides a supportive, safe space to let people know that they are not alone in their struggle.
Discovery
I researched other social media apps to see how they curated content on their topic and community pages. I specifically wanted to know how each platform drove user engagement to these communities, and how they maintained the user's interest once they were there. I also gathered features from each of the platforms that could potentially be helpful within our own.
Wireframing
Next, I began working on the information architecture of these pages. I listed out the key features and potential additions we could include. This served as a guide when structuring the page, helping me to better understand how all the elements worked together. After multiple rounds of wireframes and meetings with the design team, we landed on the following structure.
Info Card
The first section of a topic page is the info card. It contains the most important details of the page for users to get an overview of that topic. These include a splash image, topic name, and a short “What’s in it for me” summary describing the page. There is also a learn more CTA, which would open up an About Page to display the full description of the topic, and any useful resources, websites, or social links.
Below that was the topic leader information. Leaders were either staff, story authors, or influencers that the company partnered with. Including the group leader's image and name made each topic feel more like a community with real people behind it.
Next was the engagement section for each topic. That includes the overall counts of followers and likes to help users understand how active the page is. They could also see how many and which story authors and partners were a part of that community.
Lastly was the information related to posting to the topic, which includes related hashtags and posting CTAs. That allowed users to post directly to the topic page by appending topic-specific hashtags to the post.
Highlights
This section would display dynamic cards prompting users to engage with the community in different ways. These cards could either link to featured stories for them to read, prompts for users to join or start a conversation, or surveys allowing us to gain insights and collect data via user responses to help with content marketing.
Topic Feed
The topic feed would contain all stories and user-generated posts related to the topic. These posts were ordered based on the engagement and age of the content. We included controls for users to sort and filter the feed as they needed.
Page Types
Ultimately I divided the topic pages into four different types, having dynamic features specific to each topic type.
Final Design Specs and Handoff
The final step was creating full specs for the designs in Sketch. I defined flows and interactions for each of the screens across Responsive Web, iOS, and Android. I then imported them into InVision and Zeplin to allow the engineers to begin work on the development.
Once the devs implemented the designs, I tested the beta app and website to ensure it was aligned with the specs before it went live. Here I was able to identify any gaps missing from the design and identify any potential bugs or fixes that were needed.