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.
The 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
- Illustrator
- Motion Graphics
- UX Designer
Apps
- Illustrator
- Photoshop
- After Effects
- Cinema 4D
- Figma
- Lottie
- Rive
Timeline
- 6 weeks for style
- Ongoing for Assets
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 throught their sites and apps.
Great UX ResearchER
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.
Illustration Research
After the initial research was completed, I decided to pick out six styles and created samples that used Meijer and groceries as the focal point. I made sure each illustration was unique not only in style but also the energy it was portraying. I wanted to find out what resonated with Meijer customers as a whole, not just another pretty picture.
Illustration Styles Tested
What worked and what didn't
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.
Illustration Layers
With great power...
Now that the style and foundational rules were in place, it was time to start analyzing different pages and flows on Meijer's site to see how the illustrations would integrate. The plan was for more than a decoration, but a helping hand with what was being conveyed on the page. It was known through research that most customers didn't fully read the page, so how could an illustration support the content and help the user? It was clear that these were more than illustrations... they were UX Illustrations! (Cue superhero music!).
Register for a New Account
The idea behind these images was to gain trust in our user as they supplied us with personal information. How can we show them the benefits of a Meijer account while also conveying the ease of signing up and shopping? Relaxed images, sometimes a bit of humor and, most importantly how to connect with them personally.
Starting the new account process, the user is met with a relaxing lifestyle image to convey ease of use and trust in Meijer.
The second step shows the benefits of mPerks, Meijer's reward system. The ease of self checkout is highlighted as well.
When the user comes to the step of choosing their store, the illustration shows a thinking customer, waiting to receive the information...
Once the zipcode digits are entered, a list of stores and an illustration with a specific city skyline is shown. In this example, the skyline is of Grand Rapids, MI.
Lost Password
Losing or forgetting a password can be frustrating and often comes at an inopportune time. There were specific steps the user had to go through, but I thought a little humor may help with the situation. I didn't want to make light of the problem, but I also know we've all scribbled passwords down on stickies so why not run with it. You know you've done it too. I won't tell.
After the user selects reset password, they have to enter a valid email. This illustration is meant to bring a little light to the situation, especially with the poor cat battling a sticky.
The user has wait for the email, which is shown in this image based on how we would receive snail mail. The subtle use of locks and asterisks for passwords reinforces the idea of safety.
Once the user selects the reset link, the page they are brought to shows a person "cleaning up" their issue by removing all sticky notes. This is a way to have fun but also suggest stronger password safety.
People love their pets so I thought, wouldn't it be fun to show the cat play with the checkmark ball, as a cat would probably do.
404 Page
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.
My interpretation of "Where the Sidewalk Ends" but for the Meijer website. Like the book cover, the characters are curious and looking to find what they came for. The image also leads the user to look down the page where department suggestions offer help.
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.
Search Item Not Found
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.
To Infinity...
Starting in November of 2022, I began presenting internally to UX Designers, IT, Marketing, and other stakeholders with overwhelming support and excitement. I began to integrate the illustration work into Marketing’s style guide and create usage parameters around the work. I also started the Illustration Design System with two other Designers so the work was organized and distributed to UX Designers via a Figma library. Besides taking requests from departments and other designers, I worked on a site audit to replace existing illustrations and find new opportunities.
Meijer UX Illustration Design System
PDF export as of 05.28.2024
More, More, More...
As of now, the illustration requests keep coming and there's no sign of slowing. Marketing has called on me to create animations for social media, which is an update to their flu shots and vaccines during the Fall. The Illustration Design System Library continues to expand as well as custom illustrations for the Point of Sale (POS) system, Pharmacy and internal apps. Check out the Animations Page to see some more goodies!