Mobii App Redesign and White Label

Mobii 3.0 Redesign

I was tasked to redesign Mobii to reimagine our offer-catching app at ACTV8me due to flagging User interaction and an unsustainable model cost. With variable engineering support at the time, I focused on areas where I could make an impact and leaned on experience; I wanted the User to be drawn back in so I led with interaction.

Design System / Visual Design / UX/UI Design

About

Overview

An interface that connects Users to brands through media.

As the video above by my Creative Director at the time tries to illustrate, Mobii connects users to offers from TV, radio, and nearby locations. I led the redesign and UX overhaul — redesigning the interface with modular components in Sketch, refining the websites I developed to house the second level of content, and smoothing the path from design (Sketch and Zeplin at the time) to final development. The result was an app that became more than a static container for a content feed, it became a tactile experience Users wanted to touch, and a platform brands wanted to partner with which would later crystallize into my first design system.

Tactile / Shippable

Challenge

Improve daily interaction, reduce friction, ship with intent.

Users weren't interacting with the main experience. The app was draining resources and results weren't hitting levels needed to impress partners. We needed a solution that balanced User interactivity, implementation capability and deliver results that partners would note.

Biggest Problem: Content Consumption

Users weren't interacting with our content. We weren't getting numbers that would impress. Why?

Users uninterested in feed: user data showed that very few users actually scrolled through the content and even fewer engaged with it.
Content feed requires too much effort to maintain for results. The feed had a full team developing schedules and content with little return on investment.
The primary User draw (Daily Scratchers) wasn't engaging Users at the level required to justify investment.

Mobii v2 featuring a content feed that was received poorly by Users.

My Solution #1: Activity-Based Sections

I thought of a conversationally-driven design illustrated through animation, message and typography that would respond to Trigger senses through the interface. Audio, geofences and even a layer of alternate reality (I'd later prototype this) would affect the main interface or "Home World" as I called it.

It didn't get beyond prototype.

Exploration

My Solution #2: Content Cards

This was my all-in on the tactile experience which was what I was hoping would get through — have the User date the content and help them find their One. Story here, a huge part of the inspiration to explore this was from a conversation with one of our developers,

The concept went forward.

AMC themed content cards in the new Sketch template.

Core Enhancements

Main Feed Design

I wanted swipe-able cards that suggested the dating style of the extremely popular Tinder dating app. This would slowly build the User's preference and filter partnership offers into meaningful engagements. Ultimately, we didn't get the swiping exactly as I want, but we found a happy medium in a swipe then tap solution.

A variety of common scratcher designs and edge cases.

Feeling Matters

Card Interaction Ideation

This interaction was a huge, it represented my main concept. To work through the experience, I headed into a meeting with my Creative Director and we discussed the experience where he sketched out some ideas on the primary interaction based on our conversation.

Sketches of my initial interaction ideas by my Creative Director..

Establishing this main interaction was extremely important as it set the tone. Balancing implementation feasibility and imagination was the biggest challenge of this view.

Attention to detail

Login Experience

Old flows, new look.

A brand tightening and application on these utility views would help later with similar types of views such as Settings, Profile and other supportive experiences.

A refined login view with freshly applied branding

Core Experience

Daily Scratchers View

Reimagining a physical experience the highlight feature.

I really wanted the experience to feel absolutely tactile, elicit a "wow - niiice." - like the company slogan of "activating the world around you" — I thought that it should happen in the digital world as well. It should feel as part of the physical world as possible (in preparation for the next phase of augmented reality). To achieve this I ensured that the development implementation captured the weight of the cards and provided a bit of resistance on the scratching experience.

A refreshed and redesigned Daily Scratchers experiences.

I also designed and developed a more interactive, almost game-like experience with the ability to create interplay between the scratcher overlay layer and the content below. It wasn't widely adopted and excitement didn't catch on. It did require an extra level of craftsmanship that didn't strike passion.

Saving Content

Detection Drawer

Persistently keeping content relevant.

Freshly discovered content is stored in a Wallet View. I updated the design it to just feel good. I increased spacing so content and brands could breathe clearly, delicate typography to call User attention to the right spot — the value proposition of the content.

Content Action

Redemption Flow

Materializing value from the digital to the physical.

I made buttons juicier, the time countdown heavier and marketing jargon toned down. I wanted a light sprinkle of the offer to hit the User, then a clarion call to action. Get, view, act - viscerally.

The updated redemption flow with clear calls to action and reduced marketing jargon.

Painting Patterns

Variable Mapping

Setting the foundation for a white label app.

I had been reading a lot about Atomic Design and design systems, and I wanted to create a white label app platform that we could use to quickly deploy for clients at any stage: early business exploration, prototypes for demos, and even production. I recorded a short video of myself applying these variables demonstrating how it could completely paint a product very quickly in the brand during my first successful application of it with our GSTV client (which led to big things, including validation of my design system with the dashboard). Coupled with packaged feature components, we could be fed a brand's style guide and business requirements and turn around with a fresh app in a day.

Updates all around

Deliverables

A connected system across user and partner touchpoints.

All the things:

Mobii App design system (successful for business relationship of our GSTV client)
Version 3.0 was deloployed during our partnership with AMC
Partner-ready white label architecture
Modular, themed components setup in Sketch for the content team
Dashboard UX refinements to play well
Dev-aligned specs and handoff system in Zeplin
Interactive prototypes for core flows in InVision Studio

This version of the app was deployed during our partnership with AMC.

Contact Me

Want to make an app too? Let's make it together.

Use my form, send me an email at hello@johnhansen.design or schedule a call.

Your submission has been received!

Something went wrong. Try again.