AT&T | Apple Launch Event
Apple device launches are AT&T's highest revenue generating events each year.
Four major launches occur annually, each lasting approximately 5 weeks.
CHALLENGE
Apple was dominating AT&T's prime real estate for almost half the year. Executive leadership asked me to identify a solution to meet AT&T’s contractual obligation without losing its most critical value proposition space.
Secondary challenges
-
Notify and alert customers when new products become available by developing a new email capture component.
-
Create a countdown timer to be implemented onto the homepage immediately following the Apple announcement.
MY CONTRIBUTION
I was tasked with leading the design and user experience efforts, from immersion to delivery phases, to conceptualize and deliver a solution for our Apple launch events.
PROCESS
Learn | Research | Sketch | Design | Implement | Evaluate
Learn
Through initial stakeholder interviews and discovery meetings, our team was able to gather the following information:
-
Business requirements
-
Goals
-
Measurements for success
-
Gain knowledge of the users
-
Get a better understanding of the task flows of each of the components.
Notable findings
-
No time in the delivery schedule for user testing; solutions would need to be derived from past comparable testing and results.
-
Low engagement with static email components during prior device launches. Captured an average 6k user emails addresses in the week leading up to an Apple device launch.
-
Past metrics showed marquee takeovers on the AT&T homepage demonstrated positive sales impacts creating a 6% upgrade lift based on A/B test results.
-
In a previous offer timer component test for bundles, customers that clicked on a timer-banner progressed and converted, throughout the flow, at a 7% higher order rate. With this, we know users are noticing the timer and messaging.
Potential solutions
-
The findings made it evident that, for the email capture, we would need to explore something more prominent. We would also need to design a hero screen takeover solution to propose to Apple, ensuring that it aligns with their brand guidelines.
After summarizing the information from stakeholder interviews and data analysis, I started planning the approach for each of the components. Our usability team provided personas to work with and I put together a customer journey of a typical Apple launch.
Research
Through analyzing our competitors approaches and researching statistics and UI patterns, I generated some pros and cons to make a case for our email capture approach. I gathered ideas and material to use for the Sketch phase.
Competitive analysis
Pros & Cons
Sketch
Apple Hero Component
Knowing that marquee takeovers performed on att.com in the past, I created a few low-fidelity sketches, mid-fidelity mockups and prototypes to propose to Apple.
The screen takeover approach was denied because of issues with Apple content being overlaid on AT&T content.
After some ideation, I designed a concept that would first allow for the att.com homepage to load, and then be pushed down to reveal the Apple content, meeting requirements to feature Apple products as the most prominent item on the AT&T homepage.
Once fully revealed, the Apple content could be closed with a standard close button, or hidden by continuing to scroll down the page. This approach allowed for keeping AT&T’s brand messaging statement.
I gained approval of my revised prototype after a presentation to Apple. Positive feedback was expressed surrounding the interaction, innovation, and prominence of their content.
Hero prototype
Email Component
I explored simplifying the approach by combining the email and countdown timer features to reduce the overall footprint of the components. The countdown timer was being used to create a sense of anticipation around the event, and having this closer in proximity to the email capture could have potentially driven email alert subscriptions.
I created low-fidelity wireframes to show the essential elements of the two scenarios, static email capture vs. lightbox approach. With no time to A/B test the options, I reviewed them with stakeholders, who opted to move forward with the lightbox approach.
Static email capture
Lightbox email capture
My initial concern was that this approach may be too intrusive for our user base, but felt comfortable with the research that we obtained showing the following: The majority of users on att.com in the week prior to an Apple event are current Apple users looking to upgrade, or those looking to buy/switch to a new Apple device.
Given this research, I felt comfortable in the decision to move forward and created high-fidelity wireframes and prototypes.
Countdown Timer
Late in the process, it was determined that we couldn’t move forward with the combined email capture and countdown timer approach as there would be a need for the components to be seen individually in certain scenarios. The countdown timer would remain in production for two days after the "announce phase" but would then be removed prior to the "pre-order phase", creating the need for a countdown timer to remain on the homepage until "pre-order phase" announcement.
We were able to leverage the countdown timer component that I created as part of an incubator project. Working together with the content writer, we were able to simplify the lengthy proposed copy with clear and concise messaging.
Design
Combinations of Sketch and Photoshop were used to deliver comps and final assets for review by the stakeholder. Zeplin and Principle were my tools of choice to deliver design specifications, redlines, and prototypes to the development and content implementation teams.
Responsive viewports
Implementation
Working closely with the engineering and product teams, we delivered the two new component builds over two Agile sprints.
Test
After testing each component in a staging environment, the implementation team pushed the homepage to a hidden URL in our production environment.
Over a two day period, our team vigorously tested the performance and interaction with the three components loading simultaneously. Throughout the testing process, I gathered feedback and worked closely with the development team to adjust speed and timing for both the email and hero components. The initial speed and performance tests failed due to the choppiness of the hero animation with mobile load times coming in at over 3 seconds.
According to Google, 53% of mobile site visits are abandoned if pages take longer than three seconds to load. – Google Marketing Platform
We fixed these issues by adjusting the code, reworking some of the design assets until the animation loaded smoothly and mobile load times met our goal of 3 seconds or under.
RESULTS
-
By providing a seamless experience on the home page for new and current customers, we were able to maintain AT&T’s brand strategy and drive traffic through the order and upgrade flows, generating $33.5M in revenue in the first 4 days.
-
AT&T captured 60k email addresses in a 4-day period (a 1,400% increase over the previous 4k in the prior year).
-
Initial reveal for the Apple launch led to a conversion of 9.52% and 28,211 orders in the first 4 days.
-
Delivered first-to-market out of all Apple’s retail partners
1st
to market of all Apple's retail partners
1400%
increase in email
address captures
9.52%
conversion rate for initial launch reveal
Working closely with the Development teams in an Agile environment, we used a series of design sprints throughout the sketch and design phases to build out the two new components. This ensured final delivery and testing for the earliest rumored Apple announcement date.
Having to complete this project in a few short weeks brought its fair share of challenges. We worked in accelerated Agile design sprints to build out two new components and test with limited resources. With more time, I would have preferred to run A/B tests for the two email capture options. Although we took a risk using the Lightbox model, I feel that the knowledge we have of our users paid off.
Metrics showed that a high percentage of users wanted to know when Apple devices were available for Pre-order and Order phases. Getting buy-in from stakeholders on the hero component (which came to be known as the "Slider" throughout our org) was a big win for the company. I feel that the overall outcome of this challenge was highly successful.
REFLECTION
HIGH-FIDELITY DESIGNS AND PROTOTYPES
