My UXDI Project 1 Retrospective

This was my first assignment in the UXDI course. The objective was to create a food based app. I had the freedom to forge my own path within this space. I had no teammates for this assignment so I wore multiple hats. I played the roles of:

• Researcher
• Interviewer
• Documenter
• Information architect
• Interaction designer
• Usability tester
• wireframe and prototyping
• interface designer
• Presenter/Speaker

Grocery shopping for many is a cumbersome and time consuming ordeal that they would simply rather not have to deal with. Despite having several mobile apps on the market for at home food shopping, I saw a huge opportunity to simplify, expedite, and improve the overall experience. In this retrospective I will go into more detail on the roles listed above and will walk you through each stage in the process of how GrocerScan came into fruition.

RESEARCH

Interviews:

The initial idea was conceptualized by synthesizing data based directly from user interviews. Having very little to work with and a rough idea of what I thought a food solution would be the first round of interview questions were broadly focused on food in general. I asked open ended questions about their eating habits, refrigerator organization, meal preparation, frequency of cooking vs. going out, and grocery shopping habits. My initial thought was to create an app for food organization within the refrigerator. My interviewees told me another story.

The people interviewed were more concerned with ways to avoid food shopping. Some of the responses I received were:

“…It would be convenient but I probably wouldn’t take out my phone just to locate food in my fridge because I’m already there and it’s such a small place.”

“I wish food could just magically show up by itself”

“I don’t have time to really thing about organizing or even grocery shopping… I would rather spend it doing other things.”

The second round of interviews was more focused on grocery shopping. I wanted to know how often they went shopping, where, why, and how. I was interested in finding out how it made them feel and why it made them feel that way.

Interview Findings:

My demographic did not like visiting supermarkets, they wanted their food quickly, and they did not want to put much effort into getting it. The same food items were often purchased again and again each trip. They liked using apps like Amazon and Fresh direct but wanted the option to price match and pick where to buy it.

“Ordering online saves me the effort of having to visit multiple stores.”

“There’s definitely staples I feel our household uses on a regular basis… I tend to buy those things regularly.”

“Price is very important to me. I would like to have a good deal and selection of items.”

Data Synthesis:

It was time to turn those interview questions into meaningful data that I could use. I was eager to see where all this information took me. What I felt was going to be long and laborious, was fun and insightful. The next step I took was affinity mapping. I transcribed the interviews and jotted down different insights and quotes onto post it notes. At first I categorized each insight by the person interviewed. I then looked for commonalities and organized the notes that way. I made the mistake of first organizing notes by similar statements. It was a mistake because I wasn’t reading between the lines… I wasn’t looking for what the user was really saying.

Ultimately I organized by what the users were saying as a whole based on those statements. The 4 categories / statements were “Make my life easier,” “I am a creature of habit, “ “ I want what I want when I want it,” and “I am responsible financially.” I was also able to define pain points.

Pain Points:

• Lack of Grocery store options
• Packed stores are the worst
• Trouble finding exactly what I’m looking for
• Takes too much time

Based on all this synthesizing/brainstorming, many problem statements came to mind such as…

How might we reduce grocery shopping time?

How might we facilitate grocery shopping at home?

How might we give the user more price options when grocery shopping?

How might we make grocery shopping from an app more approachable?

How might we make ordering groceries quick and easy?

I decided that these questions all need to be addressed and fall under the umbrella of one primary problem statement…

How might we improve the home grocery shopping experience?

Competitor Research:

As I stated earlier, there are several solutions for ordering groceries online. It was now time to take a closer look at those services. The technology Amazon uses to scan items to place orders is amazing, I loved it and wanted to integrate it somehow into my app. While that was great, I had issues with other features of the app. To be fair, I’m basing this on their web app and not their “Amazon Fresh” app simply because I could not log into that app no matter what I did. Instacart offered various different store options but lacked in other areas and required people to make the delivery rather than the actual store itself. Fresh Direct had a huge selection of options but was not the easiest to use nor did it give any competitor options.

User flow:

I now had my problem statement and a rough idea of the functionality of the app, but I had no road map of how the user would interact with it. I began sketching different workflows for how the app may work and found it branched out into so many different and complicated paths. I was fortunate enough to have my instructor walk by as I was doing this and she offered some advice. The advice she gave was to focus not on the entire app, but more on the one process I’m testing for. She even gave examples of flow next to mine!

Things definitely needed to be simplified. After eliminating various features, I focused on once process. The process of having a person scan an item in their refrigerator using the phones camera and ordering it directly through the app with the option of shopping from different vendors. The brown boxes signify the apps reaction to the users action. My initial basic flow followed this pattern:

User opens App > App home screen appears > User selects scan item button > Camera opens > User takes photo/scan > Item suggestions appear > User selects item > Cart page appears > user selects vendor > Place order page appears > User places order > Order confirmation page appears

Ideation

Sketching and Wireframing:

With and understanding of how the app was going to work, I had some ideas for how I wanted it to look and function. I was ready to translate my ideas into something I could see and and feel. The home screen had to be as simple as possible, 3 tasks 3 buttons. I wanted the functionality of scanning in a receipt from a past grocery shopping trip and viewing /reordering past orders. I didn’t plan on testing for those features until I had the scanning and ordering part down. I was only focusing on scanning an item and getting it into the shopping cart. You can see from the sketches below how I was influenced by the amazon app and how I took things in a different direction.

Prototyping

After covering a few whiteboards and notebook pages with sketches I was ready to make a working prototype. Coming from an industrial design background, a working prototype would normally involve model making and/or 3d modeling and 3d printing which takes time. The great thing about this medium is that all you need are hand sketches and some index cards or a smart phone. I ended up using the prototyping app POP to create the prototype. What you see below is the final prototype which required testing and retesting to get to.

User Testing

Now to test my design! Will people be able to use the app as I had intended? Will they like using it? Is it easy? Is it fun? Will it truly improve the home grocery shopping experience? No pressure here Jamie. I had the functionality down and made sure that all the links worked. It was tangible and as I like to say “tappable” and ready to go. I couldn’t just throw this into testers’ hands blindly so I came up with a plan. I wanted the user to only test the scanning and cart functions so I had formulate a way to have them use the app in that manor without leading or directing.

I created a scenario where the user had already set up 3 accounts within the app, Amazon, Fresh Direct, and Farm12. They were told that the objective of the app is to help facilitate reordering groceries that they already have in their refrigerator. I had to be careful not to use the word “scan” as that’s exactly what the button said. In no way did I want to direct them. Testers were told that they had already used the app to place items in their cart and were to go into their refrigerator and use the app to reorder eggs.

What’s the verdict? Was it perfect? No! But that’s ok! Fortunately I took notes and videos of my testers using the app. I even had one person test the app in their refrigerator.

The areas that most people struggled with were the shopping cart and the confirmation page. The shopping cart initially had two “place order” buttons which users found confusing. There was also no way to remove the items from the cart. My testers also were confused as to why they didn’t have an option to scan more items. I addressed these issues by adding several items in the cart with a delete button next to each item. I also eliminated and relocated the place order button. Scan and home buttons were also added. The confirmation page was a bit confusing as users didn’t know what to do from there. I solved the problem by adding a scan and home button to the bottom. After retesting, my users were able to use the app with no issues whatsoever. It acted and responded as they expected.

Conclusion

I’m very happy with the outcome of this project and feel that the users were the ones to design it. Without their input and feedback, I would not have been able to define their pain points and come up with a solution. I decided to revisit the competition chart and see how my new app “GrocerScan” fared in comparison… I am proud to say that GrocerScan meets and exceeds all the needs of busy grocery shoppers that want to shop at home.

Take Aways

While I feel the app was a success, there are things I would do differently in the future:

• Have a better grasp on the overall concept before interviewing people.· I ended up revisiting the interviewees with different more relevant questions. I will be spending more time on my interview scripts as well.
• Use Higher fidelity or “middle of the road” fidelity wireframes when user testing. While users understood that the checkout page had items on it, they wondered if it was the item they scanned or something similar. In the future I will flesh out important parts and make sure there is no confusion or need for me to explain anything.
• Keep things simple. Initially in my user flow, I branched out to every different possibility I could think of. In the end of course I focused on the task I was testing. In the future I will be sure to ask myself “what exactly are you testing for?” and build a flow based on that from the get-go.

Here is a link to my prototype: https://popapp.in/projects/576c3ad2546833bd053ff4f7/preview