After teaching myself to program, I wanted another challenge. So I redesigned Tumblr.

Published Apr 09, 2018Last updated Apr 23, 2018

The Challenge

A few months ago I confronted every belief telling me I couldn’t learn how to code and started learning. While it’s something I plan on continuing, I had an itch for UX design that wouldn’t go away. It combined my enthusiasm for problem-solving and my fascination with human behavior.

Both were disciplines I’ve dreamt of learning for a long time, and I didn’t want either to remain something I said would someday happen.

And so I decided. I switched career paths from neurobiology and set my sights on these goals. But, I was stuck. Should I focus on front-end development or UX design? That’s when I realized—the only person saying I had to choose one or the other was myself.

So, I came up with my own solution: I would learn both. After working on a few JavaScript projects, I challenged myself to redesign the iOS app of a platform near and dear to my heart: Tumblr.

A bit of background

I remember signing up for Tumblr when I still had braces 10 years ago. It’s connected me to some of the most interesting people I know and helped me navigate problems I thought no one else had.

But over the years it’s had problems of its own. I’ve watched it struggle to compete and stay relevant in today’s fast-changing social media industry. I didn’t want to remain a passive observer and watch it tumble (pun intended) from the sidelines anymore. So, I took a hands-on approach in figuring out what UX solutions I could think of to remedy some of its problems.


A quick look into my redesign

Before diving into the study, I want to express my admiration for what Tumblr designers have already done with the iOS app. And nope, I’m not just saying that for the sake of this article. I understand there are reasons to decisions they’ve made based on data and research I don’t have access to. This study is based strictly on my own research and resources, and for that reason isn’t fully comprehensive.

Business goals vs. and user goals

To avoid an unsolicited redesign, I made sure there was a real user need for whatever I proposed and that it solved a problem. I started by understanding Tumblr’s business and user goals, then worked toward solutions that would connect them.

First things first, what is Tumblr?

“A place to express yourself, discover yourself, and bond over the stuff you love … where your interests connect you with your people.” — Tumblr’s mission statement (Feb 2018)

A part of my research involved understanding what made Tumblr successful, what it stood for, and what it was doing for users today.

Its founder, David Karp, built it from the ground-up with the goal of lowering the barrier to blogging. It was his baby. I believe the groundwork he laid down for it has been a large part of Tumblr’s success, and I wanted to create something that respected his vision.

He designed Tumblr to not have many of the features thought of as necessary for social media. Showing follower count on a user’s profile, and other numerical markers of popularity, was one example. He believed it poisoned a community having it built around numbers. And he feared it becoming metric and optimization-driven like “every [other] big tech company.”

Business goals

1. Make revenue

Karp never intended to run Tumblr like a business. He felt monetizing it would compromise its authenticity as a platform for creatives. But he needed to make it work if Tumblr were to stay up and running, so he sold it to YAHOO! in 2013.

YAHOO! rolled out several ad products and merged its sales team with Tumblr’s, but it repeatedly missed sales goals. Both had very different audiences from each other with YAHOO!’s being much older and Tumblr’s being much younger. This made it difficult to work together, since both teams were going after different types of advertisers.

Tumblr struggled to move from being a small, independent company to being run by a large one. And it’s still trying to find that balance. Today it’s run by Verizon after they bought YAHOO! in 2017, and Karp has since resigned.

2. Grow user base


Tumblr annual user growth (data collected from Statista)

Tumblr’s struggling to grow its user base at the same rate as its competitors. It has almost four million blogs today, but growth has been down for the past four years and it’s predicted to keep going down for the next two years.

3. Increase engagement

Tumblr doesn’t have as many active users as its competitors, but its users are pretty engaged. They spend more time on it per month than Instagram users and their session lengths beat Instagram and Facebook.

This is where staying relevant is a problem, because its competitors are constantly introducing new ways to keep their audience engaged.

User goals

I conducted 72 interviews with randomly selected Tumblr users by survey and chat. Since most of them wanted to remain anonymous, I omitted their usernames from public view. The most common goals that came up were:

User demographics

Tumblr has the youngest user base of its competitors with the average user being around 18–24 years old. There’s an equal amount of male and female users, which is also unlike its competitors.

67 percent of interviewees said they’d been on Tumblr for more than five years. When asked what kept them on Tumblr, the most common answer was they could be themselves without judgement from others. They didn’t feel pressured living up to a certain image, because the community was accepting of differences. Some even opened up about Tumblr being the first place they felt safe exploring issues they felt completely alone in, like sexuality and mental health.

I didn’t realize how meaningful Tumblr was to a lot of users. It was more than a space to pass time looking at memes or aesthetically pleasing photos. For many it was somewhere they could genuinely connect with others like them, figure themselves out, and navigate personal issues.

User persona

I built the following user persona around the responses I received in my interviews and kept it at the center of my design:

Research

Users struggled with the iOS app

  • 54% used the iOS app more
  • 32% used desktop more
  • 13% used both equally

…but don’t let the numbers fool ya! Even though over half used the iOS app more, it wasn’t because they found it easier or more enjoyable. Their on-the-go lifestyles didn’t give them much of a choice.

“[I use the] iOS app more because it’s just more practical to my lifestyle, but I prefer the desktop version because it’s easier to navigate.”

Those who used both equally felt some features were easier on one over the other. And they split their time between them depending on what they needed to do.

While desktop users deliberately avoided using the iOS app. They complained it was very inconvenient, time consuming, and difficult to navigate.


Typical response from users about Tumblr iOS (The Office)

Here’s a quick analysis of Tumblr’s homepage


Homepage, also known as the user’s dashboard

Problem #1: Tumblr’s interface went against user instinct

98 percent of users said when browsing their feed, they focused immediately on a post’s content, not who posted it.

You may be thinking, “Well, that makes sense. Tumblr’s made up almost entirely of large, colorful photos. How could it not grab their attention first?” But that’s not enough to explain it. The same percentage of users said who posted it was just less important to them than the content itself. And in most cases, they ignored who posted it altogether.

Solution #1: Content first, information second

Let’s cover the basics of my redesign. I changed the general layout of posts by putting the content at the beginning, so it’d be what users saw first when going down their feed.

After that I put user information. This included who posted it to their feed, who they reblogged it from, and who the original source was. I organized it all together, so users wouldn’t have to scan the post from one spot to another.

But it was still problematic that users were ignoring each other. So, I added the feature of swiping left to see a user’s eight most recent posts in grid form.

This would make it easier for users to find more of what they’re looking for, since a blog they like a post from is likely to have more of the same content. They’re also getting to know another user and their blog without having to even leave their feed. If they see a blog has a lot of what they’re looking for, they’re likely to remember it and the user behind it.

But it’s not only useful for getting to know new blogs or finding new content. One of the biggest reasons users gave for staying on Tumblr was interacting with and checking in with close friends they made on it. With this feature they could see how their friends are doing by checking on their recent posts.

Here’s an example of a friend who’s recent posts suggest you may want to reach out to them:

Another problem area was Tumblr’s way of recommending new blogs to follow. Every nth post, a handful of recommended blogs showed up based on a user’s like history. But the algorithm wasn’t the problem. A blog’s avatar, banner, and bio took up over half of the given space, while a preview of the actual blog only took up a fraction.


Tumblr’s way of recommending blogs

This didn’t make any sense. Since Tumblr is one of the only platforms that lets users customize their profiles, was this to let them express their creativity or personas more? Or was it to encourage them to pay less attention to content and more attention to each other?

In any case, the window of opportunity to convince users to follow blogs they didn’t know was narrow. And based on my interviews, they were going to base their decision on content and not avatars, bios, or banners.


Redesign of Tumblr’s recommended blogs

So in my redesign, I made the blog’s content the star of the show. I displayed the most recent posts in a grid to give a better overview of what the blog was about. This would better guide the user’s decision to follow or not.

I also gamified the experience to encourage users to not only spend more time doing it but to have fun with it. They could swipe right to follow or left to see another blog. This would be a more effective way of getting users to connect with each other, because what their blogs contain is more representative of their interests than what their bios say. Especially since a majority of users don’t have anything in their bios at all.

It’s a win/win. Users find more blogs they like and people with similar interests who they’re likely to connect with. They’re spending more time browsing and chatting. And they’re increasing Tumblr’s engagement doing it.

Problem #2: Queuing posts

Before this study, I had no idea how important queuing posts was to users. I thought a dedicated few just set aside several hours to churn out content around the clock. But, let’s face it…

Queuing let users schedule their posts ahead of time, which took some of the pressure off managing a blog. After finding out more than half depended on it to keep their blogs active, I had to make it a priority. Active blogs helped engagement rates, and letting users keep their blogs active on-the-go would switch more from desktop to mobile.

But queueing was the most complained-about feature in my interviews. Users complained there were too many steps involved, and some of even resorted to third-party apps to get the job done. That so many were going out of their way to make the app work for them, and even compensating for what it lacked with another app, was a huge red flag to me.

So, the first thing I did was take apart the process. I wanted to understand how every part of it made up an experience that frustrated users.


Tumblr’s queuing process

UX designer Steven Hoober said 49% of mobile users hold their phones with one hand, and 75% of mobile interactions are thumb-driven. He called this the “thumb zone” principle. In the current design, all but the first step are in the red-zone. Can you imagine doing this on a crowded bus where you had little to no wiggle room for every post you wanted to queue? This was an actual scenario a user gave.

Solution #2: Manage your blog on-the-go


Redesign of Tumblr’s queuing feature

The first thing I did was unhide the feature and get rid of all the unnecessary steps. Now all you had to do was press and drag to get the job done.

You might have noticed I switched the commenting feature out for a queueing one. Tapping on a post’s notes also led to its comments, and it didn’t make sense having two buttons doing the same thing on the same page. So instead I added the option to swipe right to view or leave comments. Users would still be able to access comments when viewing a post’s notes, but this way conserved space and felt less redundant.

Problem #3: Users weren’t seeing what they wanted

A part of my research involved going through reviews of the current version in the app store. I wanted to understand what users were having the most trouble with.

Aside from queueing, the biggest complaint was users not getting the content they wanted. They complained of scrolling their feed to no avail in search for something they liked. It wasn’t a matter of following the wrong people — rather, what they looked for differed per session.

This made sense. Finding and sharing enjoyable content was the first user goal I mentioned earlier in this article. And if users weren’t getting the content they wanted, there was little to no reason for them to continue using the app.

Solution #3: Filter and grid view

So having the option to filter through content in a user’s feed was something I had to make a priority. Since over 70 percent of content on Tumblr are image-based, I added the option to view the feed in a grid for a better overview of content. It would let users browse their feed without feeling like it was a chore.

Although it’s not demonstrated in my other mockups, I kept the filter and chat features docked while a user browsed their feed. This would keep them up to date with any new messages they received. And it gave them control over filtering their feed again if they wanted.

Problem #5: Activity and messages grouped together

The activity section alerts users of new likes, reblogs, and followers. It was a part of the main navigation until Tumblr replaced it with instant messaging.


Old navigation vs. New navigation

If users wanted to see their activity, they had to 1) go into their inbox and 2) swipe left. Not only did removing it from the navigation and cramming it with chat make it less accessible, but users didn’t get notifications for new activity either. The number of notifications that showed above the chat symbol only referred to new messages. So if users wanted to know if they had new activity, they had to check manually every time.


Bottom navigation (left), post created by Tumblr user describing the current notification system (right)

I’m assuming Tumblr put instant messaging in the main navigation to encourage users to chat with each other more. The more they’re chatting with each other, the more time they’re spending on Tumblr.

But knowing how others are interacting with your blog is an opportunity for engagement itself. It lets you know how your content is being received and who’s interacting with your blog. It may encourage you to post more and keep your blog active if you see that it’s doing well.

And it may even open up the opportunity to discover new people to chat with. You’re more likely to check a blog out and follow it after seeing they’ve interacted with yours, for example.

Solution #5: Separate activity from inbox

I put activity in the main navigation and moved messaging to the top-right hand corner of the feed. Having them separated and in plain view lets users stay up to date with how their blog is doing and how their friends are doing. It didn’t have to be one or the other.

And that’s all, folks 👋🏽

I’ve learned that every problem is an opportunity to get creative, especially the ones that seem too difficult to solve. And this isn’t limited to design or programming. I’ve applied this lesson to my own life, and this study is a result of it.

My problem was that I wanted to switch into frontend development and UX design but didn’t have the experience. I couldn’t afford fancy courses or bootcamps, and I didn’t want to burden myself with loans. But none of that mattered. There are hundreds of free resources available online. You could look up anything you’ve ever dreamt of learning — it’s literally at your fingertips. I knew with diligence and patience I could learn on my own, and build experience by creating projects like this one. I figured working in the field required diligence and patience anyway. So in that sense I was sharpening another set of skills at the same time.

If you want to learn something but feel you don’t have the ability, experience, or resources — create them. Make opportunities for yourself. Find a way to make your problems work for you, not against you.


A wholesome Mean Girls meme courtesy of the users at Tumblr

I plan on doing more coding and UX design projects like this one to keep on learning and improving. My next steps are to figure out how to code some of the solutions I came up with to practice.

If you have any suggestions or questions, I’d love to hear them! I eagerly welcome any constructive feedback, because it helps me understand what to improve on moving forward.

Up next:

Working on some iterations for this study. Stay tuned.

Discover and read more posts from Maria Paras
get started