Mightier Resource Page UX Design

Overview

Background
Problem
Solution
Mightier is a company out of Boston, MA that sells a biofeedback-based video gaming product that helps children regulate their emotions. They were looking to increase customer retention by developing a content and communications delivery system in their parent app.
The original plan was to create a content stream within the app. Over the course of the project, we realized that developing a new feature, migrating web content, and training staff to create content within a new system wouldn't be time or cost-efficient. 

Mightier was already supporting a web-based resources library, but it didn't display current content and needed a design overhaul. By redesigning the current website's resource page into a blog/resource center combo and embedding within the parent app, we saved time and money. This allowed for future testing of customer acquisition impact as well.

As a result of the redesign, we saw engagement increase and a decreased bounce rate.
‍
With the current structure of their parent app, there was no clear way to send updates or communicate with parents. Parents often missed posts on facebook, and they wanted a dedicated place to share important information.

Role
Duration
Constraints
Deliverables
Design Lead
October-November 2022
• Mobile-first
• 100% remote work
• Competitive analysis
• Generative research
• Wireframes
• Mid-fi prototypes
• Usability testing
• High-fi prototypes
View Mightier's new Resource Center page.
Our design process walked through four main steps:

Our Approach

Research
Synthesis
Ideation
Testing & Iterating
Gather information around the problem.
Distill information to define key problems.
Brainstorm solutions to the problems.
User test prototyped mock-ups and rework designs.

Research

Heuristic evaluation & competitive analysis

I assessed the existing resources page along with competitors' blogs to determine structural organization and functionality.
Considerations:
• Parent App vs desktop display
• Mightier communications
• Categorization, organization, search & filter
• How top articles are highlighted
• Social features: favorite/save/share
• Feedback features
Then we spoke with women in semi-structured interviews about their experiences, and learned how information, communication and support impacted their outcomes.
We heard things like:
First, we conducted an extensive literature review of medical journals, health sites, and news articles on issues surrounding pregnancy-related hypertensive diseases.

Research

What are the problems?

"
I knew about pre-eclampsia...I didn't know about HELLP Syndrome, though, not even when I got it. I found out about it when I got transferred by ambulance to a higher-level hospital.
Hey, if something feels off, you need to just trust your body and your gut and pursue it. It’s not worth the risk to you when a doctor brushes you off. It’s your life, and people die of this.
"

Wireframes & prototypes creation

Design

I put together a lo-fi wireframe that illustrated how the blog and resource library would work together for both desktop and parent app, and then checked for feasibility with engineers and got the green light.
I designed a low-impact mid-fi wireframe to communicate with internal teams and ensure their needs were represented, including content organization and filtering options.
Low & Mid-fi Wireframes
Redesigned an article page template to be more reader friendly, including summaries, photos, and limiting text column width on desktop.
Mid-fi Prototype
I designed a mid-fi prototype (mobile & desktop) for user testing.

User testing

Concept and usability validation
I talked to 6 parents of children with behavioral health concerns.
First, I asked them questions about where they source content, what types they are interested in, how they engage with it, and if they’d be interested in our content.
Then, I asked participants to find and peruse content in the mobile prototype, view a monthly mailer and comment on their level of interest in subscribing to this type of content.
Key takeaways
The most avid content consumers were engaged in communities and regularly participated in chats/comment sections, as well as saving and sharing content.
These parents trusted content shared by leaders and peers with similar behavioral health journeys, and gauged its helpfulness by likes and comment activity.
A few parents wanted their content in quickly digestible or multi-taskable formats, like short podcasts, youtube videos, or highlight articles.
Overall there was a positive response to the prototype and participants were able to navigate easily.

Iterations

Usability improvements & mvp considerations
After interviews and testing:
Decided against any feedback features
Proceeded with monthly theme as part of existing categories
Proceeded with social features: like/share/save
Added a “collections” section for easy access to the most popular content
Noted the validation of community features for later date
After many rounds of manager, Marketing/Content and Dev team meetings:
Got rid of the separation between blog and resource sections, and determined that new content would be marked with a sticker and always appear first, whenever possible.
Pared down the categories and tags to match current content, but kept more in mind for future content creation.
Condensed the number of content “collections” to better represent Mightier's expertise.
Delayed the monthly theme and most of the social features until a later date.
Designed a hi-fi prototype across all breakpoints:
With additional feedback from manager and Marketing:
Moved Collections to top of page to draw attention and provide easier access.
Limited each content card to one tag, discarded tag color coding, and placed at bottom to simplify visual load and draw attention to title.
Reduced size of hero section to encourage exploration.
Removed sorting feature and swapped pagination for infinite scroll to encourage exploration.

Impact

Most significantly, the new design lowered the bounce rate of the resources homepage by 15%. It also gave the marketing team an outlet for greater content production to use on social channels. Further user testing is needed to determine impact on customer acquisition and retention.
Hot spots - desktop and mobile
Grouping some content thematically into Collections allowed us to see an increased interest in anger & frustration and ADHD articles, helping us understand how to target our customers.
Hot spots - desktop
Switching to infinite scroll over pagination saw a 12% increase in page exploration.

Let's collaborate on your next project.