GFiber app re-design

Redesigning the app to represent the brand in a visually appealing interface and create delightful moments for users.

Platform

My Role

Timeline

Mobile

Visual/Brand design & UX

3 months (2024)

des_system_1

The app design did not adequately represent the current GFiber
brand. While other customer touch points like the website have
been recently refreshed, the look and feel of the app had fallen behind.

It was time to take a fresh look at how the GFiber app can have a visually appealing interface that uses imagery and motion to create immersive, delightful moments for users.


Work-Co-Red-Logo-DL

We invited Work&Co to create a vision of the redesign with us. I was actively involved with their design team for critiques and visioning which led to several feedback sessions with GFiber's CEO.

Highlights of the vision created

des_system_22

Home tab - Default feed for day-to-day events or reporting

The default feed components cover use cases like the Network health, billing info and support cards on the Home tab.

des_system_3

Home tab - Takeovers for special moments

Grabbing customers' attention for special moments like First time installation appointment, or a Self install kit getting delivered. Phase 2 plans to use takeovers for upgardes as well. 

des_system_4

Custom card components accomodating all types of communication

The idea of an eyebrow header with a bold title really resonated with the brand teams, and how this card could accomodate photos, illustrations, animations just worked! 

des_system_5

Bold and colorful Home tab scroll to keep customers engaged

The system of cards worked well to highlight different types of communication, with card ranking taking care of the most pressing customer or business needs.

des_system_66

Takeover component to stop and focus

We wanted customers to focus and drive action towards tasks which are important for the business and the customers for them to be able to move forward to the next steps in their customer journey.

Approved-Stamp-Transparent

After the vision was approved, I led the creation of a design system based on M3 with one more designer from our team.

We iterated on the existing M3 Styles and Typography, and added custom components which represented our brand and visual identity.  

Highlights of the new UI library

des_system_type
des_system_color
des_system_7
des_system_8
des_system_8 (1)

We are still constantly working with the dev team on weekly feedback sessions where we make updates to keep enhancing the system. 

Voice and tone updates are part of Phase 3 of this redesign. 
Let me know if you have any more questions. 

Let's work together ðŸ¥‚

Reach out to me at [email protected]