Business Solution Banner
Annual Business Impact Expected: $142 million
With the Business Rose Gold launch I designed, I also created 3 business solution banners for testing purposes for the “View All Cards” page. Navigating this page, users can see every Amex business card, key card benefits, applicable fees and welcome offers. Users can also compare up to 3 cards in a more detailed comparison page. From the View All Cards page, users can either hit the “Apply Now” button and begin the application or “Learn More,” which will take them to the product display page.
In addition to designing the whole commercial View All Cards content and compare pages in preparation for the launch of the Business Rose Gold card, one of the key features of the View All Cards page that I focused on was the business solution hero banner at the top of the page.
As the lead designer for the launch of the Business Rose Gold credit card, I was tasked with designing an updated banner to show off the new card, as well as a partner card and card comparison that automatically populates with the Business Platinum, Gold and Blue Cash. The design challenge here is compelling users to engage with the banner’s content and motivate them to click to the next stage of the journey.
To address this challenge, we began with collaborative sessions with product, marketing and research teams where we aligned on project requirements and began to map out end user needs across the acquisition journey. This included designing 3 distinct hero banner versions for user testing across desktop and mobile.
Ensuring accessibility and aligning with brand guidelines set by the marketing team were integral aspects of the design process. Because we were dealing with a tight deadline, I proposed we make design alterations to existing assets to ease development capacity needed. In beginning iterations, I incorporated approved imagery, card art, Amex’s signature flourish and the approved gold gradient to present to the team.
The team agreed on dividing the banner into 3 sections based on marketing insights: the debut of Business Rose Gold, Marriott Bonvoy’s Business Card and a card comparison section. I put together many design options in tabs and a carousel to present to the broader team before we began narrowing down the designs. I recommended to the team that using design elements from the Business Gold product display page hero that I had already designed made the most sense to ensure consistency and brand cohesiveness as we needed to ensure both the view all cards banner and product display page hero fit together from a user standpoint. Some other requirements included card art and specific market approved imagery.
We then decided on the A/B/C test designs, which consist of all 3 featured sections — Business Gold, Business Marriott, and the card compare in varying layouts. Here, the team wanted to decipher which of the 3 design layouts users would interact with most.
The first, the control, was already live on the View All Cards page and uses full length horizontal tabs and smaller images. The second layout is a reworked tab system, splitting the banner in thirds, with a larger image and smaller tabs. The mobile version of this design uses Amex’s Design Language System vertical mobile tabs. This is a new and improved version of the control, which is similar in design but the reworked tabs have a more prominent image and card art, as opposed to a simple image within the tab’s content. This allows for there to be more creativity with the visual elements and utilize both an image and card art, which is important specifically for the debut of the Rose Gold card. The last design being tested is a carousel that rotates among all 3, allowing the focus of each slide to take precedent. Once designs were solidified, I worked closely with the development team to ensure a seamless transition by providing all assets, including card art, imagery and pixel perfect mockups. I worked closely with the engineers through the product launch.
Cell 1 (Control) - Desktop & Tablet
Cell 1 (Control) - Mobile
Cell 2 - Tabs Reworked, Desktop & Tablet
Cell 2 - Tabs Reworked, Mobile
Cell 3 - Carousel Desktop & Tablet
Cell 3 - Carousel Mobile
