Redesigning the way you interact with content

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.