Interactive

Firsthand Delivery

Background

On-demand food and grocery delivery startups have taken off in the last several years. However, on-demand retail delivery still seems to be almost non-existent. Firsthand Delivery was a pivot of a startup I founded in 2017 that attempts to test the value proposition of a retail delivery service. My co-founder and I gave ourselves a strict timeline of 4 weeks to build and launch a barebones MVP.

Project

UX Research, Interaction, Web Development

Role

Concept, UI/UX Design, Front End Development

Timeline

June – July 2017

The Current State of Retail

E-commerce vs Brick and Mortar

US e-commerce sales have exploded over the past two decades, growing by more than 20x since 2000. In contrast, brick and mortar retailers have suffered severely with thousands of retail stores closing in 2017 and household names like Toys“R”Us, Payless, and Radio Shack filing for bankruptcy protection.

Despite this, substantial evidence suggests that brick and mortar retail isn’t disappearing anytime soon, but rather needs to adapt and modernize to a digital era. As a Harvard Business Review study discovered, brick and mortar retailers who invested in omnichannel shopping experiences gained more loyal and valuable customers: omnichannel shoppers spent on average 4% more per shopping trip and 10% more online. E-commerce giants like Amazon and Alibaba have recognized the indispensability of brick and mortar retail and have bet billions of dollars on the future of offline retail by building stores like Amazon Go and Hema.

The Brief

4 Weeks to MVP

Taking into account both the online and offline retail landscape, our goal was to design and implement a retail solution that would help brick and mortar retailers appeal more to online savvy shoppers.

We gave ourselves a strict timeline of 4 weeks to build and launch a barebones MVP. We split up our time as follows:


  • Week 1
    User Interviews & Ideating

  • Week 2
    UX/Wireframes & Visual Design

  • Weeks 3 & 4
    Implementation

  • Weeks 5 – 7
    Testing

“Offline to online. Online to offline. Today’s consumers live multi-dimensional, multi-platform lives — and their buying behaviors reflect that same complex dynamic.”

Talking to Users

Needfinding & User Research

We began by conducting needfinding interviews to learn more about users’ frustrations with the online and offline shopping experiences. While we were expecting to hear users primarily gripe about the offline shopping experience, we were surprised to hear an equal number of complaints with online shopping as well.

While shopping online provides clear benefits—it’s the easiest way to browse and compare products quickly—a big disadvantage is the inability to try items on before purchasing as well as the lack of instant gratification after purchasing. To combat this, “innovative” companies have implemented home try-on programs and lenient shipping and return policies. Despite this, returning an item is still at minimum a multi-day process involving repackaging items and a trip to the post office. Because of this, we learned that customers who were on the fence about purchasing items online, defaulted to not purchasing since they didn’t want to deal with returns.

Shopping offline solves many of these issues. Namely, the customer can try-on items immediately with zero up-front monetary cost and get instant gratification if she decides to purchase. Nevertheless, we found that students and young people who lived in cities had difficulty accessing malls due to transportation and time limitations making the experience of shopping offline extremely unpleasant and time consuming. From finding parking at malls, to running from store to store, to dressing and undressing in small fitting rooms, a trip to the mall can easily turn into a full-day activity that often still resulted in the customer leaving empty handed. Further, millennial shoppers stressed the importance of being able to do their shopping research online where they can compare prices and find the best deals.

We distilled our observations and insights from user interviews into 3 personas that we used to guide our product discussions and design decisions.

User Persona: Helen
User Persona: Rachel
User Persona: Michael

The Solution

Combining the Best of Online and Offline

With Firsthand, we attempted to address the shortcomings of both these modes of shopping. Our goal was to design and implement an omnichannel service that had the best of both worlds, by achieving the following:

  1. The ease of browsing products online.
  2. The ability to try-on products immediately with zero upfront monetary cost.
  3. Instant gratification if the customer decides she wants to make a purchase.
  4. None of the friction involved with returning an unwanted online purchase or going to a physical mall.

Our solution is a responsive web app that enables users to add products to a try-on bag delivered to their home in as quickly as one hour at no upfront cost. Customers are only charged for items kept past the one week try-on period; for returns, customers simply schedule a time and the unwanted products are picked-up.

Challenges

Acquiring Inventory Data

From our user interviews, we knew that millennial shoppers valued the ability to browse and compare products online. To enable this, we needed to acquire inventory data so we could display it on our site. This presented a tricky problem as retailers don’t readily provide this information via API. Brainstorming we came up with several options.

Option 1: Manual Input

Similarly to how food delivery startups like Doordash manually input menus onto their platform, we could manually input inventory data onto our website. This was certainly the easiest option from an engineering standpoint but ultimately unrealistic given that retailers have significantly more SKUs for sale than restaurants have items on a menu. Not to mention, this option wouldn’t enable real-time stock updates (e.g. new SKUs, SKUs out of stock etc).

Option 2: Form Partnerships

Similarly to how grocery delivery services like Instacart work, we could partner with with retailers to gain API access to their inventory systems. While this would be the most reliable and scalable option, it would take months to acquire these partnerships, making it unrealistic for an MVP.

Option 3: Web Scrapers
We ultimately realized that for retailers with e-commerce websites, we could simply build web scrapers to scrape all necessary data. While this left out stores without e-commerce sites, for the purposes of an MVP, this was more than sufficient.

UX Design

Collecting Inspirations & Making Tradeoffs

Once we figured out how we would acquire inventory info, we moved on to designing the user experience.

We began by taking a look at existing services like Instacart, Doordash, and Postmates to gather inspirations. They all had similar flows that began with prompting the user for her delivery address so the service would know which stores and restaurants to show the user.

Since my co-founder and I would be making the deliveries, we decided to limit our launch to the Stanford campus and surrounding Palo Alto areas in order to make the MVP feasible. This simplified our user experience since we could begin directly with the shopping experience instead of promting the user for her delivery address.

From there, we distilled the service into 5 main user experiences:

  1. Browse items
  2. Add items to try-on bag
  3. Onboarding/Sign in
  4. Checkout
  5. Return items

As we started whiteboarding different user experience flows, we realized we had to make some user experience tradeoffs due to time and resource constraints on the engineering side. While the ideal user experience would allow users to browse products directly on the Firsthand website, the engineering effort required to scrape complete inventory datasets from each retailer, store them, and keep them up to date so we could display them on our website was beyond the scope of an MVP. Further, only a small percentage of each retailer’s inventory would likely be queried, making it overkill to scrape and store every SKU.

Instead we decided it was a small UX tradeoff to have users shop from each retailer’s respective websites (just as one normally would). Once the user finds an item she wants try-on, she simply pastes the URL of that product on our website to add it to her Firsthand try-on bag. This allowed us to stay within our timeline and still deliver on our solution.

Wireframe 00
Wireframe 01
Wireframe 02
Wireframe 03
Wireframe 04
Wireframe 05
Wireframe 06
Wireframe 07
Wireframe 08
Wireframe 09
Wireframe 10
Wireframe 11
Wireframe 12
Wireframe 13

We created basic wireframes to map out the user experience, focusing on the two primary actions a user could take on our site: 1. adding an item to a try-on bag and 2. checking out. We designed the service such that these actions were accessible with at most two clicks from any page. For adding a product, we placed a product search bar at the top of every page and for checking out we placed a prominent checkout button in the “Try-on Bag” side drawer.

We finalized our wireframes into two clickable prototypes, one for new users and one for existing users, and had friends and family test for basic usability and cohesiveness.

New User Flow

Existing User Checkout & Return Flow

UI Design

After solidifying the user experience and scoping out what features needed to be implemented, I moved on to visual design and front-end development while my teammate focused on implementing the scrapers and back end.

With time and manpower in short supply, I set out to design flexible UI patterns that could be easily made responsive and reused throughout the product with minimal front end implementation work.

We kept the visual style simple, sticking closely to the wireframes. We used one typeface and one primary call to action color for links and buttons.

Each page only ever has one primary CTA button. In cases where additional actions were necessary, we used visually less prominent elements like secondary buttons or links. This streamlined our UX and enabled users to immediately know what action to take next at a glance.

Firsthand Style Guide
Homepage
Create Account
Delivery Time 1
Payment
Checkout
Account Settings
Pick Up Time
Product View
Product View Out of Stock
Product Confirmation
Sign In
Delivery Time 2
Delivery Address
Account Orders
Return items
Return Items Checkout

Responsive Design

Optimizing for Mobile Web

There are over 125 million U.S. smarphone users, 62% of which have made purchases online using their mobile device in 2017. Depsite our time limitations, building a mobile responsive website was an obvious priority. According to Google Analytics, 37% of our total web traffic ended up coming from users on mobile devices.

Results & Conclusions

At the end of the 4 weeks, we successfully launched our MVP. From the outset we knew 4 weeks to design and build an entire product was an extremely aggressive timeline. However, through a combination of clever hacking, design and implementation tradeoffs, and coordinated teamwork, we not only stayed within the timeline, but also delivered a sophisticated and polished end product. In addition to the consumer facing web-app, backend, and web scrapers, we also built an internal dashboard to enable us to update delivery status and send automated email notifications and receipts to users.

After launching, to acquire users, we flyered around Stanford University campus and launched a series of FB ads.

Lululemon Ad
Sephora Ad
Urban Outfitters Ad
Free People Ad
Lululemon Ad 2
Urban Outiftters Ad 2

In our 3 weeks of testing, we achieved:


82

Deliveries

12

Returns

52

Users

30

Repeat Orders

Online retailers see a 30% return rate whereas brick and mortar retailers see an 8.89% return rate. Ours fell in between, at 14.63%. This makes sense as the point of our service was to make it easier to both buy and return items.

While 60 sales over the course of 3 weeks probably doesn’t make a huge dent in a retailer’s business, given the number of repeat orders, we do think this service solves a real pain point among users and has the potential to scale further. To move beyond a project and into a real business, formal partnerships with retailers would obviously be required to turn a profit. Ideally the retailer would cover the cost of delivery to the customer as well as a commission on the sale.

We performed contextual inquiries and discovered that our decision to have users browse products from an individual retailer’s website and paste product URLs on our website was a bigger UX hindrance than expected. This added a non-trivial number of steps to a user’s existing online shopping routine. We observed that users tended to have numerous tabs open to compare prices when shopping online. This often caused the tab with the Firsthand website to become lost.

Contextual Inquiry

Users ended up randomly clicking tabs until they found ours which frustrated them and made the online shopping experience more tiring and time consuming.

If we had more time, we would invest in adding retailers’ inventory to our website so tab switching won’t be necessary.

Even better, we would build our service as a browser extension that would simply place an “Add to Firsthand Bag” button on our partner retailers’ checkout pages. Again, this would require partnerships with each retailer to be successful.

Our number one takeaway from the results of this project was our repeat customer percentage of 57%. This combined with the positive feedback we received from users shows that there is clearly a real pain point among consumers that our service solved. With the appropriate resources and partnerships, we see this becoming a valuable service that helps consumers shop more conveniently and efficiently and that helps brick and mortar retailers capture more sales and appeal to a digital generation. While we are no longer delivering try-on bags, you can check out the service at www.tryfirsthand.com.

Built in collaboration with Brian Yang.