rogers_2015_logo_detail.png

‘MYROGERS’ MOBILE APP

Redesigned and enhanced functionality for an existing mobile app - natively for both Android and iOS versions.


IMG_1053.JPG
IMG_1059.JPG
IMG_1060.JPG

ABOUT THIS PROJECT

  1. 🌟 My role: UX/UI Design Lead, 8 month project that focused on ‘MyRogers’ Mobile app (native Android & iOS) used by 1 million users in Canada. Managed design consistency on both devices, referred the Android & iOS guidelines.

  2. 👥 Worked with stakeholders: Product Owner, Visual Designer (junior), Accessibility specialist, Business leads, Data Analytics team, Lead Developers (iOS & Android), Quality Assurance and Marketing team.

  3. 🧠 Technical: React UI components, Worked with technical team to discuss the Level of effort required.

  4. ✂️ Tools: Sketch, AxureRP, Photoshop, Zeplin, Invision.


HOW WAS SUCCESS MEASURED?

By setting clear goals.

Goal #1 MINIMAL LOGIN EFFORT: The new app will have both pre-authentication and post-authentication mode. This will be an upgrade from the existing state, as the existing Rogers app only focuses on post-login experience. Users can access most functions in device mode until they need to access credential required functions, eg. account level changes.

Goal #2: CLEAR VISUAL HIERARCHY: The new app will be mainly structured by lines, following new device mode concept, while the existing Rogers app and Rogers.com organize contents per accounts. 

Goal #3: MULTI-ACCOUNT LOG-IN: After listening to customers during user testing sessions, we realized that customers are frustrated with signing in a out of apps if they have multiple accounts. Hence we came up with multi-login.


DESIGN WORKSHOPS & TEAM COLLABORATION

Prioritizing and visualizing the user flow diagram, discussing stories assigned to me with Product Owner in detail

IMG_1055.JPG
IMG_9285.jpg
IMG_1057.JPG
IMG_9294.jpg
IMG_9328.jpg

INFORMATION ARCHITECTURE

Top level view of the structure and flow of the mobile app - This involved arranging information in a way that is easy to find, easy to navigate through and scalable as the app grows (once we add new features to it).

information_architecure.png

USER FLOW & CONDITIONAL LOGIC

Quick and dirty low-fidelity wireframes created on Axure RP to visualize the user flow when used on a mobile device.

high_level_app_flow__device_mode_.png

LOW FIDELITY WIREFRAMES

Billing was an important reason why a user would come to this app. Hence we spent quite some time sketching out and discussing billing tab scenarios. Questions I asked users while designing “How easy it to find the bill page, when you land here and are thinking of making a payment, is there any hesitation in your mind? If so, what are thoughts that occur to you? Do you usually check if the billing details are accurate and go back into the data usage section?


STYLE GUIDE

Logo, typography, colours, buttons, input fields, padding. Also used Zeplin (a tool to handoff designs and style elements with accurate specs, assets, code snippets automatically to developers.

Rogers-Genesis-Typography-Styleguide24.png
Rogers-Genesis-Typography-Styleguide23.png
Rogers-Genesis-Typography-Styleguide25.png
Rogers-Genesis-Typography-Styleguide211.png
Rogers-Genesis-Typography-Styleguide210.png

Deliberately shown only low resolution images as it is company work.


HIGH FIDELITY WIREFRAMES

High fidelity wireframes specifically for on-boarding a user for the first time (I am limited to displaying only these due to confidentiality).

Onboarding 1@2x.png
Onboarding 2@2x.png
Onboarding 3@2x.png
Onboarding 3@2x.png
Onboarding 4@2x.png
Onboarding 5@2x.png

Thanks for being so curious! :)

I've added more design work from Scotiabank, Deloitte and TD...

Back to top Next Project