Casey’s Digital Transformation
Casey’s old digital experiences were…disjointed, at best.
In late 2017, Casey’s General Stores faced a near-revolt from their shareholders over perceived underperformance, despite status as a Fortune 500 company and a rabidly loyal customer base. Deloitte Digital was selected to help their newly hired CMO enact a digital transformation that would free them from their third-party platform dependence and bring them into the modern era of digital customer engagement and ecommerce. In less than 12 months we launched an all-new responsive web site and ecommerce food ordering experience; native apps on iOS and Android; a back-of-house, Electron-based order management system; and the framework for Casey’s first-ever loyalty program. I served as the eCommerce creative (UX/UI) director for a distributed team working across locations in Denver, Des Moines, Seattle, and India. There were a few hiccups along the way that required some agile pivots on everyone’s part, and even led to us unexpectedly rebranding them via the UI design.
Role: eCommerce Creative Director
Tools: Sketch, InVision, Principle, Zeplin, JIRA
2018-2019
A separate team within the studio had undertaken field research and persona definition a few months prior to our engagement. Personas serve many purposes in the product design process. We found them especially valuable on the Casey’s project due to the scope of work we were undertaking, the significant legacy business complexities involved, and the fact that Casey’s has no locations in the cities where the Deloitte teams were based. Throughout the project these personas served to humanize the users we were designing for and offered an invaluable common ground when disagreements arose.
Using that work as a baseline, we began with rapid-fire ideation workshops to identify potential solutions to some of the standout problems revealed by the research phase. I found “How Might We,” “Questioning Assumptions,” and “Worst Idea” to be particularly effective techniques with this team and client.
All those messy ideas were distilled into concrete solutions via sketches and wireframes. I would like to say this is where we engaged in iterative testing to validate our ideas before producing high-fidelity comps for development. Let me buy you a coffee, and I’ll explain why that’s not exactly what happened.
While UX was flushing out functionality in wires, UI busied themselves with visual theme explorations.
It turns out their 60+ year-old brand was less than ideal for digital applications. At the client’s request, 4 weeks into the engagement we undertook the not-insignificant task of rebranding a Fortune 500 company. Via their UI design. Without altering timelines or feature scope.
It doesn’t matter how good the experience is; if the food looks gross, people won’t buy it. I art directed a photo shoot of Casey’s full menu to kick the new eCommerce experience off on the right foot.
The results:
Mobile Web
To maximize customer reach, we began with development of the customer-facing web experience. With ~70% of traffic coming from mobile devices, it only made sense to take a mobile-first approach to design (novel, eh?). The aesthetic choices made on the mobile web experience cascaded down (up?) across not only the full adaptive web spectrum and mobile app, but have also formed the basis for all of Casey’s advertising and marketing materials since launch, including digital signage, outdoor and broadcast media.
Embedded InVision prototypes are spiffy! Click and scroll within to explore a small portion of the experience…or visit caseys.com.
Note: our team’s responsibility was limited to the ecommerce flow and loyalty program. The home page and corporate pages were designed by another team interpreting our styling and suggestions established in the ecomm experience.
Desktop Web
Unfortunately you can’t embed desktop InVision prototypes so…enjoy these screenshots!
Native Apps
A limited prototype of the unique and intricate Rewards program functionality that is soon to be released across all major digital platforms.
Order Management System
We even created a brand new OMS for the kitchen to take and manage carryout and delivery orders and payments. An Electron-based web app, it had to run on some very nice multi-touch NCR displays…as well as some really old, low-resolution resistive touch displays which limited our ability to design many common interactions…such as swiping or scrolling. Deployed to more than 2000 locations, the system has allowed Casey’s to immediately gain improved insight into processes, inventory, and offline sales.
