Designing an MVP

Third Person

Background

Third Person is a web app that helps eCommerce and direct-to-consumer brands find the right 3PL (third party logistics provider) to store and ship their product.

This was a remote startup environment where I was the sole designer working directly with 2 developers and one founder who was effectively our Head of Product. My responsibilities were: qualitative research, ideation, wireframing, prototyping, testing and UI.

My role

Design a minimum viable product (MVP) with two distinct experiences tailored for two user groups: brands and 3PLs. This case study only covers the brand experience, but feel free to check out the 3PL experience as well.

Defining the goal

The goal of building this MVP was to test our riskiest assumption in order to determine if the product was viable. This meant only designing the core functionality that would serve this specific goal, leaving any “nice to have” features for later.

The founders previously ran a successful consulting business helping brands find 3PLs, so they determined our riskiest assumption was: “Our digital product can offer brands 3PL recommendations of equal quality to those provided through our consulting business.”

Research

User interviews

Since we didn’t have existing users yet, I interviewed a small group of brands who were previous clients of the founders’ consulting business. I wanted to learn what worked well and what their pain points were during their previous 3PL search experience.



Main takeaway

  • Brands loved the human element of working with the two founders who were 3PL experts so the brands didn’t have to be; having real experts who could readily answer questions made a normally confusing process much easier
  • Brands were wary of 3PL-search websites because most of them shared their personal info with tons of random 3PLs who then spammed the brands for weeks
  • Brands wanted to look at several 3PL options in order to compare and not make decisions in a vacuum; they did not like the idea of being matched with one single “best” option

Exploration

Flowcharting

With user insights in mind, along with a spreadsheet from the founders detailing questions (and possible answers) that needed to be collected from users in order to generate 3PL recommendations, I made a flowchart to see what the high-level experience would look like from signup to receiving recommendations.

Sketching & ideation

I referenced the flowchart to start sketching out basic screen flows and fleshing out some details for each view, making sure to address the findings from user interviews as follows:

  • Make the copy conversational and display a super obvious, omnipresent “help” or “contact us” element to help preserve some of the human element/access to an expert
  • Incorporate a prominent “trust piece” that will reassure users that we will never share their info without their permission
  • Provide a list of five 3PL recommendations that easily allows users to compare and contrast between each

Wireframing, prototyping & testing

I referenced my sketches again to wireframe the questionnaire part of the flow first as it was the most extensive, and presented this internally to our team. We decided it would be a good idea to quickly recreate the questionnaire using Typeform and put it on the founders’ consulting website to test it on real would-be users. It was framed as a free “do it yourself” option over their traditional consulting service.

Initial findings

We tracked down some brands that either completed or dropped off from the questionnaire flow, in addition to having some of the brands who spoke to us in earlier user interviews complete the flow and share their thoughts. The most common feedback we heard was that the flow felt way too long--while they appreciated the thoroughness of the questionnaire because it made the service feel “legitimate,” they didn’t like only being able to see one question at a time because they couldn’t gather the info they needed upfront to answer the questions, and it made the experience feel long and tedious.

What shed further light on this was that most brands were using lots of different methods simultaneously to find 3PLs, so to encounter our very long questionnaire made them feel burnt out. It’s possible that, if this product ever becomes well-known and trusted as the “one stop shop” for finding 3PLs, users would be more patient and willing to spend time with it.



Iteration

I iterated on the initial wireframes based on the feedback we received, condensing the questionnaire into three main sections with each section displaying all of its questions at once, allowing users to scroll vertically to view them all. I also included a progress tracker that doubled as a navigation menu that let users jump back and forth between completed and in-progress sections.

Wireframing remaining views

I referenced my sketches to determine which views still needed wireframing and compiled the following list:

  • Home view and its various states (new user state, questionnaire partially completed state, questionnaire completed state)
  • The “trust” message
  • 3PL Recommendations view
  • An expanded Profile view for 3PLs
I discussed the list and my rough ideas with our product-minded founder. He provided two written briefs detailing what info should be included--based on his experience--on the 3PL profile view and the 3PL Recommendations view, and after some discussion gave me the green light to mock up the remaining wireframes.

The “contact 3PL” experience

While I was mocking up the wireframes, we determined we needed to include a mechanism to track how many users were reaching out to which 3PLs on the app. Ideally, Third Person would have its own in-app messaging system, but building that out was overkill for an MVP.

I did some research exploring possible solutions, and was inspired by the standard experience for contacting customer support about a product or service: you send a company an email by filling out a simple form on their site, entering your name, email and message. The company then emails you back in a few days time with a response.

I mocked up a very similar experience within the app: users could click a “contact” button on a 3PL recommendation (or from the 3PL Profile view), draft and send a message to the 3PL, and receive the 3PL’s response at the email they used to sign up with Third Person.

More usability testing

Once all the remaining wireframes were complete, I stitched them together with the latest questionnaire wireframes to see the entire MVP flow from end to end. I used this to create a simple Figma prototype to see how brands responded to the full experience.

I did some usability testing with a few brands that were previous clients of the founders, watching as they went through the flow.



Secondary findings

The brands responded positively to the updated questionnaire flow and trust message, as well as easily navigating the simple home view.

Two main issues that arose were:

  • Brands would go to click the most prominent button on a 3PL recommendation (the contact button), but stop and hover over it. After asking them about this, I realized they thought the button was a way to see more info (i.e. the 3PL Profile). It took them a second to find the “Read more” text link which actually expanded the 3PL’s full profile.
  • Some brands expressed anxiety around hearing back from 3PLs they contacted. They understood that responses from 3PLs would be sent to their email, but because there was no in-app messaging they had no way to keep track of the conversation unless/until the 3PL emailed back.



Iteration

I iterated on the Recommendations view based on the latest user insights, moving the “contact” button on a recommendation away from the 3PL bio preview text, and replaced the “read more” text link with a button that explicitly stated “view full profile.”

I also determined that users should receive an automatic confirmation email from Third Person for each 3PL they contact, reassuring them that their message was sent to that particular 3PL and that they should get an email from them soon. I communicated this to our founder who managed our email campaigns.

Conclusion

Final deliverables

The team determined that we’d reached a good place to build the MVP and start gaining insights from real users on a real app. I used my wireframes and branding guidelines from a branding agency to make high-fidelity mocks in Figma, along with a component library that I could continue to build out as the app matured.

Responsive design

Implementation

I worked directly with the developers to implement my designs, then helped QA before launch. We will be monitoring how users interact with the MVP and continue iterating until we can, hopefully, validate our assumption.

Next: Improving Location Control