It all began with a field study
One of our users, let’s call her Rivka A., was using WatsOnSale on a Tuesday night a couple of months back. I observed her opening up multiple tabs to compare the products on sale from different nearby stores. She then pulled out a pen and paper and began writing. I asked her what she was doing and she said “I’m creating a shopping list for when I go shopping tomorrow”.
It hit me then. After user views the sales, their only next steps are to either print the sales or close the website. That’s a major dead end since the users in reality will be doing a lot more things, like going to the store and actually going shopping. I had to figure out a way to keep users in the fold until they went to checkout in a store. I needed a shopping list tool.
Follow up survey
With this in mind, I sent out a survey asking users about their shopping list behavior and was amazed by the respondent data.
56% of users always create shopping lists, 35% of users sometimes create shopping lists, and only 9% of users never create shopping lists. The best part was that 72% of users use pen and paper or a text document to create a shopping list as opposed to an app or template. This means that they weren’t already using a competitive product.
Every user that responded to the survey said they’d be willing to give a WatsOnSale shopping list tool a go. The interest was there, now I just needed to figure out the best way to create said tool.
- I evaluated competitor offerings, using more than 20 different applications and compiling a pros and cons list
- I sent out a follow up survey with a laundry list of potential features that users could vote on
- I practiced alternate methods of creating shopping lists with pen and paper, a text document, and text messaging (my personal preferred method) to see if the simplicity of those methods could be brought into this tool
The reality set in. Because the WatsOnSale user base skews 40+ and they aren’t tech savvy for the most part, it would be very hard to beat pen and paper, a text document, or text messaging.
After the project research, I came up with the following feature set:
- Desktop and mobile version
- Click on specials to add a product to shopping list
- Get shopping list ideas from other WatsOnSale users
- While you type, get suggestion for products you might want to add to the shopping list
- Have undo option if user removes a product by mistake
- Have ability to type in a simple product or add more info like size, price, etc
- Organize products in your shopping list by category
- Integrate with store websites so users can use there as well
- Have multiple saved lists for different stores, different times of the year
- Receive special coupons like 5% off total when using the shopping list and sending the order to a specific store
- Send shopping list to spouse, child, friend
- Send shopping list as an order directly to your store of choice
- Check off items as completed on the shopping list as you walk through the store
- Share your shopping list publicly and allow people to get ideas from it
- Skip the store register. Go through the store, put things you like in your shopping list, and leave. The store will deliver the order to you.
In terms of usage, I wanted to make sure it would be simple, simple, simple. Pen and paper simple.
This is the actual design. You can see it on the right side of the image below.
I got inspiration from chat widgets like in gmail and on ecommerce websites. It should be always present, easy to open/close, lightweight. On WatsOnSale, the user is already on the page looking at the sales, now they could easily add those sales to a shopping list. The widget design also has the added bonus of being similar to a mobile app in terms of size and flow so when I begin app development, much of the work will already be done.
Before designing everything or getting it developed, it’s important to really understand all the possible path that can be taken in the product. You don’t want to have a finished design and discover that there is a fatal flaw in the process. You can see the flowchart below. It’s a doozy! Just because the product looks simple on the surface, doesn’t mean that there isn’t a lot happening under the hood!
I had to keep in mind logged in, logged out, and first time users. Also, since we’re building in the ability for embedding, what happens when a user tries to use it from another website that has it embedded?
High fidelity wireframes & specs
At this point, I designed every possible interaction with high fidelity wireframes. I am not one who likes to leave things to chance and I have found this to be the most effective method of making sure development gets the product completed correctly. There were 23 pages of designs and specifications in the end.
The widget is currently in alpha and being tested by a select group of users in our dev environment. Response has been wholly positive and we predict about 65% usage from our current users plus many additional first time users from supermarket websites that will integrate the shopping list widget. The real challenge will be to keep usage high. It will remain in alpha for at least a month as we go through hundreds of bugs and tweaks as it continues to be used in a real way.
Once the widget launches on the live website, It’ll go through multiple iterations of user testing and tweaks as we get more data on usage. I’ll edit this post to include the real usage data after it’s been live for a little.
There is no such thing as having a feature be complete. In the fast moving internet environment, the life cycle of a product will be short if you are not constantly innovating and address new technologies and mediums.
Killer features that will be added as time goes on:
- Ability to click on deals and auto add it to the shopping list.
- Auto complete based on your usage history and a database of products.
- A mobile application. However, there is a mobile version that will work beautifully in your phone browser.
- Price comparison between stores when you add a product. This feature will sadly not come in the foreseeable future since the stores have explicitly stated they don’t want to directly compete in this way.