GroceryMapper: Medium Fidelity Prototype

Purpose

The purpose for this assignment was to improve the wireframe design and make a medium or higher fidelity design that looks more polished and incorporates more interactions. Another goal for this assignment was to learn about another tool. Since I used Axure for my interactive wireframe, I tried using Justinmind for this prototype.

Process

The feedback I got on my interactive wireframe was the main focus for this version of the prototype. Someone from my in class critique group mentioned that there may not be a need for multiple lists especially if you can add multiple stores to a single list. I also got the same feedback from another potential user because they said it seems like one list would keep things less cluttered and simple. So I decided to refine my design to focus in on one list. I also removed the checkboxes on the web version because someone had pointed out that they didn’t think a user would be checking things off of their list from their computer. They explained that they imagined users would use the web version for planning and list creation at home while they would use the mobile app to add to the list on the go as well as shop in stores. I added an inventory marker on both the web version and mobile app to help indicate that an item is not available at the store they initially selected. The user would have the option to remove the item from their list or to find the item at another store. From the critique last week, classmates mentioned that they thought that if an item wasn’t available at the store they selected, then it would be helpful to see if other stores have the item on their list so that they don’t have to try and figure it out on their own.

As I was creating this prototype, I spent a lot of time learning about the tool, Justinmind. I have not used very many tools and had never created a medium or high fidelity prototype so there was a lot of learning that I needed to do before constructing this prototype. I wanted to focus on the list aspect of the prototype because I knew time would be a constraint and so I wanted to focus on the feature that I felt like would be the most important to test. I created the list in the prototype so that the user could freely add items and delete items and feel as though it was a truly functioning list. When determining which interactions to use, I thought about current interactions and gestures that users would likely be familiar with, like swipe left to delete in a list. I used a lot of the gestures that other apps use so that the user would be able to apply those same gestures without having to learn completely different gestures in order to interact with this application. Incorporating a lot of the gestures and interactions was harder than I had anticipated. Scrolling was particularly hard because there was supposed to be a feature in Justinmind that would keep some elements on the screen while others scrolled but I wasn’t able to get that to work. I think it may have been because of the element I used to set up the list. I spent a lot of time trying to make sure the interactions worked fluidly because I felt like those were important to test.

Prototype 2.0

Here are the links to my mobile and web prototypes.

GroceryMapper

GroceryMapperWeb

User Testing

I tested my prototype with one of my friends and tried to test the prototype with formal user tasks and questions. Below are the tasks and scenarios that I included in the user test to help evaluate the prototype.

1. Imagine you want to go to the store later today so you want to view your current shopping list and make some modifications. Can you show me how you would open your list and add an item?
2. (item has been added now at a total of 5 items) Can you show me how you would delete an item?
3. (item has been deleted now at a total of 4 items) Can you show me how you would edit an item on the list?
4. What do you think the yellow icon means? (based off of their response I asked if they thought it was valuable and suggestions that they might have for it)
5. Imagine you just parked your car and you are ready to walk in the store but you want to make sure to be efficient. How would you determine the items on your list that you should get first?
6. Use the list as you would normally use a shopping list in the store.
7. (various follow-up questions if they stumbled on an area or if they were unable to complete one of the above tasks)

The user I tested the prototype with thought that the flow made sense and the simplicity was something they really liked. They also thought the interactions were natural and ones that they were used to using in other applications and contexts. I showed them the previous wireframe prototype afterwards to help show some of the features that I was unable to implement in this second version to see if I could still get some feedback on those. They liked the changes that I made from one version to the next but they thought the app just needs some polishing to make it more functional. They thought it would be interesting to see how the history feature would work so they thought if I were to do another iteration then that should be the focus just because they were curious. The user also thought the sharing wasn’t necessary and they thought it was ok that my second iteration didn’t have it. That was something that I didn’t have time to include but I think it would still be valuable to add in and test with other users to see if they also thought it wouldn’t be necessary or helpful. I think if it was included and could be tested by the user they may have changed their opinion on the feature but it would be interested to test and see if that is the case.

Reflection

I think my prototype was helpful when assessing the flow and some of the basic interactions with the list functionality. I think there is definitely a lot that could be improved if I had more time. The scrolling feature for the list and the list at the bottom of the map view is something I tried to figure out and for some reason could not get it to work. I think I would try and watch more videos and tutorials online to see if I could figure out why it wasn’t working because I think that is an important aspect to include when testing longer shopping lists. I think I would like to include a way to make one list broken down by store because I couldn’t figure out how to do that when building the prototype but it was a feature that I had initially really wanted to test after testing my wireframe. I think more time working with the prototyping software would help with this improvement as well.

Now having done a higher fidelity prototype, there are a couple parts of the process that I would change. I think next time I might try making specific testing scenarios that focus on the key aspects and interactions I want to test and then try building the prototype to support those scenarios. In this case, I built the prototype and then the scenarios but I think building the scenarios would have been an interesting approach to try. In class during our presentations, someone brought up the point about graphic design points and what you want the default to be and what you want the user to focus in on. That was something that I hadn’t thought too much about but I think doing an iteration just focusing on testing the design and all of the attributes would be really interesting. This prototype primarily tested the interactions and features so I think having another version of the prototype intended to test the design would be helpful before moving to a final version.