Meijer – Global Illustration Style

Meijer is a supercenter chain that has stores focused in the midwest. At the start of 2020, they had a minimal online presence and there were no plans to expand into delivery or to work with third-party shippers. When the pandemic began, they realized their users wanted the online experience to mirror the feeling they had in-store. Within two years, they built an impressive agile UX team that created a shopping experience that rivals some of the best. As great as the web and mobile versions were, they lacked that something that made everything Meijer.

The Project

I was brought into the Meijer UX team to create an illustration style that would take the app and website beyond a transactional experience. It was something Meijer had tried to work on previously but without success. They had labeled it “Project Fun” but the ideas, while nice, were not creating a connection with their users or the internal teams. I was confident we could solve the puzzle and create a style that spoke to users and give them the complete Meijer feeling.

Project Goals

To design an illustration style representing Meijer’s core values while creating a connection and bond with their user base. To make the illustrations fun while adding value and respecting the page designs created by the UX team.

Role

Illustration, Motion Graphics, UX Designer

Ai

Ps

Ae

C4D

Figma

pen + paper

Timeline

6 weeks

Ramp up

Time To Learn My Audience

I had never heard of Meijer and only visited the midwest twice in my life. I wasn’t familiar with traditions, lifestyle or nostalgia but I knew all of those were going to be very important when reaching Meijer’s audience. I was able to review the website, app and review internal information that spoke to the history of the company. I also had the most valuable piece at my disposal, people who worked for Meijer and were Michigan locals and Meijer shoppers. Now I just had to put it all together and solve the problem Meijer had tried to complete for a few years.

Style Analysis

I researched several companies within the grocery space as well as those in other industries, specifically looking for companies that used illustration well.

Style Analysis 01

Style Analysis 02

Style Analysis 03

Style Analysis 04

Research

Great UX Research

One of my favorite things is collaboration and I was lucky enough to work with a great UX Researcher who had some valuable information about Meijer, their users, and how the two perceived each other. The researcher shared interviews, data, and everything I needed to understand what had been attempted, what was learned, and how previous attempts had fallen short. I then leaned on them to help with new research specific to styles, nuance, and energy.

Styles Tested

Style Tested 01

Style Tested 02

Style Tested 03

Style Tested 04

Style Tested 05

Style Tested 06

What Didn’t Work, What Did

What Didn’t Work, What Did 01

What Didn’t Work, What Did 02

Style Development

Let’s Make It Meijer

With the data in hand, my direction was far clearer and I started creating ideas to review internally. A great conversation came with a small group where we all started talking about lifestyle illustrations and how they could be more relatable to our users. I created several ideas but full color was too busy. I decided to create layers, specifically a fun, but relaxed foreground, a midground that was the supporting actor for what Meijer offered their customers and then a background that consisted of Meijer’s “joy dots”. It was all coming together.

End-to-End Presentation

Register for New Account

Desktop

Register for New Account 01

A relaxing image showing a woman on her couch, her sleeping pets, and how effortless it is to sign up for an account. The midground shows what Meijer can offer with an account – delivery, in-app shopping, and earning points.

Register for New Account 02

Creating a mPerks account is easy and the benefits show up while checking out. The midground shows the user can earn digital coupons and earn rewards.

Register for New Account 03

As the user types in the digits for their zip code, the image shows a woman wondering where her store may be. This will transition during the last digit in the zip code.

Register for New Account 04

The final digit is entered and the woman shrinks back to the generic store image. The midground shows a skyline, specific to the zip code entered. For example, 49501 is Grand Rapids, so this is the Grand Rapids skyline.

Mobile

Register for New Account Mobile 01

Register for New Account Mobile 02

Register for New Account Mobile 03

Register for New Account Mobile 04

Login to Current Account

Desktop

Login to Current Account 01

Same image as new account, showing a relaxing environment.

Login to Current Account 02

Keeping the same image so it doesn’t distract from login.

Login to Current Account 03

What if the user forgets their password? A fun image to bring a little smile to a potentially frustrating situation. Poking fun that some people may keep their passwords on a piece of paper and how that may not be a great idea.

Login to Current Account 04

An email is sent with the link to reset the user’s password. The midground shows that Meijer is thinking about the user’s information and keeping it secure.

Login to Current Account 05

The user has “cleaned up” her act and made good choices about password safety. This was fun but also a simple message about how to be good about passwords.

Login to Current Account 06

Midwesterners love their animals so I thought it would be fun to show the cat play with the check mark ball, as a cat would probably do.

Mobile

Login to Current Account Mobile 01

Login to Current Account Mobile 02

Login to Current Account Mobile 03

Login to Current Account Mobile 04

Login to Current Account Mobile 05

Login to Current Account Mobile 06

404 – Page

Desktop

404 Page 01

404 doesn’t always mean the site is broken so I thought it would be fun to think about getting to the end of Meijer’s site. My inspiration was “Where the Sidewalk Ends” by Shel Silverstein, a favorite as a child, and how these characters are coming to an unfound area.

404 Page 02

I also thought this page could play on missing items and how that would tie to Michigan nostalgia. In the 1600s a ship called El Griffon mysteriously sank and people have been searching for it ever since. So I thought maybe the front of the ship would poke out here. Maybe no one ever finds this easter egg… like the real ship.

Mobile

No Results Found

Desktop

No Results Found 01

Having more fun with a search turning up no results and characters looking for whatever they needed. Since we read left to right, I placed the characters searching and then the last character, who seems to have her act together, showing the other characters to look at the suggested items below. The arc of her arms and pointing help guide the user down the page.

Mobile

Checkout

Desktop

Checkout Desktop 01

Order processing animation loop that is played after the user submits their order.

Checkout Desktop 02

Order complete animation that is played when the process is successful.

Checkout Desktop 03

Order incomplete animation that is played when the process is unsuccessful.

Checkout Desktop 04

Canceling an order animation that is played when the Meijer or the user cancels their order.

Checkout Desktop 05

Empty cart image displayed when the user has nothing in their cart.

Checkout Desktop 06

How it would appear from the dropdown on the homepage.

Checkout Desktop 07

Completed order screen for delivery.

Checkout Desktop 08

Completed order screen for pickup.

Mobile

Checkout Mobile 01

Checkout Mobile 02

Checkout Mobile 03

Checkout Mobile 04

Checkout Mobile 05

Checkout Mobile 06

Checkout Mobile 07

Checkout – Animations

Next steps

Present, Collaborate and Integrate

As of November 2022, I have been presenting internally to UX Designers, IT, Marketing, and other stakeholders with overwhelming support and excitement. The next steps are to integrate the illustration work into the Marketing’s style guide and create usage parameters around the work. I will also be creating Figma libraries for designers to use while creating pages for apps and the website. The queue has already started filling up with requests for illustrations for Pharmacy, Accounts, Payments, internal employee apps, and more.