Menu
UXCam enables product teams to improve the end-user experience of their mobile applications by recording, analyzing, and visualizing user interactions.
In 2014, I worked with UXCam to redesign the analytics dashboard and the marketing website. I produced user flows, wireframes, interactive prototypes, and specifications to inform the visual design and hand off to developers. I also helped to create a product roadmap, including feature prioritization and customer acquisition strategies.
When I started working with the team in 2014, users were running into several issues with the beta product:
The old dashboard experience (2014)
The team needed to fix these issues but also add new features for a growing user base of more experienced developers and product managers. Our ultimate goal was to create a simple yet powerful dashboard experience to help product teams improve the usability of their apps.
The founders came up with the idea for UXCam while working on other apps and conducting a high volume of tests in a usability lab. But the equipment and time needed to gather qualitative data made the process increasingly expensive and inefficient. They decided to create a tool for developers to quickly and easily get end-user experience insights on a large scale. UXCam quickly gained traction, growing into a platform for cross-functional collaboration between developers and product managers.
Success for customers meant a better end-user experience for their apps, with fewer bugs and improved performance in key business metrics (user acquisition, engagement, or retention). The core workflow for success involves 4 steps, summarized by the experience map below:
Customer experience map
I structured the dashboard experience to match this core workflow, beginning with a high-level view of app usage data and transitioning into more granular insights.
User flow with personas
UXcam captures a wide array of data about app users, including front camera and screen recordings, gesture inputs, and geo-location. The dashboard helps product teams make sense of this data with visualizations and intelligent suggestions.
The app overview screen is the starting point for product teams to gain insights on app usage, find and fix usability issues, and share data.
App overview wireframe
The top portion of the screen consists of graphs that show app usage data. I worked with UXCam's founders and developers to determine which metrics and variables are relevant to product teams. These dimensions are grouped under "common graphs", providing quick access to key metrics. Additional dimensions are available for advanced users.
Layout and filtering options for the app overview screen
In the old version of the dashboard, videos lived on a separate tab. After exploring different layouts, I came across the idea of consolidating the video list and the app usage graphs into one screen. The two blocks of information would dynamically update according to filter and search queries. In this manner, users can correlate data shown in the graphs to specific session videos.
How search and filter operations affect the graph and video list
Consolidating the graphs and video list views addressed one of the main issues with the old dashboard (disjointed information across several screens). The combined view also spurred conversation amongst the team about UXCam's product strategy. We were not just creating an analytics dashboard that tracks KPIs, but a tool that leverages specific metrics to gain qualitative insights.
UXCam is a tool that provides a holistic understanding of end-user experience.
Because the UXCam team was distributed across London, San Francisco and Nepal, we needed detailed documentation to keep everyone on the same page. Static wireframes were insufficient to describe complex behaviors, so I created an interactive prototype to show how filters behave and how clicking on data points or x-axis values of the graphs affects the list of videos.
Prototype of app overview screen - search and filtering operations
During development, the founders decided to simplify the overview screen by postponing the "advanced options" functionality for a later release. The new version of the dashboard was launched in early 2015.
New app overview screen. Visual design (2015) by Kijan Maharjan
I designed the video player interface to a provide a versatile viewing experience that embodies the principle, "context is king":
Prototype of session video player
The UXCam team launched the session video player with a few slight changes: metadata is located in a bar at the top along with other common actions; speed settings and "skip idle time" are displayed next to the main player controls; and time markers appear along the the seek bar. These changes ensure that key functions are prominent while secondary information remains unobtrusive.
New session video player. Visual design (2015) by Kijan Maharjan
The app settings page allows users to indicate their preferences for how UXCam should collect data and which sessions to record, while the account settings pages contains options for profile information, billing and notifications.
I grouped related settings into modules so that users can quickly understand all available settings and their current values.
We presented a preview of the new dashboard experience along with a redesigned marketing website to investors at 500 Startups Demo Day in 2014. TechCrunch selected UXCam as 1 of 4 favorite product demos from the event.
The dashboard experience has gone through a few more iterations in the the past few years. In retrospect, I can see where the design and implementation could have been improved. I would make the following changes and validate each with user testing:
© 2017 Uyen Phan
