MILESTONE TOOL & TryMilestone.com
Duration: 17 Days
My Role: Research, Plan, Design, (Phase 2) Design Lead
Team: (Phase 1) Kevin Kim and Me (Phase 2) Anne, Sugandh, and Me
Toolbox: Notion, Miro, Hotjar (planning), Figma (design & prototyping), Zoom and OtterAI (interviewing) Asana (project management)
Objective
Research and design the interface for a platform that will allow freelancers to find work and build up their business. As well as drafting and deploying the design of a website to promote the tool and attract people to participate in the alpha testing.
Challenge
The client was in the early stages of start-up and the company's mission and product weren't solid. The scope of our project would change to reflect our research. After the initial sprint we had to keep pace with the developer team who were quickly implementing our design.
Result
A modular platform that is easy to learn, giving freelancers all the tools they want to help them build their business. While also designing an effective logo, and website that sells the tool to freelancers enable the clients vision
Click image for more details
The Process
![research, black and gold[Converted].png](https://static.wixstatic.com/media/56f0d2_308eb8496d624f5e97b17efe9959b0a6~mv2.png/v1/fill/w_83,h_83,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/research%2C%20black%20and%20gold%5BConverted%5D.png)
![research, black and gold[Converted].png](https://static.wixstatic.com/media/56f0d2_308eb8496d624f5e97b17efe9959b0a6~mv2.png/v1/fill/w_123,h_123,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/research%2C%20black%20and%20gold%5BConverted%5D.png)
Learn
Hotjar
Google Analytics
Competitive Comparative Analysis
Ask
User Interviews
Usability Test
Card Sort
Understand
Affinity Map
Personas
User Flows
Redefine the Problem
Design
Figma Wireframing
Figma Prototypes
Sketch Branding & Moodboards
Site Maps
Navigation Flows
User Testing
Deliver
Keynote Presentation
Google drive
Learn: An Introduction to the Product
When I was first brought on Milestone was just an idea dreamed by founder, Jackson R. He had done some research on the marketability of the product but had no idea what it would look like.
"
I envision a product that will revolutionize the way freelancers run their business, by automating much of their processes, and balancing the dynamic between client and freelancers.
Jackson R.
Founder and CEO of Milestone
"
I was initially brought on as part of a three person team to work on a three week sprint to create the first iteration of Milestone's design. Later I would return to milestone this time as the UI Design Lead to guide another 3 person team to create the design for an alpha launch. Our first task was really to understand the competition and how we can improve upon what they were doing. While also reviewing comparative industries to look at how they organize their tool.
Competitor Research Upwork: the Big Brother of Project Management
Pros-
-
Easy to find clients
-
Tax Forms already filled out and income is tracked
-
Payment is guarantied, as clients pay in advance
-
Dashboard is simple and intuitive
Cons-
-
Freelancers bid against each other driving their prices down
-
20% of income from each project taken by app
-
Costs to place a bid, clients will frequently ghost freelancers
-
App has too many surveillance tools that can't be disabled
-
Impossible to collaborate with another freelancer on the site.
Summery: Upwork is a strong tool for finding work, and has many great resources for running a business. However freelancers feel exploited by extreme price structure and levels of surveillance like taking frequent screenshots to monitor what apps are open, or flagging words that suggest freelancer and client would work somewhere outside of the app.
Another element that needed to be researched was the website trymilestone.com. Jackson quickly designed this to advertise his tool to freelancers and attract users to the alpha testing once that stage was reached. One of my tasks was evaluating the website using Google Analytics, Hotjar, surveys, and usability tests to see how users were reacting to the website.
TryMilestone.com Analysis
-
Color and style weren't accessible to all users
-
Webpage was too long, heat maps and analytics reported users dropping off short
-
Text was too wordy and needed to be condenced
-
Images didn't reflect tool and had a very different design from product, looked aged against our design
-
Heat map showed that users thought images were interactive
Ask: Talking to Users
Over the course of this project we spoke with 16 freelancers from a wide pool of professions to understand their goals and pain points.
What is the work process for each profession and what tools can be automated to improve work flow?
How frequently do freelancers collaborate with others, how do they split and manage payments?
How do freelancers find clients and grow their business, and where are they struggling?
"
I have to dedicate one day a week to work on the admin side of my business and find new clients
"
We also interviewed 8 clients and agencies to learn what clients need, if we can't attract clients, then freelancers wouldn't want to use our site.
$
What do clients look for when trying to hire freelancers?
How do they prefer to handle communications or be involved with the project?
How would they respond to our plan of making them find freelancers instead of having the freelancers come to them?
"
A good freelancers is able to work independently. I don't want to have to be involved in every step of the project.
"
Understand: Applying the Data
1. Freelancers Value Independence
They wouldn't be working for themselves if they didn't enjoy the freedom of freelancing. They want less oversight on projects.
Successful freelancers have a system that they have already set up to optimize work flow and business scaling
2. Managing and Growing Business is Frustrating
Freelancers want to do the work that they enjoy doing. Managing their own business is secondary. They often put it off or choose to dedicate a whole day to focusing on it, when they could be practicing their profession
Newer freelancers can get frustrated easily by finding clients. Pitching to projects can cost extra money for uncertain results. Most report that only 1/10 pitches get a response and 1/30 pitches lead to a job.
3. Freelancers Have a Wide Range of Experience
A wide range of freelancers can practice their profession online. Depending on their field they may not even have all that great of an understanding of current gen technology.
Fields like Copy Writing or Illustration wouldn't need as many project management tools or onboarding documents as a Software Engineer or Video Editor.
With this in mind I drafted 3 personas to help understand our users, one for the client and two for freelancers at different tech proficiencies.
Mini Persona: Freelancer
Tanya W. the Adaptive Entrepreneur
30 year old freelance software engineer
Goal: Take advantage of automation to quickly upscale and their company.
Motivation: Optimizing their business management allows
Frustration: Spending a lot of time and money on trying to find clients with little payoff.
Jim K. the Enterprising Traditionalist
50 year old freelance copywriter
Goal: Work for themselves by building a business and finding clients
Motivation: Creating a healthy balance between the work the love and their home life.
Frustration: Having to adjust to new tools or learn new features they won't use.
Andre F. the Responsive Manager
45 year old freelance copywriter
Goal: Find a reliable freelancer to contract work to
Motivation: Hiring freelancers to take on certain tasks frees up company resources
Frustration: Feeling like they have to keep spending time overseeing the project they hired the freelancer for.
Now with a better understanding of the three types of users, I was left with some questions for the design to solve
How can we optimize Tanya's process with the tools she wants without overwelming Jim?
$
How can we assist Andre in finding a freelancer and assure him that they will be reliable?
How can we connect Tanya and Jim to Andre without them feeling drained or exploited?
Design, Test, Iterate
Envisioning the Tool
The most important aspect of Milestone was to build a tool that would help fit all of the needs of our freelancers. The onboarding process was identified as the most painstaking element of the freelancer's flows. We had to create a form that could produce a legal contract in a matter of minutes. In order to build an understanding of how to make detailed forms flow quickly we tested different styles of displaying the form.
From my research, I determined that users preferred no more the 10 questions per page and less than 10 sections on the status bar.
I identified what elements can be completed through automation. Such as project outlines, freelancer, and client information.
Upon completion of the form, the freelancers can save the template for use on future projects with minor changes, such as price or client info.
.png)
Feedback from Testing:
Raves
-
Freelancers can now see directly how automation optimizes their flow
-
Form is intuitive and flows easily
-
The review section at the end allows users to double check the wording of the documents.
Rants
-
Form was designed for large scale projects, smaller projects wouldn't need sections like confidentiality or social media
-
While it is nice to view the contract, there is no ability to directly edit the text.
We addressed their concerns in subsequent iterations by adding a menu of the start of the form. This allows users to select what elements they need on their contracts creating a modular version of the onboarding process. When meeting with the developers we suggested a text editing feature for the contract which was coded for the alpha build.
View a prototype to see the quick and painless process in action.
.png)
The next imporant feature I needed to design was the dashboard that would hold the tool together.
-
I opted to go with a sidebar to allow more space for contracts and projects as a user's business expands.
-
The main tabs would open in the side bar to reveal more features. This would prevent new users from being immediately overwhelmed.
-
We planned to make the sidebar collapsible to enable users to maximize the workspace
View a protype of the dashboard and central navigation of the tool.
Selling Milestone
As our team was testing the design of the tool, the alpha launch was rapidly approaching. The website used to promote the tool needed to be reworked to better explain and sell Milestone. We wanted something that would excite readers and turn them into users. After reviewing the initial page designed by the CEO we started making a new design.
_ed.png)
Changes from the Original Site
-
Voice and tone were edited from the rebellious and casual tone into a more direct and neutral voice.
-
Pharagraphs of text were shortened to increase readability
-
Irrelevant images were replaced with videos and pictures of the platform
-
The color scheme and iconography match that of the tool.
Testing
We invited current users of the alpha test to visit the website to test if our platform was being accurately represented. We also surveyed people unfamiliar with milestone to understand how people outside our current pool would read it.
Using surveys as well as heatmaps from Hotjar we gathered our responses.
Feedback from Testing:
Raves
-
73% increase of users reaching the bottom of the page.
-
Testers retained a better idea of the product
-
Readability was increased
-
Video helped form an emotional connection between users and product
Rants
-
Text was too small, black text on a blue background was too hard to read.
-
Users wanted more videos instead of still images of the platform.
.png)
Further iterations
-
Further emphasis on readability, larger text and white text boxes
-
More videos to help explain the process
-
Blocks of color were replaced with background images.
TryMilestone.com is a startup in its early stages as of writing the website is live, however it could be taken down in the future. I will leave a link to the prototype if the website doesn't exist anymore.