Add a Feature to Mobile App
Research for this app feature started with seeing what other grocery store apps had that were comparable. I also sent out an online survey to 9 people to get feedback on grocery shopping pain points and successes.
During my Competitive Analysis research, I found that no stores currently have a functioning grocery navigation feature. Because of this, I included Google/Apple Maps in my research to observe how their navigation worked and how to implement the screens for my feature. I compared Kroger’s app with Walmart’s and H-E-B’s, 2 major grocery store chains nationwide and in Texas.
In the Survey I sent out, I asked questions like, “Have you every struggled to find a certain item at the grocery store?” and “Would it be helpful to have grocery navigation and would you like using a map to see the items you want?” In my research I found that every person has struggled to find an item before and all people have had to backtrack in the store to go back and find an item.
All of the surveys were done remotely. It was so interesting to see the common problems that people experience while grocery shopping. It’s as if we all feel the same. This tells me that there is a lot of room for improvement and growth in the supermarket apps and technology.
Getting to know the user of the Kroger app was easy to do because basically everyone grocery shops. That being said, not everyone uses the app. The younger adults are more likely to use it. In my User Persona, I created a user that we could all be familiar with and relate to—a teacher. She likes to grocery shop in an organized and efficient way. Understanding her mindset in using an app to shop, most millennials and young-mid professionals feel similarly.
In the Sitemap I created, there are a lot of pages accessible from the homepage on the app. Inserting the Grocery Navigation was fitting because there are pages similar to it throughout. For users ready to start as soon as they arrive to the store, they can click “At Store? Start Navigation.”
In the Task Flow, the user follows a pathway of adding items to the List and then choosing to shop the List in the Grocery Navigation. Kroger is implementing a customized store map feature already, so it’s seamless to begin a Navigation adjacent to the map. Lastly, the User Flow asks the questions so the user can do lots of browsing and shopping. Then after their List is ready they can use Navigation to gather the items and checkout.
In the next stage, I started with 3 versions of Sketches to get an idea of what the screens would look like. It’s really beneficial to start like this because seeing it visually helps me see what needs to change and it can be done quickly and roughly. I wanted to have a route preview screen first so that the user can get a brief overview of their route. I also knew that while in navigation mode, I wanted the items to appear as icons as the user approaches them on the map. Then, they would tap the icon and it would be added to their cart and crossed off the List. I designed a pause button so it for some reason the user needs to stop for a moment, they can. Then they can resume where they left off. For the third screen, I wanted there to be a confirmation that all the trip was complete and instructions to head to checkout.
In the Wireframes, I was able to officially choose 3 out of the 6 sketches. I chose these 3 because of the usability of the layout. Providing the large navigation viewport and also large clear buttons makes the feature straightforward. It’s also similar to popular navigation apps, so the user will already be familiar with the flow of the feature.
The last deliverable for designing is the Kroger Style Tile. Kroger has recently undergone a rebrand of the company. They have designed emoji people called “Krojis” to be the features of the brand and marketing. It was fun to incorporate them. They make the experience personable. I used mostly existing colors and typography, but I did add some icons and imagery.
In designing my 3 high fidelity screens, I realized I needed to add a few more screens. I added a Pause Screen, a Completed List Screen, and a Second Item screen to help with the flow of the Prototype. After doing a test with one participant, I realized that these were lacking the complete flow and experience.
In the Preview Route screen, the user can get an idea of their route and briefly see where all of the items are located. I used the same icons to keep it consistent and to show the different departments with the icons. If I’d used a simple symbol to show the location, it wouldn’t
In my design, I incorporated Kroger’s existing colors and interface. I used their colors and kept the buttons exactly the same. I wanted to make sure the feature felt like it fit in seamlessly. I continued with a rounded theme including the buttons, the images, and icons. In some of Krogers advertising, they use a multi-color palette. In using the icons for the food, I felt the multi-color fit well and it made it fun and enjoyable. For the main Navigation Screen, I wanted the experience to be simple and immersive. By having a slightly 3D and basic aisle, with only the food icon appearing that the user needs, this kept extraneous content out. I didn’t want to overwhelm the user with items and photos, I wanted them to be able to see where the item is approximately and be able to simply tap it to add it to the cart.
During my testing, I realized I needed an additional screen at the end showing completion of the shopping trip. What the participants were looking for was a list view of all items completed. I designed that screen with options to add items. That leads to the Shopping Trip Complete screen which directs the user to the checkout. All of these iterations are cited on my Affinity Map.
Click here to view the Prototype.
.png)
It was so much fun to design a feature for the Kroger app! I enjoyed brainstorming ideas and being creative finding an idea to add to something that already exists. It was also really interesting and different working inside a concept that someone else designed. In the past, I’ve designed each part of the process, but working inside Kroger gave me a structure to work with. That was new and enjoyable. Creating a feature like Grocery Navigation was exciting because I got to imagine improving the lives of users everywhere. It combined technology that we have all around us and ideas that already exist. It is just one step further and imagining that being helpful to people is so delightful. I hope one day I can use a real Grocery Navigation.
In this project I was most proud of my growth in using color and ability to be consistent in my design. I also enjoyed learning about my users and how we all relate to grocery shopping. I continue to get great responses in my surveys and using them helps me to get a lot of data in a short amount of time. I can’t wait to do more projects like this.
