A First Foray into App Design

Jeremiah DeBenedetto
4 min readFeb 12, 2017

--

A little backstory on my first foray into App Design. During my time working for my current employer I undertook redesigning and optimizing their small business website. This look into design sparked a passion to delve deeper and learn more about the design process. Shortly thereafter I entered a year-long program to learn more about the design process. Today I have finished my program and this is a look back at what it has taken to create a prototype for my final project.

The first thing anyone needs to go through when designing an App is figuring out what the point of the App is; what is the goal of the app? I wanted to create something that would help people be more efficient and give them as much time doing what they enjoyed by reducing the time it took to those things they did not enjoy. After listing various ideas and looking at the viability of each idea one popped out to me as the best idea.

It is an essential part of our lives that we need to shop for food. Whether it is for a party, every day eating, or because a storm is coming we all shop for food at some point and it has become a chore. I decided to move forward creating an App that would help people food shop faster and easier.

Now that I had my goal I had to figure out how people currently shop for food. By analyzing people’s shopping habits the App could utilize the flaws or problems people encounter to better help them shop.

I first began by going to a few local grocery stores and watching how people went through the stores, what habits people have formed in shopping, and how long it takes people to finish shopping. In addition to observing I interviewed a couple people to find out aspects of shopping it would be harder for me to observe like their intentions, feelings, etc.

Compiling all my findings I found that the largest problems with food shopping is the time it takes to find the items they need and back-tracking to find an item they missed.

Now that the core idea of the App was flushed out I set out to create a quick paper prototype iteration of the App. In this paper prototype I had the ability to create and edit a shopping list that would populate a map with the items onto a map of the store. Showing the prototype to various people to navigate and give input showed that I had missed out on a good bit of functionality. It was easy to forget to put ‘back’ buttons or ‘cancel’ buttons on screens in case of errors. Items that users might think to use as buttons were actually just static images. Overall, there was a lot of problems that are great to find early, but also every user loved the purpose of the App and that purpose was upheld by the functions of the App.

Paper prototype of two screens

From the paper prototype I created a general wire-frame of the App. With the wire-framed app I added a few more functions to test as well as fixed all the problems brought up in the paper prototype design. After the wireframe was created more user testing was conducted to find more problems.

Wire-frame of one of the screens of the App

From the wire-frame the App needed to be usable to test the functionality of the final designs. Unfortunately, I do not have the coding experience or knowledge to turn the App into a working form. Instead I was able to utilize a website that let me upload images and create overlay buttons to simulate the normal use of the App.

Finally, I wanted to revisit my original goal of helping people navigate and find their shopping list items more effectively so I created two versions of the map. I did this because on the final iterations of the design the testing was showing that the map was a little overwhelming and the aisle buttons I included to zoom in on individual items was clunky.

I opted to try two iterations: the original with a overall map of the store, and a new design that guided people through the store like a GPS would guide people in their car. Testing these two iterations showed that both were very useful to different users and it came down to the user’s preference which iteration was better.

Iteration 1: Overall Map Style
Iteration 2: GPS Style Map

Instead of choosing a single iteration, as I was expecting to do, it would make the App better to include both options in the ‘Map’ screen.

In the end I am very proud of the usability of the App I designed and how it can help different people save time at the store and have more time to do what they want to do instead.

To see the final design follow this link: https://invis.io/R8AF65KPA#/218650224_MMS_List

--

--