this portfolio is designed chronologically to showcase my life changes, achievements and experience as one seamless journey. 

Redesigning the way you interact with content

Also published on Invision Blog.

All designers have unique challenges that 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 is not very common in the marketplace is one that I have grown to be familiar with. As the website developed and changed significantly over the past two 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 kept a careful eye on keeping the core functionality intact. In this release, we focused on improving our visual bookmarking service as a whole. It is 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 are not 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 have found has left me (and a lot of other people) wanting more. Intrinsically, we wanted to make a bookmarking platform for people who wanted a more all-in-one experience.

myWebRoom has been live for about 2 years and has always had a focus on being visually engaging. It is 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 and 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 are 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 would 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, 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 are 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 is important to let users experience the content that 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

We developed “content cards,” which supports different actions depending on user’s actions. I have taken note from design trends that cards are quickly becoming the future of the web. For myWebRoom, they are an ideal medium for telling short stories before visiting sites, and 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.

Screen Shot 2016-04-02 at 1.01.23 PM.png

A neat little hover effect invites users to interact with the content cards. Media like videos and music can be played right from these cards, so users 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 are 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 she saves 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 users to easily navigate to any destination within one or two 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 she wished to navigate back to the “Discover” interface, or if content was not to her liking. In our update, users get a clearer glimpse of content before opening the site; she also can save it with just one click from the main interface and not lose her 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. As a content organization platform, we collected relevant data that informed us that users are using our bookmarking tool as a way to manage various projects. Often times, 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 of why I saved the site.

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

In the end, people should be able to keep their room on myWebRoom as cluttered or as tidy as they want — much like their own rooms or desktops at home.

 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 is more than just a tool or an extension.

It is 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 completed. We are excited to watch how users might interact with our product in the future. Next, we will 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 is 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 are heavily looking into. The design and bookmarking aspects of the site will continue to adapt and change with the needs of our users. 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 is my hope that our efforts have created a product that is useful, but also really fun to use.

Approaching UX Design as an Architect

Fear of having to leave the life I love