Oh My Green Restocker App

Oh My Green provides healthy alternative food, snack and 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 a Shift Lead. The whole of my duties, besides managing my coworkers, 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. In February 2017, the tech team had begun conducting observations of our workflow and surveying the team on the issues they would encounter when using the picking app. We were told, due to a few misdeliveries, they would be incorporating a method to track containers to prevent such oversights from happening again.

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. I brought up several flaws in usability and the interface almost immediately for a couple weeks before the development team decided to shadow us. Seeing the pros and cons in both iterations of the product, I took it upon myself to start a design overhaul as I had hands-on experience with both apps and could easily step into the persona of an employee who would be using it everyday for work.

Revision

In an earlier draft of this project, I focused on redesigning the app as a whole as a way to showcase my insights and suggestions for the app direction. A few of the ideas I came up with were later implemented in an update of the Picking App. I came to the realization the product had no need to be redesigned in its current state as it itself was a work in progress. Instead, I turned towards the the next logical progression, a Mobile App for the “Happiness Crew” or the Restockers; something that would help improve the quality of service in the long term. In Oh My Green’s current business model, drivers would drop off deliverables to the clients’ kitchens for the Restocker to unload. And though quality control in the warehouse reduced the majority of errors in an order, there was no immediate way to monitor an order that had been received which led to many issues that went unnoticed or after the client had been charged like the quality of the items — expired or damage from delivery.


The Challenge

Design an App for use by the stocker 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 to base the app on the same interface in the event a warehouse employee became a stocker or vice-versa.

To give this simulation a real world feel, I gave myself a deadline of 4 weeks to complete the project, working as Shift Lead while collecting data in my spare time.

The Approach

Because of my time constraints, I opted for a lean approach as I would not be designing full time, but could conduct research and gather data at work. I would have limited time for refinements, so repeated revision and testing was ideal. While on the clock, I monitored incoming correspondences about my surveys and could schedule future testing.


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 have done or assisted with and conversations I’ve had with members when they had complaints. I packaged these speculations into a survey which I sent out to Happiness Crew members 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, following up my survey and further discussing their answers. Since these stockers were the primary users, I knew it was important to define pain-points early on in order to create an intuitive app. This gave me a better scope of their dilemmas and possible solutions that were within the scope of the app. Although some concerns were regards to scheduling deliveries to coincide with stockers’ schedules, I was able to justify most of my theories I included in my surveys. Using this knowledge allowed me to better form my user personas.

personas-mockup.png

From the responses I collected, I could see patterns within the data and form three archetypes that would become the focus of the project. Using those three, 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.

Exp_map.png


The Requirements

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 ease the proposal of new iterations. Concentrating on the user’s expectations towards using the app would serve as a guideline moving forward when defining features that accommodated those expectations.


# Mobile Mindset n.b. Restockers work 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.


 

I found when hitting a mental block, defining the Minimum Viable Product would give me guidance as I began the design phase. Referring to this helped keep my focused and in line with the end goal of the app.

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

20170630_141608.jpg

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.png

With the main features defined, I drafted Erin’s user journey, including major “plot-points” that would help condense complex pathways. Surprisingly, I figured that there were only 4 crucial steps to the whole process. This gave me hope that the app would be feel intuitive to a first-time user.

User_journey.png

I sketched out some rough wireframes, taking note to keep the layout similar to the Warehouse’s picking app as per the user persona, Denny, as she represents users who would need to transition between both iterations of the Warehouse and Restocker app. Though minimalistic in the full sense of the word, I could see the app gradually becoming more tangible.

20170701_173444.jpg

Consulting my test group again, I whittled down what screens could be left out and what needed to be present 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 regarding text size and transition types.

Wireframes.png

I went back into Sketch and created a design template. Using Adobe Kuler, I found a palette using the term “Wellness,” a value repeated over and over in the company briefings. Luckily the palette I chose was in the stem of green hues so as not to clash with the green Oh My Green logo. The red I included served to directly contrast the green tones as a method of displaying something urgent or high-priority.

UI_kit1x.png


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.

Deliverables.png


 

Iphone_hand_OMG.png

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s