Final App Project, Ben Fenton

1. INTRODUCTION

As part of this project I began designing with these requirements in mind: "You will be developing a system of three integrated apps for an existing profession or life situation. Your app will function slightly differently on each device where it runs, but it is only required to run on two platforms (phone and tablet, tablet and desktop, or desktop and phone). This assignment explores how people use technology to work together and how to design interface systems that can be applied to different platforms."

In other words, I would be designing one app with three different views that would be accessible on atleast two different platforms

Before diving in headfirst I wanted to step back and think of the different jobs and life experiences I have had in my life and how they may have been benefited by an app that me and one or two other people could have utilized. My brainstorming notes are below.

There are some obvious trends in my thinking, I thought about solar since that is my current field of work and some things that may help there. I thought of family helps like piano practice tracking, grocery shopping, screen time and shipping resources. I also thought of warehouse responsibilities like keeping inventory likely influenced by my previous experience in warehouse work. I also thought of drama with a certain cast and crew coordinating app. All of which would have been incredibly helpful in my life.

I felt pretty good about a bunch of my options but nothing stood out more to me than the Grocery Shopping app. I know, exciting right? But really, picture this: an online shopping hub that combines online shopping with a traditional family shopping list. An app where a customer's family can contribute to the grocery list, the shopper picks from that list and adds it to the cart, seeing availability on items and specifying which brands and products they want to set as preferences and sends all of that information to a store employee. That employee then shops in your behalf with the employee side of the app where they can get detailed information about what to shop for and where to find what they need. I think that is a really interesting idea.

2. RESEARCH AND BRAINSTORMING

As I began searching different online grocery shopping apps as well as grocery list apps and some of the unique features they had and what they lacked. I found that no online grocery shopping app had a grocery list feature that exceeded a shopping cart. I also found that no grocery shopping app paired with a specific grocery store to allow you grocery list to be easily implemented into an online shopping order. This was such a match made in heaven and yet I could not find both together in one seamless design.

I did find that some related apps also give you the ability to get suggestions based on what you have in the house or look at recipes they have in app. I found that interesting but I'm not sure how much I wanted to implement those things.

On the other hand I was really impressed by a few of the grocery list apps' ability to organize your shopping list automatically by category, one even would tell you which aisle you would find some items on within the store which would be incredibly helpful for whoever is doing your shopping for you or if you choose to shop in person yourself. I found that one helped you keep track of how used certain items are or how often you may need to get something new, for instance if you shop weekly but need something every other week. I think those features would be awesome to implement.

Screenshots with the descriptions of each app were provided by an article from GoodHouseKeeping.com

https://www.goodhousekeeping.com/food-recipes/g26255008/best-grocery-shopping-list-apps/

I watched a video talking about the Instacart Shopper side of things which would be similar to what store employees would be using on laptop/tablet to take these orders. I really liked how in the shopping section itself you can find pictures, quantities and categories. That being said I think categories may be a bit less important for the store shopper/employee side of things because they might be able to utilize inventory data such as exact aisle locations and the thing that suggests their shopping may be able to offer the fastest route from product to product.

Phone cameras are getting really impressive. I think it would be awesome if part of the app allowed you to use your phone's camera to scan the barcode of something or simply take a picture. Then the app either pulls up the exact item or the closest match it has. At which point it would allow you to buy it or add it to a grocery, save for later, or wish list.

Below I have attached three personas which all represent customers who might benefit from an app of this sort. Three people who could use the ease of getting groceries online and who might be able to handle utilizing an app for such. For instance, we have a mother who needs the app to help her gain needed free time, similarly Jim is a busy work guy who utilizes the app for a bit of organization and help to help free up some time for him. Pablo is a bit different but he similarly utilizes the app so he can order his groceries easily and avoid having to go out to get them.

Persona profiles made possible by https://www.hubspot.com/make-my-persona

Next up I had two people who could utilize the app on the business side of things. Jeff, someone hired by a grocery store to shop in the customer's behalf and Tom the one in charge or handling the inventory.

Now that I've set up the people I want to target and the app I want to develop I want to find 3 scenarios per platform that would demonstrate how these personas might utilize my app. So I can design with their needs in mind. Those personas go as follows:

Mobile

1. Your spouse has invited you to the list they set up, use the app to save anything that isn't food from the grocery list to buy later.

2. You want to shop in person at the store using your mobile grocery list, shop and checkout entirely on your phone.

3. You know that you are particular to a certain kind of milk and want to get that kind the next time you order online, use the app to change what your milk preference is by scanning the barcode of the milk you already have in your fridge.

Laptop/Tablet

1. You are an employee in charge of shopping for online customers, complete the checkout process for Patricia Elms.

2. You are stocking shelves, use the app to stock brown sugar.

3. You are managing the inventory and the app has notified you that the store has sold a significantly larger amount of eggs than usual, use the app to order an additional shipment of eggs.

Below we have two flow charts to explain how navigating the app will work, to the left is the customer app, to the right is the employee/admin app. You may notice the customer side is a bit more complex looking. That is because the customer side holds your hand through the steps a bit more.

3. USER TESTING

At last, after all of that planning it is finally time to take what I have planned and figured out, make a paper mockup, and begin the user testing.

WIRE FRAME #1

Below is the first mockup of the customer/phone view of the app with the

second as the employee and admin/ desktop and tablet view of the app.

In this design it was blatantly obvious that little attention had been spent on making it highly interactive, interesting, or beautiful. I was mostly just looking to prove the concept and that the layout and overall navigation was clear.

You'll also notice 5 pieces of paper that aren't regular computer screen dimensions. That is because those are pop ups. If they are square shaped they will pop up in the middle of the screen. If they are rectangular they will pop up from the side.

My wife Madie did the first test on both mobile and desktop! Overall it was pretty smooth, that being said she had a major hiccup or two with a few portions of my design. In particular she had a hard time navigating to the preferences section from Scenario 3 of customer side of the app. on the desktop version she misunderstood the inventory page and did not find the section for where to stock shelves. When ordering eggs I meant for her to click on 'Order Now' but she picked 'Add to Cart' instead, which is fair, I meant for that 'Add Cart' part to be used if they want to buy something but want to order more than one thing together.

WIRE FRAME #2

Below is the second mockup of the customer/phone view of the app with the

second as the employee and admin/ desktop and tablet view of the app.

My mom and dad seemed to have few issues navigating. However, it seems my mom had hard time navigating to the order preference page like my wife did previously. My dad on the other side, who was using the employee end of the app, wanted to click on things that could have acted as links but had not been built with that in mind. He also wanted to scroll through the inventory page instead of going to the stock page for scenario 3.

WIRE FRAME #3

Below is the third mockup of the customer/phone view of the app with the

second as the employee and admin/ desktop and tablet view of the app.

Greg seemed to have a hard time knowing how to move items off of his list on the customer app, it seems the icon I chose is confusing. His wife, Katlyn, also wanted to go to shipments as part of scenario 3 instead of going to the item itself. It seems like scenario 3 is still confusing on the employee side. However, scenario 2 made more sense to the customer this time and scenario 3 on the customer side was a bit easier to get to.

STYLE GUIDE

4. RESULTS

Then we have the employee desktop and tablet portal to keep stock, complete online orders, or to manage inventory. An all in one view on managing the store.