Alyson Dietz
Alyson Dietz | Designer
banner2.jpg

ProPix | UX, Interaction Design

User experience and interaction design for product photography app

banner2.jpg

ProPix

UX, Interaction Design

Design a native iOS mobile app that can be used to efficiently capture images to add to a catalog of product photography for a grocery delivery service. The images will be taken within the app using a portable photo studio in the back room at grocery stores.


Project details

Team: Alyson Dietz (UX Designer), Phil Pinette (supervising Senior UX Designer)

Individual contributions: design screen flow, process feedback and complete iterations, present design decisions, deliver final redlines


Creating a logical workflow

I conducted an on-site visit to learn more about current workflow and interview workers. During the site visit I shadowed a third party grocery shopper as they gathered items from a list to be delivered to the customer. This provided insight into the needs of the workers and what a typical shift looks like. I also got a better feel for the layout of the store and the back of store area where photography will take place.


Keeping it simple

This is a utilitarian app, and needs to be simplified of features that might inhibit productivity. Stripping away a product to it's most basic function is not a simple task. This required many planning meetings with product managers and developers to ensure we were keeping on track with requirements while maintaining the core vision of the app.


Potential workflows

I started by writing out potential workflows, imagining myself in the shoes of the workers who would be using the app. I wrote out each of the physical touch points that I knew for sure would happen, such as grabbing items from the shelves and then bringing them to a space in the backroom to photograph.

I used this information to start sketching out potential screens.


Screen flow & final product

The final design has two primary work flows:

  1. Pick items from shelves

  2. Photograph the items

Regardless of the workflow, every user arrives back at the same "hub" of the app, where they are able to select the next step of their process. This keeps each work flow in it's own silo, but also provides the opportunity for one worker to implement both work flows. Because of the variable nature of this app (different users might implement it differently, depending on their store set up and staff), I wanted to ensure users maintain a certain level of autonomy with the app.

(Left) Home screen of app, user logs in here. (Middle) "Hub" which leads user into workflow. (Right) When picking items from shelves, user works from a categorized list and adds items to cart.

(Far left) List of items ready to be photographed. The list is organized alphabetically, or the photographer can search by keyword or scan the barcode. (Second left) Once the item is selected from the list, user is taken to an item detail page. They can verify the information is correct and sees the four photos they have to take. Clicking in to each photo brings the user to the in-app camera, where they snap a picture. Once the photo has been taken, it populates the small thumbnail in the item detail page.


Reflections

The app maintains a very functional design, which allows workers to adapt their use of the app based on their store set up and schedule. However, it still provides enough guidance and instruction that users should never feel lost or confused in terms of the "next step."