When I joined Yik Yak we had just released the sharing feature. Handles and direct messaging were the next features on the horizon so visual updates to the content cards weren’t going to win in a battle for priority. Nonetheless I felt like our cards could use some love so I decided to do what I could on the side as we moved forward with these other features.

I started by assessing where we had come from. In the early stages of the app, the cards were incredibly simple and rightfully so. But as time progressed and things like meta data, sharing, handles, etc. started getting added to the cards, things got a little noisy.  At this point, our cards looked like this.

We had inconsistency with our icon fill states, actions were not clearly contrasted from meta data and things felt a little tight. There were actually 2 separate versions of this card. Below is a side-by-side comparison of the same yak content in the feed view as opposed to the detail view.

As you can see, this version of the card also had an outdated background treatment. At one point in the app, a blurred image of a map was used as the background for the yak. It was neat but it interfered with legibility which is why we ultimately moved away from it.

In addition to that, both of the cards I pictured were 2 separate components. This meant that if we ever wanted to make a change to the card, our engineers would need to make that change in two places.

The first order of action was to group all of the actions together. This meant pulling reply, chat, and share into the same containing element and making them consistent with one another.

The app had always paired the action of replying with its corresponding metric. Users, both internally and externally, often commented how this interaction was annoying. When the reply count was so closely paired with the action button, users often assumed the action that would happen when they tapped ‘Reply (9)’ was that they’d see the 9 replies. However the action would send users to the detail screen with the text input & keyboard already called up so a user could reply.

To solve for this very issue, I removed the reply count from it’s action leaving the card actions clear and consistent. I moved the metric for replies to the meta data row and aligned them to the right. In doing so the metric would not only resolve that content block, but also make sense from a hierarchy standpoint as they were a lighter value of black and smaller in scale like the other meta data. It’s the kind of information a user would look for if they wanted it but should compete with the primary elements in a yak: content, voting, actions. At least that’s what I thought.

A primary way our users identified content they might like was by the number of replies it had. Users talked about how much harder it was to skim through given the new layout which was incredibly valuable feedback. Given our scope at the time we had to make a minor adjustment to account for what we uncovered in testing and get it to market.

The metric was easily identifiable for users and although the text was small, placing a larger tap area around it in code with a minimum height for the content area allowed us to get the visual we wanted without taking a hit to usability. The layout of these elements on the card was crucial so I handed this over to our engineers to fill in any gaps that the standard mock may not have covered.

Another added benefit of to all of these tweaks to our cards was that we could use the same card component for the feed view as we used for the yak details view. This saved engineering time when we needed to make any updates the cards and ensured visual consistency across the app. Here's a look at the final product: