Continuing from the previous blog post topic, the grocery list app, I moved on to developing a high fidelity interactive prototype. To do this, I need to incorporate more than the black and white assets, and also add more design elements that look more realistic.
First, I decided on the visual assets going in the mid-high fidelity prototype, including the font and color scheme. Because it is an app for everyone, I used a neutral color, blue, with different shades of grey.
Following the feedback from previous wireframe prototype testing, I implemented the following changes.
- Making a tab especially for coupons
- Change layout of website to follow conventions (menu on top)
- Could view multiple lists in one setting on desktop because there’s a lot of horizontal space
- Being able to add recipes instead of only lists, then moving the recipes over if you want to purchase it later
This was the previous wireframes prototype, showing the basic layout and wireframe of the solution.
After deciding on the changes, I used Sketch to mockup my high fidelity prototype after deciding on the information architecture with a sitemap.
This is the mobile version.
And this is the desktop version.
Because the desktop version is more of a synced version of the phone, I did not implement many pages for the desktop. Moreover, I think users would prefer using the mobile app instead.
By making the prototypes interactive using InVision, I could conduct 2 usability tests (forgot to take pics of other one) in order to know what worked well and what needed improvement.
Desktop: https://invis.io/GWAN47WYR
Mobile: https://invis.io/QJAN44B3W
Here are some of the things that worked well:
- Map is a cool idea!
- Coupons are a good idea. I would really want to use that because it’s a lot of trouble keeping track of paper coupons
- I would use this app and I am mostly driven by the coupon idea — really like how its on the phone because I carry it around all the time
- People don’t use desktop version as much, so I think the design is fine as long as it looks simple.
- It makes sense, is easy to use, very organized, and very simple
Here are some things that needed improvement:
- What happens when the grocery list is too long? It is going to look complicated. Is there a zoom in? Or a different mode?
- The map is a little clear. Aisle or shelf?
Here are some suggestions for functions in future iterations:
- Coupons should be saved to somewhere in the app (like a collection to use during checkout)
- Could add functions for out of stock/low stock items?
- Could add personalized information (e.g., favorites, most purchased)
- Could be an option to add quantity for items
- Could save club cards in app
In conclusion, I think the prototype was pretty effective, considering that I received comments about people wanting to use it and saying how easy to use an simple it was. This two-stage, wireframe and interactive, prototype experience further strengthened my knowledge in the process, making me more confident to go through the process in a more detailed and efficient way.
