AT&T | Offer Timer
Create a countdown timer component to utilize for offers on ATT.com to create awareness of near-ending promotions.
CHALLENGE
Conceptualize a countdown timer feature intended to drive incremental sales. The overall program is designed to acquire learnings. i.e., do duration or week days included make a difference; do TV single play offers perform better than bundle offers (TV+BB); what is the impact of seasonality (or themed events).
TEAM AND ROLES
I lead the design and user experience efforts as part of an incubator team.
Team members included:
-
Lead Product Marketing Manager
-
Sr. Lead UX Designer (me)
-
Sr. Lead Producer
-
Sr. Digital Content Writer
-
Software Engineers (2)
-
Sr. Content Implementer
PROCESS
Learn | Research | Sketch | Design | Implement | Evaluate
Learn
The incubator team started this phase by exploring opportunities that would help drive incremental sales. LOB site placements were determined for an initial test
Notable findings
-
-
Due to constraints of rotating marquees
Potential solutions
The findings made it evident that, for the email capture, we would need to explore a more prominent static email capture, or another solution to obtain email address for device availability notifications. We would also need to design a hero screen takeover solution to propose to Apple for approval to ensure it aligns with their brand guidelines.
After summarizing the information the stakeholder interviews and data from analysis, it was time to start 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
All research was done by our marketing organization and shared with the rest of the incubator team. We used the key insignts and
Sketch
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 sign-ups.
Low-fidelity wireframes were created to show the essential elements of the two scenarios, static email capture vs. a lightbox approach. With no time to A/B test the options, we reviewed them with our stakeholders, who opted to move forward with the lightbox approach.
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 that 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. With that, I felt comfortable in the decision to move forward and I created some high-fidelity wireframes and prototypes
Feature/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 by Apple due to their policy of not allowing their content to be overlaid on any other content. After some ideation, I designed a concept that would allow for the att.com homepage to load, it would then be pushed down to reveal the Apple content which, per contract obligations, needed to be the most prominent item on our 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 presenting to Apple, who showed some excitement around the interaction, innovation and prominence of their content.
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 be removed prior to the pre-order phase, creating the need for a countdown timer which would need to remain on the homepage until pre-order announcement.
With this, we were able to leverage a countdown timer component that I created as part of an incubator project and working together with our 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 design assets for final review with stakeholder. Zeplin and Principle were my tools of choice to deliver design specifications, redlines, and prototypes to the development and content implementation teams.
Implementation
Working closely with the Development teams and working 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.
Test
After testing each component in a staging environment, the CI team pushed the competed homepage with all components to a publicly 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 closely worked with the dev team to on speed and timing adjustments for both the email and hero components. The initial speed and performance tests failed due to the choppiness of the hero animation and the 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.
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 and working 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.
REFLECTION
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 having the time to run some A/B tests for the two email capture options and 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 and getting buy-in from Apple 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.
ADDITIONAL IMAGERY
