Mobii App

Mobii is an application designed to enhance how users interact with their surroundings, deepening connections with brands and advertisers while introducing a new level of engagement. It activates content across television, radio, streaming services, and even geo-spatial locations, delivering deals, coupons, and entertainment. The app focuses on enriching the interaction between consumers and providers, bringing joy and financial benefits to both. While at ACTV8me, Mobii was our flagship product, and we collaborated with partners such as AMC, Diebold Nixdorf, GSTV, Live Nation, Univision, Valassis, and others.

Key Contributions

UX/UI, Visual Design / Web Development

Abstract - Bootstrap - GitHub - HTML/CSS - Illustrator - InVision - Jira - React - Sketch - Photoshop

Research

Competitve Analysis

A competitive analysis of Mobii and its associated technology provided an overview of the features available in the market. Although there was some overlap with competitors, Mobii had clear advantages in certain areas. Understanding our position helped the team prioritize efforts and focus my tasks effectively.

High-level feature comparison

User flow of the initial and most basic instance of Mobii

Design

User Flows

User flows served as high-level guides throughout the design and development process. They helped me create requirements and break them down into actionable tasks.

Design

Visual Foundations

ACTV8me moved quickly, and the Mobii app was constantly updated, leading to style drift. To address this, I created a basic style guide and distributed it to the various teams to establish a common visual language. This became increasingly important as we began developing white-labeled solutions. Consistency in the initial styles was crucial, as even a simple set of styles could quickly multiply across several platforms, leading to significant issues if not properly synchronized.

Foundational styles that will eventually evolve as in the case with

GSTV

When the app is listening this video sends targeted content to it (video by my Creative Director, Armando Orrelana).

Design

Intro Video

This video was intended to distill Mobii's concept for easy consumption through demonstration. With the app listening and this video is playing there is a trigger that will send content to the user. The content received is filtered based on targeting (set by a dashboard) to give a sense of the potential of the technology. When paired with business outreach it was a powerful tool that acutely conveyed what the technology might do for users.

Design

Onboarding

During the onboarding process, we made sure to inform users about the fun ways to use Mobii including Auto Mode, Daily Scratchers, and Digital Wallet.

Views of the Mobii application for Android onboarding experience

A brief tutorial helps new users understand the basics so they can start doing what matters - interacting with Mobii and partners

Animated splash icon - final animation by my Creative Director, Armando Orrelana

Design

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.

Design

Daily Scratchers

This feature gives users free digital scratchers daily, offering a chance to win prizes, offers, and special content tailored to their interests. It refreshes every day and provides additional scratchers through activities like social sharing. As users engage with the app, this feature helps fine-tune content, enhancing relevance and interaction quality.

Animation by my Creative Director, Armando Orellana

Digital content served in the form of Daily Scratchers helped maintain user interaction

UX Research

Focus Group

The team used focus groups to gather insights into user needs, refine features, and improve the overall user experience of the platform. These sessions provided valuable user feedback. I supplemented this with my own informal focus groups and found it interesting to observe the similarities in feedback.

CBS focus group testing of the Mobii app

Design

Content Promotions and the Digital Wallet

Promotion cards were one of the primary formats for delivering offers to users. If users chose to keep an offer beyond the initial delivery, it was stored in their digital wallet, from which they could redeem it. Redemption options varied based on the settings specified by content creators and could include online, in-store, or a choice between the two.

Offer type variations and wallet user interface designs

The Mobii Live show featuring the hilarious Jenifer Golden and Lauren Leonelli of the It's Complicated podcast

Design

Mobii Live Show

We created a show featuring activities and interactive segments with Mobii, providing users with scheduled interaction periods with the app and an entertaining time with Jen and Lauren. This format allowed us to deliver offers that benefited both our partners and users. During the show, triggers activated at specific points sent content to the app, where users could interact with it based on its type. To further engagement, we also hosted a live chat during the show, which I moderated, and found surprisingly enjoyable.

Design

Content Cards - Home

These cards greeted users on the home view, providing an immediate way to interact with content. Graphics, content, and actions could all be easily managed via a dashboard. This setup allowed us to present information promptly and in a controlled manner.

Templated content cards provide fresh offers and relevant deals

Design

Dashboard Content Controls

This interface allowed for the creation and manipulation of content, with edits reflected in the application almost immediately. This capability enabled direct editing of all content types, offering extreme flexibility. Given our nimble team and the frequency of simultaneous operations, this feature was of very useful. I gathered invaluable, albeit informal, feedback from the content team during the design process of this feature.

Content preview component accompanies data input to help ensure intent matches output

Templates for quick design in Sketch to help quickly go from design to code

Design + development

Content Micro-Sites and Templates

To facilitate quick content turnaround, I designed and developed dozens of micro-sites. These sites acted as content containers optimized for mobile viewing and were integrated within the application to provide a native-like experience while maintaining the flexibility of the web. This approach allowed me to introduce new app content seamlessly, without the delays associated with pushing updates.

Design

Campaign Content Theming

One of the requirements for Mobii was to maintain continuous market saturation. To achieve this, the team pursued and successfully partnered with several impressive companies. The diversity of these partnerships and their unique branding requirements led me to develop a method for theming content using a few key branding elements. This approach enabled us to produce content quickly while maintaining brand consistency.

Sandree Lee on TV with the Mobii app shown in front it displaying an offer received

Mobii and Sandra Lee (one of my favorite visitors to the office)

A simple tool to help with QA

Quality Assurance

Dev and QA Tool

As work on Mobii evolved to encompass various interactions with the environment, reporting issues and performing QA became increasingly complex. To reduce friction, I collaborated with the development teams to create a basic yet surprisingly effective tool for surfacing information essential for quality assurance. This tool proved invaluable when implementing new features and ensuring design-to-development fidelity.

Design

White Label

A significant aspect of Mobii wasn't just the app itself, but the core technology—the software development kit (SDK). We packaged this technology for distribution through our SDK, allowing partners to integrate it into their own apps, effectively using it as a wrapper. I collaborated with our product and developer teams to create a documentation website, establish an SDK request process, and design files featuring a white-label app template ready for customization.

GSTV app with applied visual design

The website was editable with markdown affording team contribution

Design + Front-end

Documentation Site

Initially, my role was focused on styling the app documentation site. However, as the product's content needs evolved and required more versatile editing capabilities, I designed and developed a web solution that allowed for easy updates with minimal maintenance.

Reflection

General Takeaway

Working on this product across nearly all levels and teams significantly expanded my design and product thinking. I became highly attuned to the system as a whole, and team capabilities and business priorities started to guide my design decisions. I considered how every aspect of the design impacted engineering, content, and business, optimizing the design to achieve the best outcomes with available resources. Mentoring during this project also sparked my passion for teaching and helping others interested in design.