How do we redesign the hero banner to provide value and occupy less space on the XfinityMobile app?
TL;DR
Visual Design + Rapid 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.
Project Rundown
What I Contributed
High Fidelity Mockups
App Store Research
Usability Testing
Project Length
5 Days
The Team
Marshall Robbins
Emmy Beltré
Nick Freeland
Research Insights
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.
Our Design
Zero States
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.
Call to Actions (Left Side)
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 (Right Side)
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.
Benefits to Our Design
Showing Multiple Alerts
With a smaller banner, customers can now view up to two of the most important action items at a time.
Less Real Estate Used
Taking up less space not only means seeing more items, but adding clarity and simplicity to the design.
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.
Soft, Welcoming Feel
Although the size of the banner was reduced, we made sure to still include the aspects of what brought a warm and welcoming screen.
Information Priority
XfinityMobile pre-existing priority rankings can now be utilized for multiple slots instead of a singular slot.
Including Call to Actions
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 Considerations We Highlighted
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.
"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 states—the 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.