Mobii App
Mobii is an iOS and Android app designed to enhance user interaction with brands and advertisers, creating engaging connections across TV, radio, streaming, and location-based content. The app activates exclusive deals, coupons, and entertainment, delivering value to both consumers and providers through meaningful and rewarding experiences. As the flagship product at ACTV8me, Mobii partnered with AMC, GSTV, Live Nation, Univision, and more, bridging the gap between users and brands.
Design System, UX/UI, Visual Design, and Web Development
Abstract - Bootstrap - ZURB Foundation - GitHub - HTML/CSS - Illustrator - InVision - Jira - React - Sketch - Photoshop
Competitve Analysis
A competitive analysis the team had provided as an overview of the features available through the Mobii app in the market. Although there was some overlap with competitors, Mobii had clear advantages in certain areas. Understanding our position helped the me prioritize efforts and focus my tasks effectively.
High-level feature comparison
User flow of the initial and most basic instance of Mobii
User Flows
User flows served as high-level guides throughout my design process. They helped me create requirements and break them down into actionable tasks in sets, allowing me to think in patterns.
Foundations
ACTV8me moved quickly, causing style drift in the Mobii app due to constant updates. To address this, I created a basic style guide consolidating many fragmented ones and shared it with the teams to establish a common visual language. This became essential as we began designing white-labeled solutions, ensuring consistency in initial styles. Even a simple deviation of styles elements could quickly multiply across applications, leading to significant design debt which I was determined to reduce.
Primitives that would eventually be used in white label solutions
When the app is listening this video sends targeted content to it (video featuring my UI design produced by the Creative Director)
Intro Video
This video aimed to simplify Mobii's concept through demonstration. When the app listens and the video plays, it triggers content to be sent to the user, filtered based on targeting from a dashboard I redesigned. Combined with business outreach, it effectively showcased the technology's potential for users.
Onboarding
During onboarding, I ensured users were informed about key Mobii features when I was tasked with redesigning the application. Major features included Auto Mode, Daily Scratchers, and the Digital Wallet.
Onboarding to educate the user on feature overviews
Tooltips help new users understand the basics so they can start doing what matters most - interacting with Mobii
Animated splash icon (final animation produced by the Creative Director)
Splash Icon
To set the tone for the new design of Mobii and establish new expectations for collaboration between teams, we created a new loading animation. Simple in concept, it represents the positive relationship between users, businesses, and content, as well as the teams that facilitate this relationship.
Daily Scratchers
This feature gives users free digital scratchers daily, offering a chance to win prizes, offers, and special content tailored to their interests. As users engage with the app scratcher content, this feature helps fine-tune interests, enhancing relevance and interaction quality through use. I redesigned it to feel like cards, reminiscent of an actual physical scratcher (tactile) and modern dating apps (relationship with brands).
Final animation produced by the ACTV8me Creative Director
Digital content served in the form of Daily Scratchers helped maintain user interaction particularly during points of low external support
Focus Group
The team used focus groups to gather insights into user needs, refine features, and improve the overall user experience of the platform. The recordings of these sessions provided valuable user feedback for me when I was tasked with redesigning the Mobii application and associated websites.
CBS focus group testing of the Mobii app
Promotions and Digital Wallet
Promotion cards were a key format for delivering content to users. If users chose to keep an offer after the initial delivery, it was stored in their digital wallet for redemption. Options for redemption varied based on settings specified by content creators, including online, in-store, or both. I redesigned to reflect more modern design trends at the time than the previous version.
Offer type variations and wallet user interface designs of the new design of Mobii I was tasked with
The Mobii Live show featuring the hilarious Jenifer Golden and Lauren Leonelli
Mobii Live Show
The creative team produced a show featuring activities and interactive segments with Mobii, giving users scheduled interaction periods with the app alongside hosts Jen and Lauren. This format allowed us to deliver offers that benefited both partners and users through. During the show, triggers activated at specific points to send content I designed to the app for user interaction, often with associated website I designed and developed. To enhance engagement, I moderated and participated a live chat during every week during the show, which I found enjoyable and allowed me to gather valuable user feedback directly from users.
Content Cards - Home
These cards greeted users on the main view, offering an immediate way to interact with content and showcase key elements like current partnerships. Graphics, content, and actions were easily managed through a dashboard I redesigned (and then designed as a white label solution for partners), enabling us to present information quickly and effectively.
Templated content cards provide fresh offers and relevant deals
Dashboard Content Creation
This interface allowed for rapid content creation and editing, with changes reflected in the application almost instantly. This flexibility enabled direct editing of all content types, benefiting our agile team managing multiple operations. I also collected valuable feedback about issues and interface workarounds from the content team during the design process.
Content preview component accompanies data input to help ensure intent
I created templates in Sketch to help quickly go from design to code
Micro-Sites and Templates
To enable quick app content turnaround, I designed and developed many micro-sites optimized for mobile viewing. Wrapped within the application, these sites provided a native-like experience while retaining the flexibility of the web, allowing me to introduce new app content rapidly.
Campaign Content Theming
To ensure continuous market saturation for Mobii, our team formed significant partnerships. The diversity of these partnerships and their unique branding needs prompted me to develop a method for theming content with key branding elements.
Mobii and Sandra Lee (one of my favorite visitors to the office)
A simple tool to help with team communication
Dev and QA Tool
As Mobii evolved to include various environmental constraints, reporting issues and QA became more complex. To streamline this, I collaborated with the development team to create a simple yet effective tool for surfacing essential Q information. This tool was invaluable for implementing new features and ensuring design-to-development fidelity.
White Label
A key aspect while I was at ACTV8me was the software development kit (SDK), which we packaged for partner integration into their applications. I collaborated with developers to create an updated documentation website and design files for a customizable white-label app and dashboard.
The GSTV app with a set of applied design variables
A documentation site built with Vue.js that was easily editable using Markdown
Documentation Site
Initially, my role was focused on styling and updating the documentation site in Angular and converting provided Android and iOS developer code with Doxygen. However, as the product's content needs evolved, team changes, and a requirement for more versatile editing capabilities, I designed and developed a web solution that allowed for relatively easy updates by the content, developer and design teams.
General Takeaway
Working on this product and associated deliverables across various levels and teams expanded my strategic design and product thinking. I became attuned to the overall system, allowing team capabilities and business priorities to help guide my design decisions. I considered how each design aspect impacted engineering, content, and business, optimizing for the best outcomes with the resources I had available. Helping others during this product redesign also stoked my passion for teaching about design.