Procery — Interactive Mockup
This week, I continued working on the Procery concept I developed last week. Procery is an application that helps users to efficiently purchase grocery by providing in-store navigation based on users’ grocery list. In this week, I further developed Procery by creating an interactive mockup of it. For this interactive mockup, I chose to create it in medium-fidelity, as I wanted to simulate the look and feel of the product in a rapid way.
You can access the hi-fi mockup here: https://projects.invisionapp.com/share/BFAN3FNCV#/screens/221101479
Design
Functionalities and purposes
The overall purpose for Procery is to help users to purchase grocery efficiently. Procery offers an in-store navigation to users based on their self-inputted grocery list, so that users can go in and out of the store with their desired items in no time. In order to offer in-store navigation, Procery detects users’ location and syncs with the information of the grocery store the users are current in. After syncing the information, Procery automatically rearranges users’ grocery lists and displays them in a time-efficient order based on aisle number.
Look and feel
In order to simulate the look and feel of Procery, I chose a warm color palette with san-serif font. This way, users would feel welcomed to use the app. I did not spend too much time on the visual design of the mockup, because the main purpose of medium-fidelity interactive mockup is to simulate the functionality. Thus, the visual elements were not put into emphasis.
Tools — Photoshop & InVision
To create the mockup screens, I chose to use Photoshop. After that, I used InVision to add interactions among screens. Photoshop was chosen simply because it supported easy image editing as well as screens grouping.
For adding interactions among screens, InVision makes it really easy. By exporting all the screens as jpg, one can use InVision to easily add interactions between screens by an intuitive draw-and-link motion. In my opinion, this is much simpler compared to Axure!
Usability testing and analysis
To validate the design of the concept, I conducted several quick usability tests with real world users. To do that, I recruited participants and asked them to perform tasks designed around the features of the app. Overall, participants reported that they were really fond of the concept of the app. They thought it was really useful to know exactly where to go in the grocery store. However, all participants reported that the “amount” was not clear as there was no units. If this concept were to be pursued further, units should be added so that the exact amount of each grocery item is clear!
