Make It Yours
Entering Tumblr is just like entering your own bedroom.
Its safe, its comforting, its you. Go further with Tumblr Rooms
Tumblr Rooms
Class Project Sept ‘22 - Nov ‘22
Project Focus: UI and Interaction Design
Skills:UI Design, Video Editing, Visual Design
Tools: Figma, Illustrator, Adobe After Effects, Adobe Premiere
Reflection:
The first iteration of a design should never be the same design you end up with. It’s okay to not stick with your initial ideas and move on.
Overview: Tumblr Rooms is space to curate the chaos that can only be found on a site like Tumblr. It allows users to create and share spaces that reflect their personal identities — just like their rooms at home. Tumblr Rooms has three components — rooms, collections, and boards.
Challenge: Revamp an underdog company in it’s industry. Tumblr failed to grow with it’s consumers and has lost its large following.
Solution: Create a new space for Tumblr that allows users to tap into their interests, in a gamified and collaborative experience. Tumblr rooms is a digital room that embodies a comforting sense of nostalgia and fully empowers users to customize and personalize their Tumblr feed.
Highlights: I focused on the UI and interaction design specifically of our onboarding and creating key interactions based on user testing. I also created the visual room components and directed/edited our vision video.
Process
Understand It
Understanding the problem/opportunity space before primary researchUser’s evolved and Tumblr failed to grow with them
Think It
Primary and Secondary research plus the key insights learned
Post initial secondary research we conducted a survey (60 respondents) and interviewed 8 former/current Tumblr users to delve deeper into the why people initially used Tumblr.
Why they left or stayed, and where did they go after Tumblr
Survey Findings
Tumblr enables an unhealthy mindset
Users have more engagement on other platforms
There is a lack of innovation and good content on Tumblr
Blogs aren’t cool anymore
Interview Findings
“Tumblr is not like any other social media website, and I'm so used to it. It’s where I discovered my interests”
#competition
“When I use Tumblr now I see that the sense of community has weakened but you can still find certain niches”
#community
“After I redownloaded Tumblr, I started using it a little more for inspiration”
#function
“You can really make [Tumblr] feel like you’re walking into someone's room almost”
#personalization
Starting with 327 data points, we grouped and downsized to 2 key potent insights that would guide our design phase
Creating actionable statements with our synthesized data was super important to look back and ground ourselves during the design phase.
Build It
Conceptulization and initial user testing
We adopted multiple ideation strategies to have the upmost variety and impact. We ran through multiple rounds of crazy 8s, extensive mind mapping, and concept boards. These activities generated over 25 unique ideas.
Failed Concept
#learning #from #our #users
Sometimes concepts fail completely, and that was the case with Tumblr Stickies. However, it directed us to our final concept.
What: Tumblr could create a revenue stream by innovating its features and stop censoring content by creating digital stickers in collaboration with Tumblr artists for users to paste on their feed
Why:
-
Targets user’s need for customization
-
User’s sense of community
-
Way to promote Tumblr artists
-
Monetization for Tumblr through buying the stickers
With Tumblr Stickies we set out to validate the idea and create a series of user tests to determine whether users see value in the idea, if artists believed the idea would be feasible, how users with interact with the feature, and whether or not to make this experience collaborative
- Users don’t see the value in Tumblr Stickies
-
Navigation is confusing and frustrating
-
Tumblr’s feed page is already too cluttered
- Collaboration with friends is fun on Tumblr
Tweak It
Additional user testing and wireframing (lo and high fi)
By moving on from our initial idea we focused on the observation that users enjoyed collaborating together and creating a Tumblr account and a quote from one of our interviews to direct us into the new concept
“You can really make [Tumblr] feel like you’re walking into someone’s room almost”
We prototyped paper rooms and made users decorate the room and tested how they categorize furniture and elements of the room via card sorting before building out Figma testing to make sure that this time we had a valuable idea
Paper Room Insights:
- Creating a room is nostalgic and fun → reminder or early 2000s games
- Creating a room without categories is confusing
- Users categorize bedroom items into either the function, color, or style
Building Out The Concept
Rooms: A companion to Tumblr rooms. In which users can decorate their room and tailor it to your style and aesthetic. Users can have multiple rooms for different cases.
Collections: Compiles and organizes your favorite content. While browsing through their feed, a user will be able to add posts to one of many collections they create — like adding a song to a playlist.
Boards: Boards are like a digital collage or a moodboard. Users will be able to pull content from their collections and bring them together on a freeform canvas.
UI of Tumblr Rooms:
I wanted to put make sure the visual language still emulated the existing style and pulled from the colors of Tumblr.
Lo-fi wire frames of the room and boards took inspiration from platforms such as Pinterest, but evolved into skeuomorphism rooms based on feedback from testing.
The furniture assets were developed as we got into Hi Fi iterations. The designs were created via Illustror and Figma.
My favorite is the egg chair :)
My favorite is the egg chair :)
Hi Fi Iterations
We made users go through our onboarding and test our navigation and UX writing.
Insights from testing
- UX writing has to be more concise and clear
- Onboarding has to be shorter as people’s attention spans are short
- The edit toggle button is confusing
- The actual boards of the room need to be larger (hierarchy)
Call Outs
OnboardingWe realize that Tumblr Rooms is a new way of interacting with Tumblr, so the onboarding is in place to make sure users have a quick tutorial on how to customize their room, access their boards and collections, and know how to edit their room.