Publicis Sapient

Giant Eagle: Mobile App Features Design

Giant Eagle is a supermarket chain with stores in Pennsylvania, Ohio, West Virginia, Indiana and Maryland. Supermarket News ranked Giant Eagle No. 21 in the 2012 "Top 75 North American Food Retailers" based on 2011 fiscal year estimated sales of $9.3 billion. Brands include Giant Eagle, Market District, Curbside, GetGo, WetGo, Pharmacy, Gift Cards and FuelPerks+ Rewards Program.

the goal

With the first release of the mobile app redesign getting ready to move from design phase into development, the client started planning for feature updates in the next release. They wanted to integrate their Gift Card brand into the app’s eCommerce experience, as well as create a scalable framework for app messaging.

The Challenge

The Gift Card Gallery allowed customers to browse and purchase eGift and plastic cards from more than 200 retailers “on the go”. The feature needed to have its own search and browse capability and cart functionality. The challenge was how to integrate those capabilities into the existing app architecture and structure.

We were also tasked with establishing the app messaging and notifications guidelines for:

Push Permissions Notifications
Push Notifications
In-App Notifications
In-Page Messages

my role

The first release of the mobile app design had been in progress for a couple months when I was brought in to lead the 2-person design team for the next release. I was responsible for creating design solutions, managing the design team, collaborating with third party development teams, and coordinating asset delivery. I was also responsible to assessing the established design process and setting up a systems-design framework for future release work.

The Design Process

I participated in a 1-day workshop with the stakeholders and the technology team, to present ideas and inspiration for the Gift Card feature integration. I facilitated the discussion and we did a prioritization exercise to align on the direction and next steps.

After the workshop, I was asked to review the established design assets from the first release and assess the feasibility of creating a Design System to be used in future releases. I took all the individual screen designs and UI styles and built a template and component framework. I established formalized styles, design rules and interaction patterns and created a design library and detailed system documentation.

With the design system in place, I started working on the Gift Card experience while the other designers completed work on first release backlog and QA. Lastly, we created the app messaging framework and display rules, delivering those to the development team for implementation.

The design concept

Gift Cards Gallery is part of the eCommerce experience of the app, so we made recommendations on where to promote the feature, wayfinding and access. The feature had it’s own custom navigation, search/browse and cart functionality. We created templates for the Order landing page and promotion for the feature, a Gift Gard-branded header with search input field and cart link, secondary navigation bar and menu overlays, a landing page, product detail page, and Order Confirmation page.

For messaging guidelines, we designed templates and guidelines for the various use cases. We created programmatic, utility and marketing templates for in-app messaging that identified the scenarios for each message type, and guidelines on content and required design elements.