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.
UX Research, Interaction, Web Development
Concept, UI/UX Design, Front End Development
June – July 2017
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.
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:
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.
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:
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.
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:
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.
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
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.
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.
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.
In our 3 weeks of testing, we achieved:
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.
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.