From Business Model to Market-ready Product
How we took a startup from a branded business model to a full-scale MVP product so it could go through the wringer like all the rest.
In August of 2016, I was introduced to Chris by one of my previous employers and friends at Trout + Taylor. They had designed the brand for Chris’ startup Pareto and recommended me to him as a good match to build his product. After meeting with Chris I could tell we were a good fit for each other; not to mention that his story and business were things I was able to connect with and get excited about — always a good first sign for business.
Chris was comfortable trusting my business partner Brett and I to take the reins and build his business model into a market-ready minimum viable product. This freedom was both liberating and daunting for us as it demanded that we execute on a lot more fine details while also meeting project scope, timelines, and expectations in order to execute accurately on Chris’ vision. In addition, we had to build the product in such a way that Chris would be able to do the day-to-day admin work and understand the systems well enough to be confident in communicating them to potential stakeholders.
Today, Pareto is online and running at full steam as Chris works hard to attract customers and grow his business. User tests confirmed that the product met and exceeded the initial project objectives by delivering a friendly, approachable and user friendly interface and experience. I was happy to hear from Chris that we hit a benchmark with users in the age 55–70 category having positive experiences using the product to find yard work and snow shoveling contractors.
Our process to take Pareto from concept to market had four distinct steps with rapid iteration refining the product throughout the process:
- Initial consultation
- Storyboarding and wireframing
- Design system and product mockups
- Product development
Initial consultation
The earliest phase of the project involved a formal meeting where Chris and I sat down and ran over Pareto from start to finish. The meeting was fairly high level but allowed me to dig into specific areas of the product where I recognized a noticeably tricky problem in terms of user interaction or technology.
Three key points of challenge that we needed to tackle early on were:
- Payment processing. Because Pareto is a marketplace, how were users going to pay contractors and how were contractors going to receive those payments?
- Accessibility. Pareto needed to function for a huge variety of users, since a target market identified early on was the 60–85 demographic.
- Cross-device. Pareto needed to be fully feature complete on a smartphone, since there was no budget for an application.
Payments were quickly hashed out, and we chose Stripe Connect as a viable method to create the marketplace platform. The other two challenges would need some design work to solve fully.
Storyboarding and wireframing
To address these challenges, we began by wireframing the application. This would allow us to quickly and rapidly assess and iterate on if we were meeting these challenges without needing to build or dig too deeply into the product. Wireframing helped us assess if we could make the site as accessible as possible by making sure we could design the site to have two clicks reach or less from all ‘root’ pages (such as the login or main page).
Design system and product mockups
Our design system was formulated around three general principles.
- Use what’s familiar. We looked at platforms such as eBay, craigslist, and other service platforms to find UX principles people already knew and loved so that we could riff of of them. This kept the product accessible to users, who didn’t want to learn an esoteric navigation system for solely our website.
- We kept the interactions as simple as possible. At it’s core, Pareto users, once logged in, can reach any part of the website or payment/selling process in two clicks or less. This simplicity meant the website was accessible.
- Testing. We tested out the designs with users from across demographics, and worked based on that feedback.
Once we had our system, we began mockups. We approached the mockup process with the principles of Atomic Design in mind, beginning with constituent elements and eventually moving upwards into fleshing out our wireframes into finalized pages.
Product development
I always savor the development phase because it marks the closing chapter of one half of most projects. Of course this is only partly true as unforeseen challenges have a way of cropping up midway through development. While never ideal, it’s easy for us to arrive at solutions because of our small team which allows us to work quickly and maintain good communication.
We built Pareto using scalable and future-oriented technology that has wide support from the development community and should for many years. We tested the product across various browsers in order to guarantee a high level of consistency and set a benchmark of 85% global browser support for our CSS by cross-referencing with caniuse.com.
Recently, we added Open Graph and Twitter Cards support to increase click-through rates and the quality of social shares. Now when someone shares a page on a service that supports the Open Graph protocol — that includes iMessage, Facebook, Twitter, Whatsapp — a specially designed image, page title, and short description will display alongside that link.
Overall we are very happy with the outcome of Pareto, but more importantly, Chris was:
My experience with [Field] was nothing short of exceptional. Not only were they able to capture the vision that previously existed only in my head, but they executed it perfectly and exactly as promised. On top of their work, Jesse and Brett are awesome people and an absolute pleasure to deal with.
If you have a project that deserves the same treatment Pareto received and think that we might be a good fit, get in touch with us over at our website. We’d love to chat.
