COTTAGE

Creating onboarding flow for start-up clients and re-designing the landing page of the current website

Client

Cottage

My Role

Project Lead, UI/UX Designer

Live Site

You can view the live site here

Duration

3 weeks

Methods and tools

User Interviews, Heuristic Evaluation, Competitive/Comparative Analysis, User Persona, User flows, Wireframing, Prototyping, Usability Testing, Style Guide, Google Drive, Figma, Asana, GitHub.

 

Overview

Cottage is the freelancing platform for Startups and Software Engineers. Currently, there's an existing freelance mode for developers, but they're still struggling with attracting more clients and keeping them engaged. I worked closely with the client to create, design, and establish their online onboarding flow for clients.

The Problem

Cottage CEO manually sets clients up on the platform! Start-up companies get excited about the platform but do not complete onboarding.

 

The Solution

Collaborating with three other designers, we designed an onboarding flow for clients through Cottage GitHub plugin to help anyone with some technical background to post short-term tasks and be able to invite other team members.

The design thinking process was followed to ensure that design decisions were supported by research and feedback — with an iterative process during the testing phase.

What technical steps must a customer complete to get up and running with Cottage?

  1. Create a Cottage account

  2. Must have source code stored in GitHub

  3. Code is imported from GitHub to Cottage's cloud-based IDE

  4. Customer provides variables and initiation code to Cottage

  5. Customer sets up billing through Stripe payment system

User Interviews

 

Key Takeaways

  • An obstacle for the non-technical founder is not understanding exactly what to specify for freelancing work.

  • ​Varying levels of concern for security and IP, but security on secrets/ permission is a common concern.

  • Web-based IDE is a strong product differentiator but needs clearer information on how it works.

  • Quality of work and trustworthiness is an important concern.

Competitive Analysis

 

Key Takeaways

  • All competitors have an onboarding feature.

  • All competitors have freelance projects in multiple fields.

  • All competitors have a community where users can learn and grow in their fields.

  • All competitors have learning resources on their websites.

The Persona

Alex , Devs Team Lead

“The team and I have a lot on our plate, we need a talented freelancer to come on board and help us out with some of the smaller tasks, so we can focus on the more prominent ones.”

Alex needs:

  • Hire a freelance developer, short term, to complete a task so that his team can focus on a bigger, more important task.

  • Feel confident in the quality of work the freelancer will provide.

  • Know that the Cottage site is secure.

 

“Alex needs a way to quickly and securely work with freelance talent on short term tasks so that he can focus more on long term product roadmap and larger projects”.

User Flow

 
 

Creating a user flow helped with prioritizing which screens were critical to design first. It also helped us to see the onboarding flow was convenient for the user.

Low Fi Wireframes

 

Home and Pricing

For the Homepage and Plan Pricing, we closely followed a new page design the Cottage team was already working on.

 

Main Onboarding

In the main onboarding we aimed to make a process that would feel quick and easy, but would also provide on-screen answers to some of the questions and concerns that had come up in our user interviews during the Research phase.

 

Dashboard & Progressive onboarding

Because of the amount of information to communicate, we decided to go with a large overlay that the user could choose to dismiss and return to later by clicking on a reminder message in the lower left corner of the screen.

 

Client Dashboard

We wanted to keep the Client Dashboard simple and easy to use, allowing the client to quickly add task and see its progress.

User Testing

We tested our prototype with 5 participants.

  • 2/3 users had questions or confusion about the pricing plans and wanted a more detailed explanation.

  • 2/3 users wanted a more specific explanation on the error message about what specific error had occurred.

  • 3/3 users completed all steps in the onboarding flow and were not inclined to drop out and finish later.

  • 3/3 users said the overall onboarding process was clear.

 

So what was the design outcome?

Content Iteration: Pricing Page

Based on our usability testing participants wanted more information and clarity on this page, so we revised the content in our next iteration.

  • Original Text

  • Revised Text

Content Iteration: GitHub Steps

We added an instructional message at the beginning of the process explaining the steps, and also giving users without a GitHub an option to explore Cottage full-service plans (currently the only option for these users).

  • Original Lo-Fi Design

  • Revised Hi-Fi Design

Hi Fidelity Prototype

Next Steps

  • Continue to test and refine full onboarding experience.

  • Design a dark mode option, and the ability to toggle light and dark modes.

  • Improve error messaging and error handling options including live chat support.

  • ​Build out full experience for new "Invite Team Members" function (including user flow for receiving and following an invite email).

As this project has launched recently (February 2022), new data around increases in conversion are yet to be tracked, but hope to increase!