Redesigning Yik Yak for Android, Motion Design, Print Design, and other cool stuff I did as an intern (Pt. 1)
I arrived at Yik Yak in June of 2015 as nothing but an intern.
I’m… still an intern, but now I’m an intern who’s done stuff! I had very little idea what the next few months would entail when I first started; I was hired with the title of “design intern.” In my first interview 3 excited people (2 designers, Joseph and Daniel, and an Android developer, Tamby) told me all sorts of things that I could help design “when I’m working there” (I’m not sure if they knew it, but they actually managed to tell me I’d be working there during the interview 😅).
I was excited to get started!
On my first day there the extent of the work I did was changing an icon to be featured in the then-upcoming phone number verification flow to feature an Android-shaped phone, instead of an iPhone. It’s the little things that make the experience better, right? Things did get a little more intense, however.
I redesigned Yik Yak for Android. Rather, the feed and main navigation UX, at least. I reduced the number of navigation bars, reorganized the feed, rethought the navigation organization (still waiting on that to be given the go ahead…), and gave everything a little material design polish. Read on for the full in depth breakdown.
When I first arrived at Yik Yak, the Android app looked like this.
I knew before I began working there that this is something that I would love to redesign. Though it had been a year since the original announcement of Material design, larger companies were still just beginning to update their apps to conform to the new guidelines. I wanted Yik Yak to be one of those companies.
I began by identifying what was wrong with the current app and making a list.
The biggest thing that jumped out at me was the number of action bars. Starting from the top, there’s
Home & Yakarma — 1
Navigation tabs — 2
Nearby/My Herd — 3
New/Hot — 4
FOUR BARS. Less than your average bar crawl, but on a phone, that’s three too many. Reducing the number of nav bars became the focus of my redesign.
The posting flow was another problem. From this screen, there was absolutely no way to tell that photos could be posted. Your only hint that photos were even supported would be if there was already a photo in the feed. You were not given the option to post a photo until you were already composing a text based yak.
The visual aesthetics of the feed needed some updating as well. Everything was kinda everywhere. There wasn’t really a grid that anything conformed to, items within each cell were randomly placed, things were pretty weirdly close to the edges of everything, the feed background wasn’t full width, why the heck did the “my herd” and “nearby” tabs go slightly closer to the edge of the screen… you get the point.
So I started like any designer does with some wireframes drawn with good old fashioned pencil and paper.
Nothing too fancy or anything, I just wanted to get a few of the ideas I had down on paper before I started doing real mockups. Honestly, Sketch makes mockups so easy, sketching out in depth ideas isn’t 100% necessary (although it does have its merits).
In my first iteration I wanted to do a few things. The biggest change was moving the tabs to a nav drawer. I never make this decision lightly, because as we all know, out of sight, out of mind. At the time, however, it was the only way I could see to get rid of one of the four previously mentioned nav drawers. I was never completely happy with this decision, but I stuck with it for the time being. I figured we could do some A/B testing later in the game, maybe the younger demographic which Yik Yak targets would have a different engagement with the Nav Drawer.
I wanted to move to a card view. Yik Yak for iOS had already moved to a card view, so it made sense for Android as well. Many “feed based” apps use a list view, which is usually appropriate, but the material design guidelines state, “Cards are a convenient means of displaying content composed of different elements.” Yik Yak certainly has this, with yaks having the ability to be text, images, links, and probably more in the future.
I wanted to make it more apparent that photos could be posted as well, because photo posting was recently released and it needed to be highlighted. I changed the floating action button on the page to pop up 3 different options, highlighting the fact that users had the ability to post photos and links in addition to text.
And thus, the first iteration of Yik Yak for Android was born. Aaaand it was a little bland and unbranded, but that was ok! It’s just a mockup. I came up with a new system to show off notifications to drive engagement without opening the nav drawer, added a card view, moved the floating action button, and made it expand to show what type of content could be posted. Unfortunately, even after the redesign, there were still 3 total action bars. Better, but not a great situation still.
Despite this, we still wanted to get some user feedback on the change from tabs to a nav drawer. Worlds coolest Android dev Tamby baked in a shiny new drawer, but made no other changes. We also decided to keep the swiping functionality in the app, similar to how Google Photos operates. The swiping was left in because it was a familiar action, so even if users never discovered the nav drawer, they could still revert to the action they had been using previously. As you can tell, we were taking every precaution to try to continue driving interaction after the switch.
The user test went… not so well. The person that we talked to was an Android user and a power user of Yik Yak. He was not a fan of the change at all. He was confused by the new functionality, couldn’t figure out how to get to the other pages anymore without us telling him, and basically confirmed every suspicion I had about the nav drawer not being the best option.
So it was back to the drawing board. I tried a number of things, but I knew the nav drawer had to go. I was sketchy about including it in the first place, and the user reactions only confirmed it. A few revisions later, I came up with this:
Better! Here I manage to keep it down to 3 navigation bars, while losing the navigation drawer. I also switched to full width cards, and it felt a lot cleaner. That decision came after reading this insightful article by Matthias Robbers. From here there were a bunch of rapid iterations as I made small discoveries on how to maximize space. I spent time moving things around and doing little sketches in the margins of my notebook at school during the day.
This screen right here was the most major breakthrough I had. It doesn’t look like much but I was so, SO incredibly happy when I got to this point. Moving My Herd and Nearby into a dropdown menu within the home tab allowed me to get the app down to only two navigation bars (New and Hot will plague me forever, but in their current state they’re not all that bad. Not everything needs to be hidden.)
Mad props to Justin for coming up with a new posting flow for iOS. I just brought it over to Android. It brought photo posting to the forefront, making it even more prominent and apparent that you could post a photo. At this point I also added more brand icons, making the whole thing Material, but still playful, which is a big part of Yik Yak’s brand. See the real thing with the new posting flow ⬇️⬇️
And we shipped this version! I couldn’t be more happy with the result. It’s still being changed and reshaped, I’m coming up with some new versions to make posting a photo even quicker and easier, and I can’t wait to work on the next redesign, as well as work on other parts of the app. Writing this, it seems pretty crazy the process I went through just to redesign one or two aspects of the app. Probably far less so than at a larger company, but it was still quite the process. Additionally, it’s pretty crazy to me that that I got to do this as an intern. So much for getting coffee and doing my boss’s dry cleaning?? Apparently movies lie, people.
Funny enough, I wasn’t even technically a product designer at Yik Yak. My main responsibilities were as a brand designer, and I worked on some pretty amazing projects in that department too. More on that in part II, though.
Until next time! 😁
