What'sThere App- 2D and 3D Prototyping

Throughout the term, I worked with a team to solve the problem of "Grocery shopping is difficult for busy people." After I created personas and competitive analysis, I created quick wireframes on Balsamiq and made a clickable prototype using Invision.

While I found Balsamiq very intuitive and easy to use, I would have liked certain features such as the ability to import images and change fonts. I created the login screen, forgot password, and some preference screens. My teammate, Kanika, did most of the prototype, as well as most of the hotspotting for this prototype.

Throughout the term we also created a 3D prototype tied to our mobile app prototype. During one of our class workshops, I came up wth the idea of a phone mount for a shopping cart. Afterwards, when I was researching in store grocery technology, I was looking at a British supermarket that had ipad mounted shopping carts, which were solar powered. Thus, I added a solar powered battery to the shopping cart mount idea. My team considered many other options for the 3D component and consulted our professor, who asked us to consider business requirements and feasibility. We eventually agreed to develop the shopping cart idea. This way, when a person is shopping, they are free to use both their hands to grab items more quickly and they are able to charge their phones in the event that it is out of battery. Mike, my teammate was responsible for the physical building of the mount through cardboard, glue and rubber bands.

I then created a second app prototype specifically for the in-store experience. Businesses are satisfied with the mount because when the phone is plugged in, people have the option to sync to the store and receive special offers (advertising). When users shop, they sync their lists from the Where'sThat app and are given a route that indicates the fastest method to travel around the store and pick up items. The app has affordances for scanning, manual entry of items, manual addition and removal of items (which may be out of stock), and coupons which can be viewed manually (and they also pop up when the last item on the list is checked).

In class, classmates tested our app and provided feedback. I used their suggestions to add more incentives (a sync five times, receive $5 off) and offers (adding stars along the route). I also changed the position of the person to a be denoted as an arrow that changes direction as people move around the store. This app was submitted for our final group presentation. We also created a protocast that introduces the app. I was responsible for the first few seconds of the video and the diagram showing our method. I had a lot of fun creating this chart in Sketch.

For my final, I was asked to create a revision of the grocery component of the app with the following prompt:

"Take a look at Scan -> Scan Item -> Cadbury Chocolate Bar. Your company’s CEO is interested in marketing your app to customers who want to recycle more. The executive team just closed a business deal with Group B (Effortless Recycling), securing their permission to integrate their proprietary database with information on whether or not the packaging for a scanned item can be recycled in the user’s town. The CEO has requested your suggested design for showing (1) whether or not a scanned item is recyclable in the user’s town, (2) whether alternative brands of a same item can be recycled in the user's town, and (3) the ability to save, “favorite,” or otherwise flag the the most affordable recyclable item so a user can purchase it next time."

For this revision, I utilized Sketch to create the revision screens. It was easy to use and I appreciated the additional flexibility and affordances that it had over Balsamiq. However, I did experience some strange visual artifacts when I exported certain artboards and pdfs. Thus, I used screenshots to preserve some of the image quality instead, due to time.

You can view my comments on this Invision project to learn more about my thought process and rationale for design. In creating this revision, I utilized many of Nielsen's 10 design heuristics.

Overall I had a great time working on this project throughout the term. It was challenging and a lot of work, but I learned so much about teamwork, collaboration, and the important of communication with superiors (my professor in this case) .

What'sThere App- 2D and 3D Prototyping

Throughout the term, I worked with a team to solve the problem of "Grocery shopping is difficult for busy people." After I created personas and competitive analysis, I created quick wireframes on Balsamiq and made a clickable prototype using Invision.

While I found Balsamiq very intuitive and easy to use, I would have liked certain features such as the ability to import images and change fonts. I created the login screen, forgot password, and some preference screens. My teammate, Kanika, did most of the prototype, as well as most of the hotspotting for this prototype.

Throughout the term we also created a 3D prototype tied to our mobile app prototype. During one of our class workshops, I came up wth the idea of a phone mount for a shopping cart. Afterwards, when I was researching in store grocery technology, I was looking at a British supermarket that had ipad mounted shopping carts, which were solar powered. Thus, I added a solar powered battery to the shopping cart mount idea. My team considered many other options for the 3D component and consulted our professor, who asked us to consider business requirements and feasibility. We eventually agreed to develop the shopping cart idea. This way, when a person is shopping, they are free to use both their hands to grab items more quickly and they are able to charge their phones in the event that it is out of battery. Mike, my teammate was responsible for the physical building of the mount through cardboard, glue and rubber bands.

I then created a second app prototype specifically for the in-store experience. Businesses are satisfied with the mount because when the phone is plugged in, people have the option to sync to the store and receive special offers (advertising). When users shop, they sync their lists from the Where'sThat app and are given a route that indicates the fastest method to travel around the store and pick up items. The app has affordances for scanning, manual entry of items, manual addition and removal of items (which may be out of stock), and coupons which can be viewed manually (and they also pop up when the last item on the list is checked).

In class, classmates tested our app and provided feedback. I used their suggestions to add more incentives (a sync five times, receive $5 off) and offers (adding stars along the route). I also changed the position of the person to a be denoted as an arrow that changes direction as people move around the store. This app was submitted for our final group presentation. We also created a protocast that introduces the app. I was responsible for the first few seconds of the video and the diagram showing our method. I had a lot of fun creating this chart in Sketch.

For my final, I was asked to create a revision of the grocery component of the app with the following prompt:

"Take a look at Scan -> Scan Item -> Cadbury Chocolate Bar. Your company’s CEO is interested in marketing your app to customers who want to recycle more. The executive team just closed a business deal with Group B (Effortless Recycling), securing their permission to integrate their proprietary database with information on whether or not the packaging for a scanned item can be recycled in the user’s town. The CEO has requested your suggested design for showing (1) whether or not a scanned item is recyclable in the user’s town, (2) whether alternative brands of a same item can be recycled in the user's town, and (3) the ability to save, “favorite,” or otherwise flag the the most affordable recyclable item so a user can purchase it next time."

For this revision, I utilized Sketch to create the revision screens. It was easy to use and I appreciated the additional flexibility and affordances that it had over Balsamiq. However, I did experience some strange visual artifacts when I exported certain artboards and pdfs. Thus, I used screenshots to preserve some of the image quality instead, due to time.

You can view my comments on this Invision project to learn more about my thought process and rationale for design. In creating this revision, I utilized many of Nielsen's 10 design heuristics.

Overall I had a great time working on this project throughout the term. It was challenging and a lot of work, but I learned so much about teamwork, collaboration, and the important of communication with superiors (my professor in this case) .