Hero image

Overview

Metaps is an app monetization platform focused on how to maximize revenue and optimize campaign performance. This was an on-going project over about 16 months which was split into two parts

  1. Design and implement modular components for the preexisting dashboard
  2. Redesign the landing page

In this case study I will only discuss the dashboard funnel and segment analytics tools.

Ideation

Kickoff meetings were held with a product manager to figure out the goals, scope, and constraints of each project. These meetings were conducted around a whiteboard, followed up with a round of discussion and, more importantly, a comprehension check of each other’s ideas. After that, I used mind mapping to uncover and explore possible solutions. For research, benchmarking the competition and testing out current solutions in the market helped solve some key decisions regarding the user journey. In the example, I created user flows for a funnel to track dropoff and conversion rates.

Ideation user flow

Iteration

To achieve quick results, I used Keynote and then, later on, InVision to prototype wireframes into a clickable user experience. Allowing the team to play through the experience and leave comments proved invaluable to quickly iterate on designs. In the example, I use rapid wireframing to test a user flow for saving out a segment.

Once the user flows and UI had been signed off, I used Sketch to create high fidelity mocks and surface any concerns about integration with the existing UI style guide. This process was repeated for other modular dashboard components.

Implementation

The initial stage leveraged the Foundation framework and Rails asset pipeline to build out static views. Once the layout and sizing were pixel perfect, the focus turned to integrating the motion and how each action would link to the next task. Although the user flows were tested in the prototype, implementing animations and responders in the UI with jQuery were important for user experience.

Retrospective

Although this product was in its initial stages of development, having more user data prior to the ideation phase would have solved some early decision making.

Landing page on mobile

Visit

The landing page was rebranded under www.metaps.com as of June 2015. The dashboard can only be accessed with a user account.