GroceryMapper: Wireframe Prototype
Purpose
The purpose of this assignment was to practice creating a wireframe prototype for a mobile application and website. I decided to use Axure and I prototyped an application that resulted from some of my user research last year. The app is called GroceryMapper and its purpose is to help shoppers map out the items on their shopping list so that they can be more efficient when shopping.
User Research
Last year, I completed a field study, interviews, and a survey that looked at the grocery shopping experiences of people in the University District area. I wrote a report for each of those research methods and each report explains how the research was conducted, the results and some analysis of those results, as well as future implications and next steps. At the end of those three studies, I wrote a document communicating the research to potential stakeholders. I decided I would present the information in the document to a potential group of developers looking for an app idea. Below you can find all of the previously mentioned documents.
Design Process
Since I was able to start this project with the design implications from my user research, I listed out some user requirements, use cases, and referenced the personas I had created from my user research.
User Requirements
- Ability to plan what they want to purchase before arriving at the store
- Making a list to keep track of what they need to purchase
- Ability to navigate through a store and find what is on their list
Use cases
- Use in the store when you want to find the things on your list quickly without having to scramble about the store
- Use at home and throughout the day to add items to your list as you think of them
- Collaborate with family members to keep track of what you need to purchase to limit the number of trips to the store
Next, I decided to list out the features and functionality that I wanted to incorporate in the app. I decided to list everything from my user research in addition to anything that I thought might be helpful. I knew I wouldn’t be able to build all of this out for this wireframe prototype but I wanted to have everything written down so that I could prioritize and focus in on one area and work on more if there was time.
Features and Functionality
- List making (type up a list, take a photo of a preexisting list and add those items to the app’s list, use audio to add items to list)
- Receipt capture to log past items and remind them when to restock
- Map of the store they intend to shop at
- Map of stores to select a store
- List option with stores
- Favorites for stores
- List view of where items are located (area indicators next to item in list)
- Store inventory information
- Ability to share list with others
Once I felt like I had a good understanding of what I wanted to include, I started working on the information architecture. The pictures below help display the IA for the app and website. I noted the type of screen that each node would be in the diagram so that I would have a better vision when designing each one. Home would be a navigation screen because it would allow the user to determine where they wanted to go next. The interaction screens are screens with content that the user will be interacting with. Lastly, I thought the History screen would be mostly a consumption screen because it would provide the user with their past receipt data and information.
Using this system map and hierarchy chart, I sketched a couple of layouts for both the mobile app and web design. Below are photos of some of my sketches.
Finally, I used these sketches to create an interactive wireframe using Axure. Below is the link to my interactive wireframe.
I included annotations on the wireframe so that people would understand some of the functionality that I didn’t have time to build out in this first iteration.
User Testing and Critique Session Feedback
I tested my wireframe with a friend to see if the flow of the application made sense and see if there were any key features that I missed. I let her click around on the app and the website wireframes on my computer to see what interactions and features she was able to discover. Then I asked her to explain how she would add, remove, and check off items on the lists, how she would create a new list, and what she thought about the map of the items in the store. She thought that the list features seemed very familiar because they were like many other list applications out there but the map feature was something that was more unique. She thought that it made sense to create the list, add the items, and then view the map. She was pretty unfamiliar with wireframes and so she thought it was a little hard to test because there was only so much I could build out in the time allotted. She liked the layout for the desktop or web application because she felt like it fit the sequential steps she was imagining.
There were some points from the user test that aligned with the feedback I got from the critique session in class that I think will be helpful when working on the higher fidelity prototype of this application. I got some feedback that it would be helpful to have some indicator for the item availability at a specific store. They thought this would be helpful because you wouldn’t want to see where items were in the store if they weren’t actually available. Adding some way to indicate whether or not items are available at the selected store is something I will definitely implement in the next iteration. They pointed out that it would be helpful to add multiple stores to a single list because then the user could see if they need to go to a couple of different stores in order to purchase all of the items on their list due to the availability of those items.
For this next iteration, I am going to focus on the interactions included in list creation, list additions/subtractions, and viewing the map for that list. I think focusing on this sequential sequence will be necessary when conducting a more formal user test because I will want to see if someone can progress through those steps and evaluate their experience while doing so. I will also make the modifications listed in the above paragraph in addition to trying to refine the visual appearance. The interactions will be more of the focus though and the visual design will be a lower priority because I think the interactions for this application will be more meaningful to test.
