Designing the New Q

A new look for a legacy product

Don’t worry. I cleaned up the layers after I took this screenshot.

QuitNet is a social networking site all about connecting people who are trying to quit smoking. It is a serious task, with serious implications, so we have to weigh all our decisions very carefully. There are times when it feels as though it would be more fun to work on a more whimsical project with an established design language, but most of the time I just feel grateful that I get to be a part of shaping the future of a product that has already helped so many people, and adds thousands of users a month.

Recently, I started thinking about what QuitNet could do better and how the design could be updated to reinforce the main pillars of our app. I ended up making many changes, but the main ones, and my thinking behind them, are outlined below.

The New Q

The Feed

The feed is the main component of QuitNet. It is where people go when they have questions, are seeking advice, or just need to vent about what makes quitting smoking so damn hard. QuitNet, like all MeYou Health products, is built on the philosophy that social interactions help people stay motivated and achieve their well-being goals. Knowing the stakes, I set out to create a feed that felt readable, interactive, and valuable.

I started this process researching how other social media sites designed their feeds. After looking at many different sites, I found that there were two main design patterns. The first, employed by products such as Twitter and Instagram is to have one continuous feed, without much separation between posts. Each piece of content feels light and ephemeral because it is a small part of a much larger group. As a result, these sites feel very entertaining.

The second design pattern, employed by products such as Facebook, LinkedIn, and, ultimately, this version of QuitNet, is to have each post exist on the same plane, but in it’s own container. Each piece of content essentially becomes its own “card.” Each card, in turn, has a weight to it, and the piece of content feels more valuable since it is separated from all the others. Social interaction feels more impactful and significant. This style of feed creates a nice design language that can be carried through throughout the product. I can design a card as a module, and know that it has a place. We can create cards that appear in the feed that aren’t posts — a call to action to encourage someone that is craving, nudges to add a profile picture, updates about new features, etc… — without breaking the flow.

An Example of a Post

Another benefit of this style of feed is that it creates a lot of opportunity for motion, due to the depth of the product. After looking through Google’s Material Design guidelines, I became acutely aware of how depth and motion can work together to not only delight the user, but also reinforce hierarchy of information. When hovering over a post, it moves closer to the user, indicating it can be interacted with. When clicked on, the other posts disappear and the comments on that post slide out from underneath. Since the “New Post” module is modeled off the same metaphor as posts in the feed, there is an easy visual transition from reading to creating to have created. All of this is afforded by the new visual metaphor of cards.

The Action Column

A consistent piece of feedback I would get about QuitNet is that it can be difficult to figure out what the primary action is. Our main feedback loop is reading posts and interacting with users, but there are other actions a user can take that have value in supporting a successful quit. The problem is that these actions are all surfaced in a linear way. You log in, are prompted to take the pledge, and then asked how your quit is going. Once you get to that point you are in the end of a funnel and your momentum is halted. In an attempt to surface more information to the user and create a non-linear way to interact with QuitNet, I added a secondary column that can prompt the user to take different actions, give them more information, and promote exploring the product a little more. The actions available in the default version of this column are taking a daily pledge not to smoke, seeing friends’ activity, and getting an overview of your quit status. I chose these as they represent three very important pillars of our product.

The Pledge Module for the Action Column

The daily pledge my not be our main feedback loop, but it is potentially our most important. By pledging, people add themselves to a chain of people that have also pledged that day and get encouragement from other users to keep that pledge. Friends’ Activity allows people to keep up to date on how the people they have specifically chosen to follow are doing in their quit. This allows us to bring in a little of the entertainment value of a Twitter like feed, while getting to keep our interaction-heavy main feed. It even has an indicator alerting the user to if a friend posts about having a craving. Finally, the Quit Status brings to the forefront all the progress that the user has made and the real impact of their hard work in staying quit. These stats are great motivators for our users.

Having a dedicated space for actions also allows us to to try out new features easily such as an emergency craving button, commonly asked questions, quit tip of the day, etc., without having to figure out where to stick these new features and how to get users to notice them. Overall, it provides much more flexibility for us to try out new features.

Keeping it Friendly

When creating this new, sleeker, version of QuitNet, it was important for me to keep in mind what makes the current QuitNet successful. Of course, the main thing is the wonderful community we have, but there has also been a lot of thought put into the current design to create an inviting, warm environment. Where other sites choose to keep a neutral design so as not to impact the content, we try to add elements and colors that create an friendly and comforting backdrop that adds a lightness to the otherwise difficult task at hand.

One of the main elements I wanted to keep in this new version of QuitNet was the tan background. After trying background colors of varying hues and saturation, most end up feeling very cold. Our users come to the site to discuss difficult, annoying, and mainly negative things — and that’s ok! They need a place to vent and unload this stuff, and we are happy to be that place. That being said, a monochromatic blue background, for example, would read as being sterile and reinforce the negativity of the site. The yellow background puts the user in a happier place, and posts that could turn the site into a pit of despair become a little bit lighter to create a sense of camaraderie and unity.

Putting It All Together

We also like to use fun visual element to highlight celebratory moments. On certain days of their quit, we add hats to users’ avatars across the site to let everyone know that they have reached a new milestone. We also give a user who is celebrating a milestone a different prompt for posting. For example, at three months quit, we ask people what they are doing with all the money they have saved from quitting. To indicate that the user’s post is a special milestone post, we put confetti behind it on the feed. Both of these things not only encourage people to come to the site on milestone days, but also provide a sense of progression and reward that reinforce their quit.

Looking ahead

This redesign mostly focused on the feed of QuitNet. I believe that the new visual language will have value throughout the Q, and help unlock the potential of areas that are currently lacking such as the profile view and messages. There is also plenty of work that needs to be done to translate this design to mobile. I am excited to see how users will react to these new changes. Our users tend to be optimistic about change, but since our audience tends to skew in a non-tech savvy direction, it can sometimes be tough to accurately anticipate all their needs. Luckily, they are not shy when it comes to telling us where we make mistakes.


Feed
Post
Mobile

Thanks for taking the time to read this case study. If you would like to get in touch with me with any questions or feedback, my email is JonathanLampron@gmail.com