2022Mobile AppDesign System

MyFrontier App Redesign

Redesigning Frontier’s customer app around everyday account management and self-service.

Client: Frontier
Role: Designer
Agency: Razorfish
Year: 2022
Scope: Mobile app design
Motion: launch, prompt, confirmation, and loading animations

The problem

Frontier’s brief was to improve customer satisfaction and retention, reduce support calls and bring its new brand into the app. Research found that customers struggled with routine tasks, scattered help and confusing labels.

The decision

We organized Home and navigation around bills, payments, account settings and support so customers could find and complete routine tasks in the app. We used consistent layouts and controls across those screens.

My contribution

I designed screens and interactions for billing, account management and support, applying Frontier’s new brand across those parts of the app.

Home screen before and after

The original Home already included billing alongside network status and account tools. The redesign changes their hierarchy, adds a personalized greeting, and replaces the stacked account tools with bottom navigation. The body shows handoff designs; the hero uses a separate screen set and sample account content.

Before: original Frontier app Home with network status and account tools — Original and redesigned Home: a different hierarchy for existing account tasks, with bottom navigation and a personalized greeting.

After: redesigned Frontier app Home with a personalized greeting and payment summary — Original and redesigned Home: a different hierarchy for existing account tasks, with bottom navigation and a personalized greeting.

Billing, support, and appointment scheduling

The redesign launched as version 4.0.1 on November 21, 2022. Billing shows the balance, payment action and Auto Pay options. Support groups help topics and service orders, with date and time selection for appointments.

My billing: a $480.88 credit balance, Auto Pay enrollment and Make a payment action — Billing handoff design: a credit balance, payment action, and Auto Pay enrollment.

Support landing page with help topics, service order status and contact options — Support topics and open tickets, followed by appointment date and time selection.

Schedule appointment: choose a date and time range before continuing — Support topics and open tickets, followed by appointment date and time selection.

Account settings and payment methods

The beta brief flagged a missing path: Manage Billing had no place to add a payment method, so a customer without one had nowhere to start.

The handoff fixed it where customers meet it first. With no saved method, the Auto Pay prompt shows No Payment Method and makes Add Payment Method the main action. Payment methods also moved from My Account into Manage Billing. Beta testing was still flagging the payment-method menu that November, so the final release may differ.

My account screen with contact details, password and security controls, and saved payment methods — Earlier design: saved methods under My Account, and the card-or-bank choice.

Add payment method screen offering credit or debit card and bank account options — Earlier design: saved methods under My Account, and the card-or-bank choice.

Annotated handoff screen: a Set up Auto Pay sheet showing Payment method: No Payment Method, with a red Add Payment Method button and Nevermind below — Handoff design: with no saved method, the Auto Pay prompt leads with Add Payment Method.

Launch, confirmation, and loading animations

I designed and animated these loops. Each marks a moment in the app: launch, the Auto Pay and paperless billing prompts, and a completed installation. The loading sequence appears below.

App launch

Auto Pay prompt

Paperless billing prompt

Installation complete

Loading feedback while a task is in progress.