Tapjoy is one of the world's leading mobile destinations to discover amazing new apps and earn rewards for the apps you love.
As one of Tapjoy's first in-house designers, our goal was to redesign the mobile marketplace to allow users to seamlessly discover apps and gain free in-app currency for their favorite games and applications while increasing revenue for Tapjoy and its publishing and advertising partners.
With a solid underlying technical foundation, Tapjoy was in desperate need of rebranding, including a complete visual overhaul of the Marketplace UI and the overall user experience.
We knew that users were more likely to use a visually-attractive Tapjoy app, but we also needed to make it as simple as possible for user and existing Tapjoy users to easily gain free virtual currencies for their favorite apps. This process also required an optimized experience for discovering new or similar apps to what users are currently using.
Our initial approach to the Tapjoy Marketplace app design was to take the bold, clean logo and color palette created by an outside design firm and create an overarching design aesthetic and UI patterns for Tapjoy's apps. More importantly, our design team needed to overhaul and clearify the user experience of our app through better understanding of our users and mapping out their ideal experience.
I started by gathering as much information as possible from existing departments within the organization. This meant interviewing Product, Engineering, and Marketing to collect as much data on our existing users and the large-scale goals of increasing revenue and number of installs by gaining as many new users as possible while finding ways to retain these users and get them to constantly return to Tapjoy to get free virtual currency for their favorite apps.
Much of the initial data on our users was quantitative, leveraging analytics to figure out where we were experiencing drop-off in users reaching the main call-to-action of downloading a new app and collecting virtual currency. A smarter way for users to find offers for their favorite apps in our marketplace was required, so we began wireframing an improved user experience.
Initial Goals:
The first time experience was key in onboading new users and linking their social media accounts and installed apps to gain insight into the types of offers they might like.
After onboarding users, the Offerwall was the main compenent in need of a redesign, as this is where users can quickly find offers to gain free virtual currency for their favorite apps through an at-a-glace screen that intuitively lets him/her know what offers are most lucrative.
Marketplace Guiding Principles:
After mapping out the new Tapjoy Marketplace user experience, our design team focused on mocking up a new UI with the universal aesthetic we established.
Coordinating across multiple team members, we went screen-by-screen and interated on each UI component. In order to ensure the Tapjoy experience was maintained by each designer, I helped establish guidelines through a styleguide. This document contained everything from typefaces and sizes to button states and icon aesthetics.
After we had the visual design finished for key UI components, the design team coordinated with engineering's front-end team to ensure each screen was pixel-perfect. I learned the technical limitations of both native and mobile web to guarantee that our UI animations for user interactions shared the same feel and fluidity across platforms.
With the Tapjoy design team at full steam, we coordinated with Product Managers to make sure every feature was designed and delivered to engineering.
With only a few months to actualize our vision, GDC (Game Developers Conference) was set as a hard deadline to launch the complete redesign of the Tapjoy Marketplace and bring in new users during that week.
While designing each screen with a cohesive user experience in mind, we tested our designs across responsive desktop, tablet, and mobile web, in addition to native mobile. With responsive and mobile design standards being new at the time, we had often had to A/B test multiple design concepts ourselves by assembling groups of internal users from across departments and skillsets. Engineering was unable to rebuild every prototype we designed, so we often used paper prototypes and print-outs to test new UI patterns.
When every screen had been finished by Design and delivered to Engineering, we prepared over one weekend for a Monday morning GDC launch.
Due to an aggressive GDC deadline, one area for improvement that could have benefited from additional resources was qualitative research. Before the GDC launch, most individual testing was limited and internal, but having our redesign launch during a large event meant we were able to rapidly find pain points in the new user experience and adjust accordingly.
One pain point that very quickly surfaced when we gained new users was our main mobile navigation UI pattern. In 2012, many mobile UI patterns had not been established. Attempting to solve mobile navigation on low resolutions, our team worked with engineering to implement a "waffle"-style navigation pattern similar to the currently widespread hamburger menu. By burying our core navigation in a slide-out menu in the top-left corner of the screen, we woke on launch day to a massive drop-off in users reaching the main Offerwall screen of the Marketplace, which is core in providing users offers and driving Tapjoy's revenue.
I addressed this issue by designing a simpler navigation that was better-suited to users' UI expectations for mobile apps at the time -- a simple line of icons in a mobile navigation bar. These icons allowed users to reach core screens such as Home, Explore, and Settings directly from the main navbar at any time. Especially important was this one-touch interaction to reach Tapjoy's "Explore" screen, where new apps and offers could be discovered based on the user's history and preferences to drive Tapjoy's revenue and get its users to the main action of accepting an offer in return for virtual currency.
