Design Teardown

Redesigning the way you interact with content

View all posts

All designers have unique challenges they face for each project they work on. These challenges vary based on the specific needs and environment of the product.

As Lead Product Designer for myWebRoom, the difficulty of creating a type of platform that isn’t very common in the marketplace is one that I’ve grown to be familiar with. As the website developed and changed significantly over the past 2 years, I immersed myself in the fields of visual bookmarking and content discovery in order to help myWebRoom grow in a way that makes the experience better for our users.

The core functionality of our product is visual bookmarking. There are other complementary tools on our site, which makes the service unique and fun. When I designed updates for these various tools, I made sure to keep the core functionality intact.

“When designing updates, make sure you’re keeping the core functionality intact.”

In this release, we focused on improving our visual bookmarking service as a whole. It’s important to note the particular challenges I faced when developing this service to an audience that may not be familiar with the visual nature of it.

Eventually, we hope to build a social community of roommates where you can visit rooms to see what another user has created

Eventually, we hope to build a social community of roommates where you can visit rooms to see what another user has created.

I tested out so many bookmarking and content discovery websites while doing my research and found that each one had something missing that I felt would be ideal for consumers. Some of the apps out there are great for finding new content, but they’re not so great at helping you search and organize your own stuff. Other tools are perfect for this—except they lack the ability to let users discover new sites.

The bridge between the design and functionality of every tool that I’ve found has left me (and a lot of other people) wanting more. So we set out to make a bookmarking platform for people who wanted an all-in-one experience.

Initial bookmarking wireframe

Initial bookmarking wireframe.

Live for about 2 years, myWebRoom has always focused on being visually engaging. It’s a bookmarking platform at its core, and all of the objects in the room are tied to the varied categories of bookmarked sites. We set it up to be intuitive: users access their favorite movies and video sites from the TV, read blogs and magazines in their bookshelf, view their favorite photo sharing sites from the camera, and so on.

To make it more personal, users can design the room however they want using real-world products. The goal is to have users experience every feature from within the main virtual room.

An example of using a real product in our Creative Room — it also acts as a portal to discovering and managing content

An example of using a real product in our Creative Room — it also acts as a portal to discovering and managing content.

While keeping an eye on how we can tie everything together as a social experience, we developed a series of updates to the site to help make it more engaging.

The shop helped fuel the customization of the room for our users with a clean, easy-to-navigate design. We improved the design tool in the room to make it fun and easy to interact with and share rooms with friends. All the while, we improved on the social pane in the room to make it easier for people to interact with each other and move between rooms with ease.

Then it was time to re-address the bookmarking capabilities. Navigation within the product was tricky, given its 3D nature and independent features of the site’s functionality. This is where we’re at now.

Using the toolbar to keep the core experience intact

The important thing is to let people experience all of the features from within the room. The heavily customizable interface and varied tools meant that I need to keep users in the myWebRoom experience no matter where they are on the site. A person’s room is his or her portal to the internet.

“Use toolbars to maintain consistency throughout a website.”

Incorporating a bookmarking interface is an obvious challenge here due to the fact that websites aren’t in any way similar to the 3D environment of our rooms. In order to maintain consistency, the toolbar was an obvious anchor for this—it’d be the consistent factor across the whole site. Previously, the toolbar was more of a transparent window back into your room. I felt that it created too obvious of a border between the environments, and the toolbar was too easily lost in the business of the room.

Old toolbar and old bookmark interfaces had disparate appearances

Old toolbar and old bookmark interfaces had disparate appearances.

Old toolbars were inconsistent across the site; not providing clear anchoring and branding

Old toolbars were inconsistent across the site; not providing clear anchoring and branding.

With the new interface, we gave the top toolbar a more solid background, and we related the rest of the bookmark experience to the toolbar but kept it at a lower opacity so that users could still feel like they’re in their rooms.

New toolbar for our new bookmarking interface which will be consistent site-wide

New toolbar for our new bookmarking interface which will be consistent site-wide.

Our left menu’s translucency also fulfills its navigational purpose while still keeping you in the room experience.

Discover and save content quickly

We wanted myWebRoom to not just be a place where you can store your favorite content, but also where you can find interesting new websites inside of the same experience. When it comes to discovery tools, we have found that it’s important to let users experience the content they discover in a natural way.

Initial user journey mappings to understand our users’ journeys and potentially fix any negative emotions during a session on our site

Initial user journey mappings to understand our users’ journeys and potentially fix any negative emotions during a session on our site.

“Let users experience the content they discover in a natural way.”

We developed our own style of “content cards” that support different actions depending on the user’s actions. I’ve taken note from design trends that cards are quickly becoming the future of the web. For myWebRoom, cards are an ideal medium for telling short stories before visiting sites, and they’re also a quick way for users to save links with titles that interest them for reading later. Essentially, bookmarking is the default “mode” of the interface and the discovery aspect of the site is all from the angle of suggesting sites to bookmark.

Examples of the different states of content cards

Examples of the different states of content cards.

A neat little hover effect invites people to interact with the content cards. Media like videos and music can be played right from these cards, so folks can choose to experience them from within the discovery area. Even if they click on the card to open it up within the bookmarking interface, they’re still kept in the overall experience with the toolbar anchors.

“Cards are quickly becoming the future of the web.”

The websites all open within the interface, but users are still given related content on the side menu, which can be minimized to allow for more browsing space.

A lot can be experienced from the bookmarking interface, but I still needed to bring it all home for the user once they save content.

Keeping it clean to optimize for user customization

When we started designing the new interface, we knew that we wanted to streamline the old version. So our first step was to cut the fat and clean up the look.

Old user flow — we wanted to do too much

Old user flow — we wanted to do too much.

Final user flow

Final user flow.

As a means to reduce the navigation overhead between learning about content and browsing sites, we included the title and option to save sites in the cards themselves. We reserved the real estate on the left menu for more important and relevant material like suggested content, folders, and other saved links. This allows people to easily navigate to any destination within 1 or 2 clicks.

Old interface

Old interface.

Our old bookmark interface used to display an image icon for the website and a description in a left sidebar after clicking on a piece of content. This was hardly an ideal user flow as it caused user annoyance if someone wished to navigate back to the “Discover” interface, or if content wasn’t to their liking. In our update, users get a clearer glimpse of content before opening the site. They can also save it with just a click from the main interface and not lose their footing.

New interface

New interface.

Now, opening a site pulls relevant content in the left menu, allowing users to easily toggle between different desired destinations.

Giving users the ability to add their own notes to content cards is also an important part of the new update. It’s important to collect data to find out how people are using your product—otherwise you just won’t know. In our case, as a content organization platform, the data we collected informed us that people are using our bookmarking tool as a way to manage various projects.

Often, people save bookmarks for different personal reasons and need to remember why they saved it. For example, maybe I saved a design site because a design element on it impressed me. With the new interface, I can easily add a note to remind myself why I saved the site.

“Collect data to find out how people are using your product—otherwise you just won’t know.”

While we wanted to keep everything clean and simple, we also wanted to give people the opportunity to add as many folders as they want and rename them however they please.

Some people like it messy!

Some people like it messy!

I, along with co-founder John Gonzalez, have painstakingly focused on streamlining myWebRoom’s bookmarking functionality in a world where personal customization is king. This overall goal is what the founders originally set out to accomplish: to make sense of the constant deluge of online content by creating a bookmarking platform that’s more than just a tool or an extension.

It’s always important to keep in mind that this is an ongoing process. And while these changes to myWebRoom’s platform bring it in line with the expectations of the people in the marketplace, the tool is by no means complete. We’re excited to watch how users might interact with our product in the future.

“As users’ needs change, so should your product’s features.”

Next, we’ll be collecting feedback and modifying things as we proceed in order to hit that sweet spot for all of our users. As with anything UX, these changes will involve further testing and iterations.

Looking forward, there’s so much more we want to do with this in-room experience paradigm. Allowing people to utilize the social facets of myWebRoom to share their favorite content is something that we’re heavily looking into. As users’ needs change, so should your product’s features. And that’s just what we’re going to do with our bookmarking features and overall design.

For me as a designer, the framework of the room provides an interesting challenge when incorporating functionality, but it also presents itself as an ideal way to keep the experience inherently visual. It’s my hope that our efforts have created a product that’s not just useful, but really fun to use.

CTA for those not in hs to DO UI kit
Author

Ling Lim, Head of User Experience at myWebRoom
Ling Lim graduated with a Master's in Architecture and practiced as an architectural designer in Singapore. She is now Head of User Experience at myWebRoom. She actively mentors junior designers in the Bay Area and also contributes articles regularly to web design publications like Web Designer Depot and UX Booth. When Ling isn't solving design problems, she enjoys powerlifting and having new experiences.

Join over 2 million designers

Who get our content first.

No sales pitches, no games, and one-click unsubscribe.

Over 2 million designers
get our newsletter
every week

Find out why

Get awesome design content in your inbox every week

Just like over 2 million of your fellow designers do.

Plus get 3 free downloads, just for signing up.

Give it a try—it only takes a click to unsubscribe.

Thanks for signing up!

You should have a thank you gift in your inbox now—and you'll hear from us again soon!

Prototype better experiences with InVision

Just like over 2 million of your fellow designers do.

I agree to InVision's Terms of Service.

Want a free t-shirt?

Join the 2 million+ designers who get our newsletter weekly for your chance to win!

We hate spam as much as you do, and you can unsubscribe anytime.

Double your chances to win!

Tweet and automatically get a second entry

Tweet Now

No Thanks

Stay in touch!

We share news, freebies, and more on Twitter.