Find is an app discussed and mocked-up in less than 24 hours during the Hack-a-Startup 2015 Hackathon. Our intention was to not only calculate the best, most efficient experience for shoppers everywhere, but also provide crucial data for aisle activity for the retailers. My role in the team was to create the experience and interface for FIND's website and app, which Stanley Zhang coded from scratch. Our team was made up of three MBAs and five undergrads.
Shoppers often waste time wandering through aisles looking for ingredients.
Our design initiative would be to create a system that would balance the stakeholders' (the shopper, retailer, and CPG(Consumer Packaged Goods) Companies. This system would include at least an app, a website that would explain the concept and its features and iBeacon technology.
Here, we discussed a variety of questions. What could we offer that other aisle location trackers do not currently have? How can we make the shoppers use the app again? Would retailers care that the customers would be looking at their phones more than the shelves?
After half our team went out for a few hours to interview customers entering and leaving a few grocery stores, we realized that retailers are already aware that people spend lots of time looking at their phones, so they would not be so concerned with an app that may have them do the same thing and customers care most about finding items quickly and finding discounts.
From the research gathered, I concluded a couple things:
A balance between all three stakeholders must be found.
- There must be an incentive for the shopper to use the app again.
But as the designer of the team, I knew that these needed to be implemented.
- An intuitive interface--the user would use this when they are about to go into the store, or leave their home
- Straightforward steps, for ease of use.
- Interfaces for both active users--the shopper and the retailer. The CPGs would be in constant correspondence with the retailer.
This would be the regular UX flow (without the sign in/login page) for both users.
Now it was time for me to begin my mockups. I wanted the interface to be as non-intrusive as possible, something simple that can be used with a quick glance. I went for a minimalist and intuitive approach for those reasons. At the same time, I wanted this to be a fun experience--shopping can get stressful, so I wanted to make this app to be as uncluttered as possible to cause less anxiety.
On the login page, the user has an option to sign in with Facebook (for gender, age range, general region data), or use the guest option if they are in a rush. However, using Guest will not show them as many discounts as the first option--which appeals to the retailers and CPGs.
The shopping list is meant to be a quick and intuitive, something not overwhelming--again, if the user is in a rush, they can use a previously used list.
The map is a very simple floor plan using only primitive shapes--the open circles represent items that haven't been found yet and the aisles are depicted through rectangles. Photos of the items were necessary in order to appeal to the CPGs, who would want their products featured. I was inspired by Amazon's recommended items feature, since it feels friendly and not so in-your-face. This was implemented--tapping on the plus adds the item to the user's list.
Featured brands (by the CPG) are also shown, which could have a discount on it. Users are also able to edit their list anytime.
By the end of their experience, the user can compile all their discounts to the register. They can see the total of money saved, and each item discount, step by step. Afterwards, they have an option of naming their list and saving it for future use, since it's common to purchase the same items on each trip.
We had some fun with this. I was pretty new to the idea of having subtle animations on a website (which, unfortunately, was taken down), so it was pretty interesting to test this out with the developer of the team. But because we had very limited time, we had to be as efficient as possible, so we made it pretty simple--just some explanations of the features' appeals. I also tried to match the light and fun aesthetic between the app and website.
There are definitely some things I had in mind designing this--I didn't realize how much balance there had to be between all three stakeholders. To me, it almost felt like sometimes I was paying more attention to product promotion and the retailers and not the shoppers--even though all three are technically users. However, I have to remember that this hackathon was more business-related, so a good deal of focus had to be put into the profit in order to have a successful presentation (which we did!).
If I were to do this differently (and/or had more than 24 hours to do this) I would want to find a solution to make this less about money, but still make the app work in its own way. However, I'm definitely happy thinking of using suggestions rather than popups and advertisements-- that's what made our proposition friendlier.