my perks app

0 to 1 product development in under a year

One of my first projects after joining Giant Eagle was the daunting task of standing up a brand new mobile app for myPerks, their Loyalty Rewards program, in less than a year. Business stakeholders came to the UX team with an ambitious but somewhat ambiguous idea for a brand new app that showcased special savings for customers in their myPerks Loyalty Program. We kicked off the work with a Design Visioning Sprint, pulling together the entire design team to work on concepts. My role at the time was Sr. Art Director. Later, I also became the lead for the project once it was kicked off, providing direction and support throughout the duration of the project.

THE PROBLEM

Currently, it is not easy to access myPerks, and most customers do not know how to utilize myPerks and its many benefits. Bringing a robust system of services and products around the myPerks loyalty program will elevate the experience and bring more awareness to the many benefits myPerks has for its customers. We want to create a unified experience that includes Grocery, Pharmacy, GetGo, Payments and Partner Services.

Stakeholders were intent on launching a new standalone app that would be focused on earning and spending “perks”, which is the loyalty rewards currency for the myPerks program. This would be another app to add to other apps already in our ecosystem: Giant Eagle app, GetGo app, and the Pharmacy app. How could we encourage our users to download another app in addition to the others they already had? How could we create an easy to use experience that housed savings across our ecosystem, while elevating myPerks as its own brand?

MY TEAM & ROLE

We had a newly combined design team: Hatched Labs had just combined with the Giant Eagle team, which left us with a team of 14: 2 managers, 9 designers and 3 researchers. While the full team was used for the initial visioning process, soon afterwards we formed a smaller team for the creation of the MVP of the app: myself as the Design team lead, one Sr. Product Designer who was the main resource, and some support from 1-2 other designers when available. We had to balance the fact that this was a lot to ask of one main designer, so I made sure to provide support whenever possible from other resources when they had availability. I provided project oversight and design direction (including doing some hands-on mocks as POCs) but the final deliverables were created by the Sr. Product Designer and the rest of the team.

DESIGN PROCESS

The team embarked on a 2-week visioning sprint, where we could spend a few focused days working on the concept. We went through various steps. First was Discovery, which included a Competitive Audit, Definition of the Problem, HMW (How Might We) Exercise, & Moodboard Review. Then we spent time on Mocks & Prototypes, including Wireframing and Visual Mocks. Each night we had “homework” that allowed designers to focus on their own specialties (e.g. VizD, IxD, UXR). The sprint used a combination of solo and collaborative design time, and we would always dedicate time to review each others’ work together at the end of the day. Week 2 allowed us time to Revise & Iterate on the designs from the first week.

We went through multiple iterations and lots of different concepts. The team at the time was large enough to split into groups focused on different concepts. We explored more than one way to approach the app, and were able to dedicate resources to explore more than one idea. We designed, validated with leadership, researched and iterated.

INFO ARCHITECTURE

At the end of our Visioning Sprint, we presented 3 high-level IA approaches to the app. Path A was a “SuperApp” concept that had separate service experiences accessible from one app. This meant you could access myPerks alongside our existing apps, accessible from one “SuperApp”. Path B chose a different approach, with a cohesive experience where you could access all myPerks services. Path C was a third idea that focused on integrating myPerks into our existing apps, but it did not have stakeholder support at the time. We tested Versions A and B with to see if any one resonated more than the other.

Thirty participants were shown two designs of the myPerks design on March 2022.
Half of the screened participants were “power user’, that is, users that commonly use Loyalty and Rewards programs. 
Each participant was asked to go through each design thinking aloud. The test was an online, unmoderated study. Participants were asked to go through and review both option A and B while we asked them the following questions: 

• What are your thoughts on the design (how it looks and feels to use) and the layout (the arrangement of its elements)?

• What stands out? 

• What do you want to interact with first? 

• Does anything seem unnecessary, if anything? 

• Is there anything missing or difficult to find? If anything?

At the end, we asked participants to select their favorite option of the two and provide their rationales. Path B won by a clear majority. 80% of power users and 80% of non-power users preferred the second version. While Path A had some positive feedback in terms of some of the visual treatments, the overall architecture was deemed confusing and overwhelming. Option B was clearly the more preferred UX, even as it was deemed “a little flat” and needing more visual flair. 
 
One thing we should have done differently is to make each of the versions more visually similar than they were. Part of the reason we had such differences between the two versions was because we were working so quickly, and we had separated into 2 separate groups working on the 2 information architecture approaches. In retrospect, it would have been a better IA test to make sure visual treatment was either minimal or similar in both versions. Regardless, I think the test was valid particularly since the version with the least amount of visual polish won despite being identified as the “flat” version. In fact, we got great feedback on the visual design of the Option A.

MVP DESIGN

With the overall IA approach determined, we set out to iterate. After a successful Visioning Sprint and presentation to stakeholder, we pivoted to get ready to design the MVP version. While the Visioning Sprint allowed us the freedom to think about a North Star vision, the reality of the MVP schedule and desire to launch something in under a year meant that we had to create an MVP version first. We also knew that we would be designing with a much smaller team than the one that originally tackled the app idea during our Visioning Sprint.

One of our Sr. Product Designers focused on building out a simple prototype of the IA approach to flesh out the concept and iterate on ideas. This prototype was useful for POCs for ideas the design team had. We used it internally to help brainstorm concepts for the app, as well as to show progress to stakeholders including the CEO.

CHALLENGES & AMBIGUITY

There were multiple challenges we experienced along the way, many of which were not ideal processes, but forced us to come up with creative solutions to meet our deadlines. We had to work with a lot of ambiguity, sometimes designing while requirements were still being defined. This is obviously not the way you want to build a product, but without other options, the team did our best to work within the constraints presented to us. To further complicate things, we had to work with a third party team that was brought in to help us create the app. Our design team would be working closely with third-party Developers and Product Managers. This meant a lot of new people, adjusting to new ways of working, and the need to quickly establish good working relationships with our new colleagues.

PRIORITIZING & PLANNING

As we kicked off the work on the MVP product, it was clear we would need to prioritize. Because there were still questions around the homepage, we decided to switch gears and focus on pages that were less-design heavy and had clear requirements. So we pivoted from the homepage to focus on screens for our Profile & Settings, Login, and Create Account experiences. This allowed us to make progress and handoff designs to Developers while still waiting for vital information to help us finalize our Homepage and other areas of the app.

About a month into the project, even while we were making progress on some of the smaller sections of the app, there were still open questions that blocked our ability to finalize our IA and homepage design. I advocated for the design team with stakeholders that we needed more time to spend on IA and Homepage. The timeline given to us by our third-party partners was not allowing us enough time to get our questions answered. My concerns were heard, and I was able to negotiate for a couple of sprints worth of focused time for both IA and homepage. This pushed back some of the other deliverables but was absolutely necessary before we could proceed further. To help work continue at pace, I also pulled in a couple of other designers who could help us finish up some of the smaller page tasks while our Sr. Designer focused on the homepage and offers, which was the crux of the app functionality.

TESTING

After many iterations, we landed on some homepage variations that we wanted to test. We set out to evaluate 3 homepage layouts. The goal was to help prioritize development efforts by identifying pain points or issues for the app. 26 participants were shown 3 designs. We tested 2 groups: Loyalty users and non-Loyalty users. Each participant was asked to go through each design thinking aloud and answer several questions about the functionality of each design concept.  

We found that the Explore and Rewards sections of the app were self-explanatory and no issues were found. Only the “Shop Groceries” CTA was not completely understood, with many of the participants misunderstanding its intended functionality. Some finding we took from the test:

• Designs with explanatory copy were preferred

• “Shop Groceries” CTA was not well understood

• myPerks Pro benefits were easily understood 

Recommendations from the testing: 
Provide additional context for unfamiliar concepts, like myPerks Play & Shop Groceries 
Consider adding onboarding steps to clarify concepts

After a few more rounds of iterations, we finally landed on a homepage layout to which the stakeholders and the design & product teams were aligned. To ensure that we were headed down the right path, we conducted a usability test around our this design. The main goals of this research were to evaluate if users understand what they are looking at, whether they can compete basic tasks, identify any pain points, and help prioritize development efforts by identifying issues that are obstacles.

Our main research goals:

• Evaluate if users understand what they are looking for

• See if users can complete basic tasks

• Find pain points to interacting with the homepage

• Help prioritize development efforts by identifying issues

• Establish a baseline for future versions of the app

40 participants were shown a design of the homepage. Half othe participants were “power users” (i.e. commonly use Loyalty and Rewards programs). The other half were non-loyalty or rewards users. Each participant was asked to go through each design thinking aloud. The majority of users understood the overall benefits and basic functionality. There was some variability in where users thought they would find their loyalty card and saved offers. We also saw that the “myPerks Play” concept was continuing to be a point of confusion. We took the finding from the test to help us refine our designs.

Design System & VISUALS

With our homepage approach settled, the next stage of design for the homepage leaned heavily into establishing a design language we could use across the rest of the app. We started building a Design System to help us create components and patterns that could be reusable across the rest of the app. This would create more efficiency and was particularly helpful when we started pulling in other designers to help on the project. I had another designer who was strong at Visual Design join the project to help create a Design System and to polish the visual language. This work happened in tandem with the UX and IX work that the Sr. Product Designer was continuing to do.

We went through multiple iterations of Visual Design before landing on our final approach. While we were asked to use the existing myPerks brand logo, we were also encouraged to create a new look and feel for the app that was separate from the existing brand. So we decided to tweak the color palette of the existing brand. The brand colors were created with print in mind and were not optimized for the digital space. The brand colors were dark and a bit flat in the digital space. So instead of using the darker, duller blues in the brand palette, we created brighter and more saturated colors that could work alongside the existing palette, but work better for digital screens. We used this brighter palette throughout the app, most notably as our primary button color. We also created our own iconography and illustration styles for the app. Landing on the correct approach took some time and required collaboration with the Creative Brand team to ensure we were still working within the bounds of the brand itself, while at the same time trying to elevate the brand itself.

The launch itself would be done in stages: released first to a small group of internal team members, then to all team members (30k+), and finally to the public. We launched the first pilot just 7 months from when we first started brainstorming ideas in our Visioning Sprint. The final public launch was 9 months after we began. It was the culmination of a lot of work by a very lean design team working within some challenging constraints. What we managed to launch was easy to use, visually polished, and delivered on the promise made to stakeholders for a brand new standalone app that focused on myPerks rewards and savings.

OUTCOME

The product launched on schedule and I was proud of the MVP product that we got to market. The app served 1.5M myPerks users. However, several months after its launch, there were internal rumblings about wanting to sunset the app. The app was originally envisioned by stakeholders as an app that would extend far beyond the MVP version. But as time wore on, it was clear that the original vision was not attainable. Stakeholders then pivoted their business strategy, which meant sunsetting the myPerks app and moving parts of the functionality into our existing Giant Eagle grocery and GetGo convenience store apps. The focus for the future would be on personalized offers, rather than the broader vision originally held for the app.

This was disheartening in that we had proposed this integrated approach during our initial visioning sprint, but it was rejected in favor of building a separate standalone app. A lot of sweat and tears went into the MVP build and I didn’t want to see all of the work lost. Fortunately, many of the myPerks app features would live on, just migrated to our existing apps. That created its own frustrations and need for additional design tweaks, but it ultimately meant a good majority of our work would be preserved. The myPerks app itself was available for a little over a year and now lives on as part of our Giant Eagle and GetGo apps.