My Portfolio
Maren Fiorelli
Title.png

Lets deliver_Darkstore technology-driven fulfillment

Title Image.png

Summary

Cutting out the middle man

Darkstore is an operations Platform and Warehouse App. It’s main focus is to help brands expand into new markets by helping them with storage fulfillment, and 1-hour, same day, and standard delivery in new cities.



Project Structure

During my time on this project, me and one other UX designer had the great opportunity of working on a redesign of the Darkstore platform and app. The company kickstarted in 2017, after evolving from one other previous delivery company in New York City. Darkstore’s moto is Honest fulfillment, to eliminate inefficiency in traditional fulfillment practices, so we were inclined to keep that in mid as we were designing.

My Role

Senior UX Designer on a team of, One remote designer, two developers, two  operations team members, lead marketer, Product Manager, and a company dog.

High level goals

User experience  and UI overhaul, while staying within time, capacity, and customer constraints.

 

 

Challenge

Many companies want to keep prices down by selling directly to their customers and cutting out the middleman.

Darkstore challenged me to:

  • design an experience that could propelling this startup into its next growth phase.

  • From a consumer standpoint I was to create a single trusted destination where folks could find same day delivery.


1: Research and Discovery

Focused on exploration, research and gathering insights, and understand the systems involved.

The Systems Involved

Presentation_Maren%252BFiorelli.jpg


 

Research objectives

We knew that the primary users for this project were growing brands looking to expand to other cities.

Key objectives:

  • Increase the number of brands signing up and using Darkstore’s platform. I was astonished to find that there was an 50% drop off rate between brands starting and using other platforms to end their process, such as shopify to maintain their inventory.

  • Clarify the entire fulfillment partners web journey. I found through previous usability testing that app users were unclear and confused when delivery and shipments were to be completed.

  • Understand the freights inbound and outbound end to end life-cycles.

  • Strategize better communication and connections.

With these four main factors in mind, I set goals, and walked the team through what I wanted to research.

 

Scanner.png

So what came next?….

uncovering the the competeive vantage point

 

 

Competitive Analysis

As Part of this Analysis I looked at:

  • Amazon Prime

  • Uber Freights

  • Caviar

  • Shippo

Screen+Shot+2019-08-26+at+2.28.26+PM.jpg

Amazon prime, and Uber’s key values propositions were:

  • Their transparent communication between the carriers and shipper.

  • From an IA perspective both Amazon prime, and Uber’s logistics apps allow for real-time freight management that let users seamlessly book and track their freights.

Users were drawn to Caviar and Shippo because:

  • Both allowed a consistent branded experience.

  • Shippo gave users automated shipping features that works end-to-end with their API.

 

 

User Interviews

gallery_xlarge.jpg

I interviewed a number of existing fulfillment and operations team users, in order to find out more in terms of their needs and frustrations. Our key findings were the following.

Fulfilment workers needs:

  • Transparent of information

  • Clarified Timelines for delivery and orders

  • Better communication between team members

Operations team needs:

  • Transparent and current on-factory-floor problems

  • Better communication between applications

  • Integrated Checks and balance system before things went wrong.

 

 

2: Define

To identify the key problem and area to focus on and develop a clear design objective.

Having better understood the users needs, I wanted to see how this aligned with Our current flow. I create a service design map to record the emotions of users during their journey, to understand the pain points.

The diagram below represents some of the users thoughts , emotions based on their actions, and possible ideas to solve these problems,

Service Design map.png

 

Framing the Problem

Before I could jump into designing, it was important to define success and understand the user.

The User Persona:

Meet Chad. He represents a summarized view of one of our main drivers, synthesized from all the previous research and user interviews.

Chad.png

“I need complete transparency with my orders from the start of the process to delivery…for peace of mind and business growth. ”

Operations Manager : Chad

Age: 32

Needs: Inventory simplicity and transparency

Frustrations: misinformation and expensive services

“When I check the fretghts for the day on Darkstore, I want to immediately find the ones that will be problematic so that I can fix them and have peace of mind.” — Chad

The Ideal Scenario…

Situation: Chad goes to the Platform as soon as possible.

Problem: He feels that there is no way to see the up to date status of the incoming freights or the day, with out either making a phone call to the factory.

Solution: Chad no longer has to call the warehouse for a history of the freights. He now has clear and easy access to a new freights section in the platform that directly links to the app, and he is able to fix and problems in less than 10 minutes.

 


UI Clarification from User feedback

Working with our Product Manger, I gathered the most common questions and concerns we hear from our prospects and clients.

  • Customers loved the product, but the products UI was inconsistent, so I decided to take a task analysis inventory of the most common problems that were happening.

Unfulfilled_square.png

Inventory inaccuracy

Items were sometimes partially fulfilled. When this happened operations managers have to spend valuable time finding out why.

 
Scan_Square.png

Scanning issues

App users were often frustrated using the built in scanner, resorting to using the physical scanner.

 
communcation_square.png

Communication

Both Operations and Fulfillment partners need to talk to each other in real time to defend against future issues

 
Button+sizes_Square.jpg

Button location & Scale

Some of the buttons were causing confusion, or selected incorrectly.

 

 

One last research trip

IMG_3620.jpg

We had a kick off for the project, clarified the mission and goals, so as a team we took a trip to Detroit to gather one more round of insights from one of our favorite clients. While there we had small deep dives into best practices for order creating, and digital inventory organizational practices.

Orders.jpg
Skus.jpg
 

Complete Key Findings Summary

below are the main product improvement theme that came out of our deep dives

  • Better Product and Freights Timing and Life Cycle visability

    • lead to ideas for new Navigation items and control in the products and freights sections in the Operations Platform

    • Open the discussion for creating easy ways to navigate the freights section of the App

  • Inventory Transparency

    • Internal Operations teams need more sight into the different stages of the inventory in the warehouse.

    • More transparency lead to better efficiency that leads to better projections, and bottom lines.

  • Communication between platform and application

    • Instant notes and cross-platform systems to eliminate time-consuming phone calls and email chains.


 

Preliminary Site map

Sitemap.jpg
 

 

3. Develop

Potential solutions were first parsed into a roadmap then prototyped, tested, refined and tested again. Connecting it all together

Paper Prototyping

We began our design process by prototyping the solutions on paper together with the insights we gathered from out team trip. The image below highlights the start of our creative thinking as we began to incorporate the various elements discussed above.

  • Below is a first pass at the freights section of the platform, we decided to create a more robust left navigation, which would include the added features that we had added to the road mapsketc

Paper_Prototypes.jpg

Our initial focus was freights pages. Through testing, we found that users were generally drawn to the site and intrigued to find out more.

 

Mid-fidelity — Freights page

While implementing further changes based on findings, I then developed a mid-fi digital wireframes for a prototype with the aim of focusing on functionality.

note.png
note_2.png
 

Mid-fidelity — Orders page

Order_Addnotes.png

 

4. Delivery

The creation of our final high-fidelity prototype and the project outcomes.

Resolving Conflicts Faster

The main goal was to ensure that all members of operations team could resolve conflicts faster. A simple note can create a context for an error correction and notify all parties involved.

Freight page

Freights+Dash.jpg

 

Fixing inventory accuracy

The key to maintaining accurate inventory is having a method to clearly view what have, and what has been counted

Below is a list view of the possible inventory that has been counted

Inventory page

New.jpg
 

Another key to maintaining accurate inventory is seeing what is wrong in the inventory lists.

Inventory Counts page

Cycle Count_Override.jpg
 

 

Our Mobile app (fulfillment side)

The Overarching goals were:

  • Connect the platform to the Apps inventory

  • Streamline key tasks Inventory discrepancies

  • Track Freight fulfillment

Concept design by me.
 


Getting closer to understanding:

Mid-fidelity — Wireframes

The main goals were:

  • Create an easier location based picking.

  • Optomize time in the fulfillment process.

  • Capitalize on better communication.

 
Preliminary Low- fidelity wireframes
 

 

Validation of concept

Orders Pages: Tracking and Receiving orders faster

At its core, order control works by tracking the two main functions of a warehouse: receiving (incoming) and shipping (outgoing). I wanted to highlight some of these metric on the orders page

5.png

Order Transparency

We upgraded the order systems to clarify all part of the order’s journey.

2.png
 

 

Freights pages

Creating Context to helps align the users goals

Architecture needs to support your User Experience. When planning, we narrowed in on target functions to clearly define our user’s pathways.

8.png

Taking stock of the information

Bucketing information into useful categories can direct the user faster towards their goal.

Imbound.gif
 

Inventory pages

Managing inventory effectively

Inventory is the bread and butter of a business. Darkstore found a way to access it to operate properly

7.png

Inventory Affects Business

Not keeping proper tabs on your stock can be costly.

inventoryPH_triplicate.jpg
 

Inventory pages

Fixing inventory accuracy

The key to maintaining accurate inventory is having an established method of cycle counting.We say this as a way to affect a small business's ability to forecast better, and ultimate scale faster.

6.png

Helping Define achievement

Cycle counting, is a simple way to easily generate metrics that tell you how you’re performing.

4.png
 

Retrospective

Through this case study, the sheer amount of work put into accurately creating a complete logistic system was a great challenge. I had to keep in mind that all of this is a process , that will take time before finding systems that work. With hard work, perseverance, and the right inventory management tools, the day-to-day operations will fall into place.

I left the project before we had time to test design solutions. There was a whole ADA design testing that did not take place. The next iteration would have taken into account better color contrast and navigation with both icon and words present. Please feel free to ask, to see a more in depth version of this project with more screens.