A modular redesign that brought Users back into the experience.
I redesigned the Mobii app to reimagine our offer-catching app. I wanted the User to be drawn back into the experience, to date brands so we could find their One.
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.
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.
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.
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.
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.
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.
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.
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.