How do we redesign the hero banner to provide value and occupy less space on the XfinityMobile app?

CONTRIBUTION

High-Fidelity Mockups

App Store Research

Usability Testing

LENGTH

5 days

TEAM

Marshall Robbins

Emmy Beltré

Nick Freeland

TL;DR

Visual Design + Mobile App


My team and I were tasked with enhancing the UI for the XfinitiyMobile app. We identified that users care most about issues relating to money (go figure) and that they are more likely to deal with something if it has a CTA button. We then utilized the Sketch design system XfinityMobile provided us to change, update, and enhance all of the possible mobile homepages.

WHAT OUR RESEARCH FOUND

Keep important information above the fold.

Above the fold

According to Nielsen Norman Group, 57% of viewing time occurs above the fold, and 74% of viewing time occurring on the first 2 pages.

Most customers care about data and billing.

Data and Billing

From our survey of 21 people, we found that 85% of users went to the mobile app to check their data usage, while 81% went to check their billing information.

Provide useful information with call to actions.

Call to Action

From the mobile app reviews, our survey, and usability test, we found that people want to know specific information to help them complete tasks.

THE DESIGN

Zero State

When a user has no urgent updates to their account, they will be welcomed by name with a small banner.

ALERTS

When there are notifications that alert the user, a notification banner will display at the top of the mobile screen.

OUR DESIGN EXPLAINED

CALL TO ACTIONS

This is an example of a single alert. Once there is something important that the user needs to know, they will be notified with a call to action prompt.

MULTIPLE ALERTS

If there are more than multiple, important messages that need to be stated, the most important two will be displayed.

CONTENT

In order to better fit the content, we shortened and adjusted the amount of text. We also changed some of the hero banner titles to better alert users. See full documentation PDF for data and positive user feedback.

SIZE

Although standard mobile font size is 16pt, we believe that decreasing the font size will help better highlight the call-to-action button and hero banner title. After testing on users, no issues were brought up concerning the font size.

IMAGERY

To better utilize the space, we created icons out of the original hero banner images. Originally, the images contributed to the majority of the space being used. However, we needed to keep the welcoming feeling the imagery gave. Therefore, we reformatted the images to help keep the welcoming feel while decreasing the amount of space used.

THE BENEFITS

Showing Multiple Alerts

With a smaller banner, customers can now view up to two of the most important action items at a time.

Information Above the Fold

All of the alerts will be shown above the fold which reaches the most users. In addition, when there are no alerts, this will bring the data and billing info up.

Information Priority

XfinityMobile pre-existing priority rankings can now be utilized for multiple slots instead of a singular slot.

Less Real Estate Used

Taking up less space not only means seeing more items, but adding clarity and simplicity to the design.

Warm and Welcome Feeling

Although the size of the banner was reduced, we made sure to still include the aspects of what brought a warm and welcoming screen.

Call to Action Inclusion

Originally, some hero banners did not include call-to-action buttons, so we made sure there was a call to action for each banner, excluding the zero state.

PLATFORM CONSIDERATION

MOBILE

Our team made sure that our design would be able to be used across multiple mobile platforms including both Android and iOS platforms.

WEB

Often when users had problems or concerns with the mobile version, they claimed to go to the web as a secondary source. Because of this, we also made sure to include a web browser platform.

FEEDBACK FROM CLIENTS

“Excellent. I find myself already moving into nitty-gritty UI critique with your designs, which is generally an indicator that stakeholders have accepted your design rationale at face value.

” Well done on accounting for all hero banner statesthe question, Well, what do the other banners look like? ” will inevitably arise, so great job at already considering those.

“Only on slide 5 [referencing the three insights displayed at the beginning of this project], already like what I see. This insight / fact layout is pretty powerful. “

WHAT I LEARNED

Getting trapped in the "Yes, but..." black hole was taxing, frustrating, and disappointing.


There were multiple times where my team agreed we needed to make a decision and move on… but then we wouldn’t. It felt like we were in this constant loop of saying “yes, BUT…” and it was extremely frustrating. Upon reflection, I was able to see what was wrong and some of the exact pinpoints where we should have killed an idea or used the McCarthy Protocols, but didn’t. It is really disappointing and frustrating that I did not see it or think about it, and that I let my frustration blind me from the issues that were happening and how I could go about fixing them. Since then, I have been able to sit down when I am frustrated, analyze the situation, and SAY SOMETHING as soon as I see the team heading into the wrong direction.