Guiding People to Their Data
–April 2018
Popdock
onboarding
and usability
improvements
for increased
conversion
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
Discovery
The Current User Experience
Our research revealed that IT and marketing professionals—the potential users of a product like Popdock—do, in fact, frequently generate data reports for stakeholders. This is often a difficult process of pulling the data from various sources and then having to manually analyze that data.
Pictured above: Current Popdock screens, research synthesizing and ideation, and our persona.
User Testing
In performing our own user tests of the current Popdock interface, we gained some valuable insight as to why users did not continue to engage with the product:
Confusion about the navigation.
Lack of clear visual cues.
Uncertainty about terminology.
Interface did not perform as expected generally.
Design Hypothesis
How to Increase Engagement
We determined that users would need more assistance upon signing in, and along the way, if they were going to understand how to use Popdock and utilize its powerful features.
Welcome page
Connector page
Filter connectors by category drop-down menu
Connectors filtered by social media
View and manage connectors
Home page
Design Priorities
We addressed the following items with our design strategy:
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.
Clean up the visual design so there is clear visual hierarchy and fewer competing elements.
Prototype
Testing a New Design
Using mid-fidelity wireframes, I built a prototype to test our thinking—and see if our design hypothesis was accurate.
What We Learned
Testing the prototype revealed some improvement, but also some issues that still needed work:
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 had been renamed from "Tabs" to "Lists", but it was still not clear what to use this part of the site for.
Final Mockups
Hi-Fidelity Screens
After testing the prototype we strategized how to overcome the difficulties users had experienced with our mid-fidelity prototype. We implemented these revisions in the hi-fidelity mockups.
Visual Design
With the background visual lightened, varying font sizes and weights introduced, reworking some of the icons, and creating some consistency between elements we were able to clean up and simplify the interface, while creating a stronger sense of visual hierarchy in guiding users eyes through the content.
Guiding Users
With a conversational tone we alerted users to the types of tasks that needed to be performed in order to use the product, and provided information about other steps that could be taken to get the most out of Popdock.
Increasing Engagement
With a global navigation added, content to explain various features of the product, a card displaying recent activity on the home page, and using self explanatory terminology we designed the Popdock interface to engage users and eliminate confusion or ambiguity.