[vc_row][vc_column width="1/1"][vc_single_image media="798" media_width_percent="100"][vc_column_text text_lead="yes"]

Overview:

This is an exploration blog feature for Tumblr. The ability to filter your dashboard by the “Blog Lists” you created instead of receiving a timeline of posts, you'll get favorite blogs or content you want.

Check out the "Blog List" Feature Prototyped: 

[/vc_column_text][vc_row_inner][vc_column_inner width="1/2"][vc_column_text]Problem:

Users have to “dig” through their dashboard to find the content they want. Difficult to find friends or top bloggers you love. Difficult to remember names of users

[/vc_column_text][/vc_column_inner][vc_column_inner width="1/2"][vc_column_text]

Solution

Implement a “Blog Lists” feature to help the user find content quicker of bloggers they love.

Inspiration: Twitter Lists + Youtube

[/vc_column_text][/vc_column_inner][/vc_row_inner][vc_column_text text_lead="yes"]

Why do I care about Tumblr?

So let’s skip to 3 years later to 2010, when I met a friend after a dance performance. I was hooked onto Tumblr as a curious social media addict wanting to following a specific person. Little did I know I’d be part of the Tumblr community and a Tumblr addict within weeks. My 4th year anniversary was in May of this year (Tumblr told me!), I have 13,000+ likes, 4,000 posts, 300 followers, and following 790 blogs.

Tumblr has always been dear to my heart, I’m friends with people whom I’ve never met in real life. I have the steady 5-10 blogs I will check on weekly, My data plan hates me as I’m spent on public transit scrolling through the endless posts from my 700+ blogs I follow, and I remember when it was finals week and my best friend & I just sat across from each other in the campus library giggling at puns all night.

The demographics of Tumblr for those that are curious and keep asking “Who even uses Tumblr? Why not just facebook?”

[/vc_column_text][vc_separator sep_color="color-uydo"][vc_custom_heading]Design Process[/vc_custom_heading][vc_column_text]

1. Persona
2. Design Stories
3. Task Flow
4. UI Sketches
5. Wireframes
6. Prototype

[/vc_column_text][vc_separator sep_color="color-uydo"][/vc_column][/vc_row][vc_row][vc_column width="1/1"][vc_column_text]

1. Provisional Persona of Sarah

My first step is to create a persona. Sarah is an ideal user.

[/vc_column_text][vc_single_image media="804" media_width_percent="100"][vc_column_text]I love my followers, but them cramped into one dashboard system is inefficient when I want to see are my top favorite 10 blogs. Friends have told me they don’t use Tumblr as much anymore because the dashboard was filled with content they weren’t interested in.

My persona “Sarah” could find her favorite followers, her friends, her social work blogs, or her photography blogs to find inspiration, with a lists function similar to Twitter. The ability to share these lists could prove to be helpful to send to colleagues and social media.

Example of my process board of doing some various options…which didn’t work out. I tried asking current Tumblr users through social media what feature would they want and why. The reason being because we’re a little selfish and we have our own interests. It varies how much you use Tumblr and for what.[/vc_column_text][vc_row_inner][vc_column_inner width="1/2"][vc_single_image media="805" media_width_percent="100"][/vc_column_inner][vc_column_inner width="1/2"][vc_single_image media="809" media_width_percent="100"][/vc_column_inner][/vc_row_inner][vc_column_text]

2. Design Stories

With Blog Lists feature Sarah can…

Filter dashboard for specific content
Favorite blogs to Blog Lists

• Create a new blog list
• Edit name of a blog list
• Archive a blog list to remove from main lists
• Share a blog list with bloggers publicly
• Copy link to page to send blog list to other usernames
• Filter posts with a list
• Search for a specific blogger
• Choose a curated list for the content
• View how many blogs are in one list
• Favorite blogs to add them to a created list
• Favorite the blog after viewing profile

[/vc_column_text][vc_column_text]

3. Task Flow

1st iteration of a task flow[/vc_column_text][vc_single_image media="817" media_lightbox="yes" media_width_percent="100"][vc_column_text]After this first screen, I was ready to add another direction a typical user would go. The goal is to not only add or remove in a blog list, but to overall be able to filter your dashboard posts with the lists you created. In doing one specific route at a time, it helped be able to finalize and more clarity to what wireframes and screens are most important to focus on.

 

2nd iteration with more details[/vc_column_text][vc_single_image media="818" media_lightbox="yes" media_width_percent="100"][vc_column_text]

4. UI Screens

Gave me options to consider how I’d implement this feature. There’s a lot of different ways a user can go about it, but after studying the UI of Tumblr, it made sense to incorporate it into the same place as where “Followings people” page and “People you know” is. There’s also a small limited space in the dashboard, so putting it under the multimedia tab would be easy for the user to see.[/vc_column_text][vc_gallery el_id="gallery-147646" medias="824,825,826,827" gutter_size="3" screen_lg="1000" screen_md="600" screen_sm="480" single_overlay_opacity="50" single_padding="2"][vc_column_text]

5. Wireframes

Created wireframes of the route of how a user would filter the dashboard with blog lists. Wireframes helped figure out the structure of the frames and allowed me for quick iterations and moving the pieces around to finalize. It only highlights one route a user could take, which was the more complicated way, so I thought it would be a good way to illustrate.

Blog list allows user (for users with curated blog lists already) to:

• Select one blogs
• Select multiple blogs
• Select all blogs
• Unselect blogs
• Create a new list
• Filter Dashboard

[/vc_column_text][vc_single_image media="829" media_lightbox="yes" media_width_percent="100"][vc_column_text]

6. Prototype

With the prototype complete, I wanted to be able to know these things:

How is the flow? Is it intuitive on the blog list page? Does the filter dashboard idea make sense?

To do the prototype and next steps of usability testing. I focused on the task flow and wireframe of 3 tasks.

1. Enter dashboard (of user profile)
2. Blog list page
   1. Task: Create a Blog List
   2. Task: Add/Remove blogs to list
3. Dashboard (filter posts w/ list created)
   1. Task: Filter your dashboard with a list just created

1st Iteration Prototype: 

tumblr1 from t sripunvoraskul on Vimeo.[/vc_column_text][vc_column_text]Feedback:

User 1: didnt know where to go to add people to blog list. Needs next step in the filter post. Blog page was intuitive and easy to know how to add a user and create a new list.

User 2: Feels process was a little complicated, should simply go to page/profile and favorite or add to..(like youtube) I did sketch out alternatives of a user going through and adding a blog. I should definitely go back to show what other alternatives look like. Not sure about filter dashboard with posts (User only has 79 followers)

After User 2’s feedback, made me think about the “Favorite” aspect being a better interaction than “add to blog list” which would play into user’s profiles well. Having both filter posts inside blog lists came into consideration, but it would break the habit of a daily user of primarily using their dashboard to find content. Forcing the user to look at posts in the Blog Lists section wouldn't be ideal.

Before: Had it to where the user would click on profile settings to find
After: Turned into “Favorite” and adding the new button by follow button

[/vc_column_text][vc_column_text]2nd iteration Prototype

1. Enter dashboard (of user profile)
2. Blog list page
   1. Task: Create a Blog List
   2. Task: Add/Remove blogs to list
3. Dashboard (filter posts w/ list created)
   1. Task: Filter your dashboard with list just created
   2. Task:Favorite a profile by visiting their blog

[/vc_column_text][vc_column_text]

Summary

Keeping it at a lower fidelity than my usual design job helped me move quickly to get some feedback and to be able to quickly switch out elements or fix small details I had missed that could easily confuse a user. I was kind of all over the place, but doing one direction at a time and writing down the ui flow made sure I wouldn’t stray from the task. It was a long process and many sketches were thrown out, however I’m pretty stoked and satisfied with the outcome. Small breakthroughs came while I was in the prototype stage like when I wanted to go back and select all blogs, how would I show that? I wouldn’t want the user to have to uncheck all the boxes, so a easy “Back to all blogs/Show all blogs” is a simple fix. Going into prototype flushed out the details of the Blog Lists more. It greatly affected the task flows and design stories because previous versions didn’t include the more specifics.

Frustrations came more so during the prototyping part because I used keynote so I could share via icloud. Only to find out Apple isn’t allowing icloud share until Yosemite OS is upgraded. The next steps would be to test it again and do more small detail screens for a user to click through with Invision. Getting feedback beforehand helped do a small shift in how a user would save a blog on a profile page. Wish I had done it earlier, however better late than never!

 

 

 

Note: I’m not affiliated with the Tumblr (although I wish!). I love Tumblr and wish the best for future Tumblr interactions. 

Some vector icons in prototype by Freepik from www.flaticon.com is licensed by CC BY 3.0[/vc_column_text][/vc_column][/vc_row]