App Design

Oh My Green Restocker App

Oh My Green provides healthy, alternative snacks, produce & beverages to offices and companies across various sizes and industries. With the main warehouses in New York and San Francisco, Oh My Green is one of the premiere food delivery services tasked with helping increase employee productivity through wellness and nutrition.

BACKGROUND

In early 2017, I worked at the Oh My Green warehouse in San Francisco as Shift Lead. Besides managing my team, I was packing orders for our clients using an iOS app designed by our in-house development team. The Picking App had been the standard tool by the warehouse team since the startup’s opening in 2014. The dev team had begun conducting observations of our workflow and researching the issues encountered when using the Picking App. We were told, due to misdeliveries, they would be incorporating a method to track containers to prevent further oversight.

Soon enough, we were introduced to the new Packing App. QR Code Tags were put on every crate and cooler and I was one of the first beta testers. 

Oh My Green’s trend of automating company processes led me to believe they would be creating an app for Restockers who received the products at the customer end. I felt, being an employee of the company, this would be the perfect exercise for me to design an app.

NOTE

At the time of this posting, the Dev team had already released a receiving app for Restockers, though I have not seen its features or design. Being limited in my resources for research, some data was drawn from sources outside the company to relieve time constraints.

THE CHALLENGE

Design an App for use by the restocker on site to quality check deliverables and give feedback to all connected parties for resolutions of current and future issues. Since the Warehouse App already had a QC feature built-in, I decided it would be best for my app to have a similar design to keep consistency across all platforms.

I gave myself a deadline of 4 weeks to complete the project, using my position in the company to collect the necessary data.

The Approach

Because of my time constraints, I opted for a lean approach as I would not be designing full time, but could conduct user research at work. I would have limited time for refinements, so repetitive revision and testing was ideal. 

DISCOVERY

 

RESEARCH

User Surveys

Stepping into the mindset of a Restocker, I brainstormed a list of potential problems they may have faced based off of past deliveries I had done or assisted with and interviews I had with team members. I packaged these observations into a survey which I sent out to Happiness Crew members (and outside, experienced respondants) using Typeform and Slack. I included fields that let takers include their own input and suggestions.

Interviews

Through Slack and on my delivery routes, I did impromptu interviews with various Happiness Crew members to follow up my survey and further discuss their answers. Since these Restockers were the primary users, I knew it was important to define pain-points to create an intuitive app. This gave me a better sense of their dilemmas and possible solutions that were within the scope of the app. Using this knowledge allowed me to better form my user personas.

User Personas

From the responses I collected, I saw the patterns that formed three archetypes that would become the focus of the project. Using the user stories, I could better understand each user’s requirements and motivations.

Using experience mapping methods, I fleshed out each user’s pain points and feelings at each step of the process. This helped me empathize with the user and visualize the design from end-to-end.

Experience Map
Experience Map

THE REQUIREMENTS (User Goals)

I chose to move forward with Erin as new Restockers would be the best users to cater to; solid practice with the app would reinforce good habits and increase usability with new iterations. Dissecting the user's expectations helped me etch out the MVP which I would refered to in case I needed to refocus my train of thought.

# Mobile Mindset n.b. Restockers working overnight shifts

– I’m Tired

> e.g. Labels are clear

– I’m Local

> e.g. All containers and items in app

– I’m on the clock

> e.g. UI easy to navigate

##Erin – Novice Stocker

###Goals

– Work quickly and efficiently

– Encounter less errors

– Save time

– Quickly master the UI

> I want to do my job easily with minimal errors

> I want to report any discrepancies to my manager

> I want to finish my tasks

> I want to use the product proficiently

> Erin’s Goals are to accomplish her tasks as quickly as she can to add time to her other activities.

> Erin wants to feel ‘confident’ using the app

###Scenario’s

– Erin encounters a product that has expired and decides to report it to her manager.

– Erin finds a crate that is not part of the Kitchen’s order and realizes it was a missing crate her fellow stocker reported in the next Kitchen.

– Erin sees an item that does not seem to be part of the order, so she checks the QC notes before deciding to contact the Quality Controller who checked the order.

– Erin overlooks an item that was buried within a crate after she already completed her report.

 

MVP (MINIMUM VIABLE PRODUCT)

Who are the clients?

Restockers employed by OMG with any background, trained in the company’s logistic standards.

How does the app fulfill the client’s needs?

The App allows Happiness Crew members to verify the deliverables from the warehouse before using them to restock the site kitchen. At the same time, the App allows them to report and document any issues with the order in order to improve the quality of service.

DESIGN

Cart Sort
Card Sort with Sticky Notes

The Framework

I began with a card sort, listing the pages and steps that would most likely be a part of the app’s architecture. Using a small group of testers, I refined sort to a logical structure before continuing to a full Sitemap.

Sitemap

I sketched out some rough wireframes, taking note to keep the layout similar to the Warehouse’s picking app.

Rough Sketches
Rough Sketches

Consulting my test group again, I whittled down what screens could be left out and proceeded with drafting the first wireframes in Sketch. I was sure to include the key process of reporting damaged products, mapping and numbering each screen for easy navigation. Using InVision, I staged mock interactions with my test group; revising as different input was accumulated. Most of it was about the design, i.e. text size and transition types.

Wireframes

I went back into Sketch and created a design template. Using Adobe Kuler, I found a palette using the term “Wellness,” a company value. The red I included served to directly contrast the green tones as a method of displaying something urgent or high-priority.

UI Kit
UI Kit

DELIVERABLES

Finally, I applied the palette to my wireframes, along with some photos I took around the warehouse and at a few sites. And with confirmation from a last run of tests, I had my deliverables.

Final Mobile UI
Mock-up

All Recent Work