Snapshot

The Disconnect
Popdock is a powerful data aggregating platform allowing users the ability to view all of the data from their cloud services through one source. Most users signing up for the trial plan do not use—or know how to use—the product and miss out on the exceptional value Popdock can provide them.

Helping Users Find the Value
By designing a clear visual hierarchy, global navigation, helpful modals providing user guidance, and improved clarity in the content, we worked towards a solution that would help users understand the capability and usefulness of the platform—while giving them easy access to their data and the insights contained within.

Project Type
Team project with three people including myself

My Role
Research, ideation and synthesizing, mid-fidelity wireframes, and prototyping

Timeframe
Three weeks

Research and Discovery

Allowing users to view all their data in various ways through one location, Popdock is a powerful platform that would be helpful to marketing directors, IT professionals, and small business owners—among others. My UX design team was approached by Popdock to see what could be done to improve the initial engagement of users, and conversion to regular use of the product.

I began contacting people to interview who were either in marketing or IT professions. After interviewing two of these individuals, I learned that collecting data from cloud platforms, and the need to present it to various stakeholders is indeed a difficult and time-consuming challenge. Having a tool that could pull all the data together and allow a user to see how one data set affects another would be very valuable.

After Popdock provided us with some of their own user feedback, we decided to conduct usability tests of our own, to see what we could learn about the onboarding process in the current product. One of my teammates worked up a discussion guide and tasks, and then proceeded to observe and interview several users who tried it out for the first time.

The user tests provided us with some very helpful feedback. We started to get a good idea as to why people were not motivated to move beyond the initial sign-up process. Using the statements, thoughts, and frustrations expressed in the user testing we went through the exercise of working out an affinity map. From this we could see that the current product created some confusion between a lack of visual cues, uncertainty about wording, and the interface not performing as expected.

We also employed a mind map exercise to help us better understand what the functions in Popdock were intended for, and where the disconnect was for users. It shows our thinking as we broke apart the existing product out by categories to determine what functionality was intended versus what users were experiencing .

After creating affinity and mind maps we decided to perform an exercise where we would each quickly sketch up rough wireframes—in a short allotted timeframe—to quickly brainstorm ideas. After doing this we each presented these concepts to each other and discussed strengths and weaknesses of each. This process helped us get into agreement for how to approach wireframing and prototyping.

Design Hypothesis

Based on our research and ideation, we decided the new interface would need a more clear and distinct global navigation, as the navigation in the current interface was ambiguous. We would also explore changing some of the terminology for the navigation as users had expressed uncertainty about the meaning behind some labels. For the terminology that needed to stay, we would find a way to explain those better.

We debated about whether or not to employ a “wizard”, “coach marks”, or simply find a way to naturally guide users through the process with a more effective design. We decided that a better design would be preferable and if the user testing of our idea still revealed problems, we would revisit the conversation. Our goal would be to design something that would work intuitively without the need for a lot of explanation.

In summary, we decided to address the following items with our design approach:

• Design global navigation to prevent users from getting lost
• Provide directions for users to navigate more effectively with the interface
• Use alternative terminology to help users with understanding content

Mid-fidelity Wireframes

I proceeded to layout the majority of the mid-fidelity wireframes using Sketch. One of my teammates also provided some of these wireframes including the welcome, and data lists screens. Once we had produced all the necessary screens I created a prototype for the team to review. After receiving feedback from the other team members, I made a few changes and updated the prototype for user testing.

Having a connector activated is the only way a user can view any of their data in Popdock, so we decided to redesign the welcome page (which appears after the initial account sign-up) so that adding a connector would be the most obvious and immediate choice to make.

We wanted to clean up the connector screen by eliminating competing visuals and using consistent sizing for each connector option.

We moved the "view by category" navigation to the top of the screen as a drop-down mega menu.

Once a user had selected a category, viewing would be simplified to just a few options, making it easier to find specific connectors.

This screen did not change much, with the exception of moving the "Add Connector" option to a more prominent location, accompanied by a larger icon to call attention to it.

We reworked the homepage to emphasize "Connectors", "Lists" (changed from "Tabs"), and "Insights". Adding short explanatory language, along with recent updates, was added to engage and educate users on the purpose for each of the three options. We also created a global navigation—in the upper left hand corner—so that users could navigate the site easier.

Testing the Prototype

Next, we tested the prototype with users to see if the global navigation, added explanations, and alternative terminology would improve the experience. We also wanted to see if people would better understand the first steps to take after signing up for an account. Users would be asked to:

• Set up their first connector
• Find and view the home page
• Set up another connector (this time sorting the options by category)
• After viewing the home page again, they would view some of their raw data on the "Lists" screen.

Testing the prototype revealed some improvement, as well as other issues that needed refining:

• It was clear that setting up a connector was the first, and most important, way to get started using the product.
• It was still not clear what actions could be taken after setting up a connector.
• The initial connector landing page was still overwhelming with the number of options available.
• The part of the interface displaying raw data and been renamed from "Tabs" to "Lists", but it was still not clear what to use this part of the site for.

Hi-Fidelity Mockups

As a team, we discussed the best course of action to take to address the usability issues discovered during user testing. One of my teammates took this input and made the needed changes while creating the hi-fidelity mockups.

We added a little more text on the welcome page to explain how best to use the Popdock product. The background illustration was lightened significantly so as to not compete with the important content in the foreground.

Instead of hiding the various connector categories in a drop-down mega menu, the categories were consolidated and placed as a secondary navigation to the left. This limited the number of connectors that would be seen at once, and removed the additional interaction required to view the categories.

Once a user had connected a stream of cloud data, we wanted to walk them through the most obvious next potential steps. Viewing "Data Lists" would show them the data that had just been connected. Or, they could be directed to add another connector.

If a user happened to land on the home page, without first having established any connectors, an alert was created to notify them of the need to make a connection before being able to use the product.

The home page emphasized—even more so than the mid-fidelity prototype—the three primary tools to be used in the product: "Connectors", "Data Lists" (changed from just "Lists"), and "Insights". Along with a "Recent Activity" card, designed to engage users, more text was added to explain the purpose of each tool.

The "Data Lists" screen is where users would view the raw data from their individual cloud services.

Hi-Fidelity Prototype

Once the hi-fidelity mockups were completed, I built another prototype to demonstrate the changes we had implemented, both visually and in functionality. This was based on all the user testing of the current product and of our mid-fidelity prototype.

While we did not have time to run a second round of user testing with the hi-fidelity prototype, I believe that our solutions were a definite improvement. By employing a global navigation, guiding users along with better explanations, changing some of the terminology, and cleaning up the visuals, we designed a simpler and easier to understand experience for users—getting them closer to their data.

What I Learned

The Popdock website is a great product with powerful functionality. It is also complex and was, at times, difficult for me to wrap my head around. In retrospect, if I took on a project like this in the future, I would want a better understanding of the technical limitations that would govern my design choices.

After presenting our solution to the client, it became clear that some of the ideas would not be technically feasible. That being said, if we had understood those limitations better, I believe strongly that most of our concepts could have been worked out within the constraints of those parameters.

Providing users an intuitive alternative for sharing content.