Home - Stephan Guthrie

The Mighty – Conversations

The Mighty is a platform that helps people facing health challenges and disabilities empower and connect with one another. Up until September of 2018, the platform was only available on the web. As our community grew larger, so did the demand for the app. Before converting our web experience to the app, we identified key areas that we wanted to revisit; the comments section was one of them.

Role

UX/UI, Wireframing, Prototyping, Testing

Challenge

We wanted to rethink the initial approach taken for the comments section as we designed it for the app. We realized that this experience would be frequently used on the app, and wanted to ensure this was conducive to helpful and supportive conversations between members. This section would need to be easy to navigate and maintain the standard of accessibility that our users have come to expect from us.

Example of a full post on web

Comments are shown directly below the user's post.

Full comment view

Scrolling past the full post adds a sticky header with the title of the post.

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.

Scope

The iOS app was scheduled to release in September of 2018. We needed to update all core features from the web to work properly on a native iOS app. Once all the planning was in place, each experience was given a set amount of time for the design, implementation, and QA testing to meet that deadline.

Discovery

I researched to see how top platforms were handling some of these features, and how we could potentially improve on our design. There were aspects of comments that were important to keep including the user’s basic information such as name and photo, when the comment was posted, and the comment itself.

One potential place for improvement was how we handled threaded replies on the web. As previously implemented, there was no clear sorting order making the conversation was difficult to follow. Once I collected enough information, I was ready to move on to the wireframes.

Wireframing

After gathering resources from the research, I put together wireframes to see how we could bring the features to our platform.

As previously mentioned, one of the more important changes was to include an improved reply system. I took this as an opportunity to explore options on how we could improve the replies. I kept parent-comments in chronological order to let people know when a post is still active. However, I made replies reverse-chronological which would be a more natural reading order to the user. I added a “Reply” CTA to the replies in addition to parent comments, allowing users to respond to anyone in the comment section. I also decided to append usernames to the comment when a user responds to someone, giving more context to each reply.

Detailed Mockups

After multiple rounds of review with Designers, PMs, and Devs, I put together more detailed mocks of how this section would look and feel.

I made a few changes to the overall structure of the comment. Since we’re a community-first platform, I made the profile picture a bit larger to put more focus on the member. I kept the display name and username on the same line and moved the timestamp to below the comment bubble to help bring back some of the real estate on mobile screens. I also wanted to introduce geotags to comments. This would display the country that users are posting from, showing that we have a global community on The Mighty.

Due to the nature of the content on the platform, some users tend to write longer, heartfelt responses. Including a full-edit mode would give a larger area for users to write out their comments.

By default, each parent comment would only display two of the most recent replies until the user expanded the thread. This kept the conversation section condensed and easier to navigate. Tapping on the "see previous replies" CTA would load three comments at a time.

Replies would be sorted in reverse-chronological order, making it easier for a user to read through the thread. Once all the replies were loaded in each thread, the functionality of the CTA would change, allowing users to close the thread to the default condensed view.

This section had to be usable with device screen readers for users with vision impairment. I took an initial pass at this by defining what elements should be read to ensure that all tasks were able to be completed using a screenreader. If I found anything broken or missing, I worked with Developers on fixing the issue.

Finalize Design Specifications / QA

I created a full spec for the design, which included defining flows and interactions for the screens. I gave the Devs walkthroughs answering any questions they might've had. After the Devs had a chance to work on the project, they released test builds for the Product Team to QA. Here I was able to identify any gaps missing from the design and identify any potential bugs or fixes that were needed.