Cottage is a startup that connects freelance developers with companies in need of short-term task-based development support. I worked directly with Cottage co-founders Hunter Hodnett and Neil Granberry as our clients.
The UX process began with a client discovery meeting and user research. I created a detailed task analysis as part of the research phase because the Cottage client did not have existing documentation about the complete customer onboarding process.
As a business which connects hiring companies to qualified freelancers, Cottage serves several types of users. The project brief was to focus on new "Demand-Side" customers only, and design an onboarding experience for this group of users. The sign-up process for "Supply-Side" expert freelancers was not part of the project scope.
Startup founders and CEOs with limited coding knowledge.
May lead a small in-house dev team, or act as a one-person product and dev team writing all the code themselves.
Experienced development professionals looking for full-time or part-time freelance work.
The customer onboarding process was more than just creating a new Cottage account. I met with the Cottage client team to understand and document all critical steps and dependancies.
I divided the onboarding process into three parts due to its complexity and number of steps. I grouped only the few most critical steps into the sign-up flow, and opted to use a progressive onboarding feature to walk customers through the remaining steps at their leisure to make set up feel less cumbersome.
After outlining all the steps a new customer must complete to be fully up and running with Cottage, I mapped these out in a user flow diagram using FigJam. After several iterations the final version below served as the basis for our design.
In the design phase I focused on content and copywriting while some of my UX teammates focused on visual design ideas and design system creation. Design iterations included two rounds of usability testing, the first with a low-fidelity prototype and the second with a revised high-fidelity prototype, before arriving at our final design.
I included the text from the client's existing pricing page in our low-fidelity prototype and first round of usability testing.
Based on user feedback I rewrote the pricing page copy with these improvements:
I aimed to keep the initial sign-up flow as quick and easy as possible while still including the critical GitHub import step. The final flow include a 3-step process - Create Account, Login to GitHub, and Import GitHub Repository - and a confirmation message before directing new customers to their account dashboard.
The low-fidelity design included explanatory details on each step.
In the final design I replaced this with a message at the beginning which explained all the steps. This set clearer expectations for users from the start and made it possible to streamline the rest of the flow.
Since the GitHub import steps are required for all self-serve plans, users without a GitHub have an option to learn about Cottage full-service instead.
Cottage's existing customer UI consisted of a simple Kanban-style dashboard for managing developer tasks. I layered the progressive onboarding steps - which covered creating a task, adding coding details, and setting up billing with 3rd party vendor Stripe - over a version of this dashboard.
Given the volume of information, I opted for a large overlay that the user could choose to dismiss and return to later via a reminder message in the lower right corner of the screen.
Throughout the process I sought feedback from our clients and from our usability testers to ensure I was using terminology that was technically correct and commonly understood by our target audience of software professionals.
The final client deliverables included high-fidelity Figma wireframes and prototype, a basic style guide, ideation for a next-step dark theme option, and primary and secondary user personas based on our user research.
The Cottage clients were excited about our new designs and research insights, and started incorporating some of our feedback into their landing and pricing page content right away. Seeing the user personas during our research presentation was especially powerful for our clients because it helped them "see" their prospective customer's wants and needs clearly articulated for the very first time, based on research.
Reach out in the contact form below or find me on LinkedIn.
