Overview (TL;DR):

Task: Create a native mobile app with intuitive user interface & experience for quick and easy mobile checkout coming to H-E-B supermarkets, a Texan-favorite grocery chain. Users must be able to easily scan and bag items throughout the shopping experience, edit cart, and checkout via mobile or paystation using a QR code produced by the app.

Role: On site at their headquarters, the Information Architect and I met with the client stakeholders to discuss their goals and expectations. I then used the handoff from the Information Architect to deliver the wireframe, UI Design, and mobile prototype for the development team. Conversation with Developers was ongoing as they were working in tangent during my 2 week deadline.

This mobile app was part of H-E-B's larger effort to modernize and streamline the in-store experience for the customers stepping into their grocery markets, involving both Microsoft to create in-store kiosks and our own agency to provide the accompanying mobile app (and later a Point-of-Sale software).

H-E-B's 1st app:

Before getting started, my point of contact had expressed to me that the company already had an existing mobile app that did not do too well; he believed the reason was due to multiple departments cramming too many features into the app with marketing being a main culprit by over-complicating and crowding the original intent of the app.

Additionally, my research found that shoppers often only have one hand free, and not much time and concentration to spend in the app. The shopper could be busy holding other items in their hands, they could have kids to attend to and carts or baskets to push / hold; they likely only have one hand free. Users needed to see value in the app to choose it over its existing checkout system, and that meant it had to be fast and require little to no learning curve.

Objective

The goal was to create an app with simple & intuitive functionalities with a modern feel that would expedite and make the shopping experience more convenient for the H-E-B customer in comparison to the traditional method of checkout. The app must also be able to sustain the multiple needs of various departments from overcrowding and compromising the experience of the app over time.

The app must be usable with only one hand for all its main functionality used during a typical shopping experience so as not to inconvenience the user more than necessary.

The solution:

1. Reduce the app to 2 main functionalities in its interaction: scan a product in store, and view items in your cart.

2. All main controls used in-store should remain in the lower part of the screen so a shopper can use the app in-store to scan and check out by only using one hand (4 fingers to hold their phone, and the thumb to tap and swipe).

3. Create a separate mosaic-type page for marketing to use, which users can get to by swiping to the right twice from the default screen (camera for scanning barcodes), or by tapping the small space reserved for an ad at the top of the user's cart page.

Inspiration for interaction simplicity:

While speaking with the Head of Innovation at H-E-B, he expressed wanting something more exciting, modern, and innovative in design... something simple and clean. He referenced the simple dual interaction of Peach which switches between 2 main screens; we both agreed there were good things to take as inspiration, more specifically the simplicity of its interaction by swiping left and right between its main pages.

Handoff from the Information Architect (I.A.):

Before getting started, our Information Architect and I met to discuss his IA plans for the app. We continued our brainstorm of the IA vision with the Head of Innovation from H-E-B. Then after meeting with all the other stakeholders to assess their expectations, I took the final IA and started to expand it to include more scenarios (site map pictured above).

My Approach & Additional Challenges:

1. Of course, as I went deeper into the project, I had to adapt and expand the original handoff above to include new information I'd learned including answers to my questions and feedback. The main IA is the same, with shopping cart & scanner screens being the main 2 focuses, and additional screens requiring more effort to access. Earlier I mentioned learning that marketing had a habit of overcrowding the app... notice the added Marketing page for ads & coupons (pictured above); I felt an interaction similar to Snapchat's Discovery screen / feature could be a suitable solution to prevent history from repeating itself, as it is slightly tucked away and harder to get to than the chat and the camera screen.

2. Project Management: The 2 week deadline was a big obstacle, with only 1 week on site with the client (just myself), and 1 week back in California to complete the deliverables with my assigned teammate to assist during week 2. Because of this tight limitation, I focused on UX during week 1 including all decision making, research, and getting as much client feedback as I could while I was at their headquarters. I stuck with just a pencil and paper version of the site map so we could quickly make changes and cycle through various solutions, and created only 2 UI screens with a draft logo for the client so they could provide feedback to the style. I focused on created black and white prototypes for the client to interact with, and towards the end of my stay with the client, started finalizing the high fidelity layouts and updating my remote teammate on the game plan.

3. Since I did not get much opportunity to learn about my client's existing business and company, I felt the best way to learn about the client was to experience their stores for myself. To better understand the company I was designing for, I visited their store a few times to buy groceries and dinner while there. This later helped me better understand and translate their existing experience and branding from the real-world into a digital form.