What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

[ Case study, Coming soon]

For this project, I collaborated with the advisable team, designed all the interfaces and interactions involved in communicating the product idea, and built the web project on Webflow.

The goal was to test a different approach to which clients interface with freelancers. The initial system was after clients are vetted and approved on the platform, an announcement is sent out for freelancers with the target skillset needed by the client to bid for the project.

It was working but wasn't a system that'll scale just because freelancers had to always pitch to different clients why they were a good fit for every new project that was available, which was a strain.

The goal was to design and test a new approach where the Advisable team helped freelancers write insightful case studies addressing a problem they encountered, their strategy, thought process,  how they came about a solution and the solution's respective fields.

This way, when clients are available, they review different solutions freelancers have worked on relating to their needs and then book calls with freelancers to show their interest in working with them.

This way, freelancers write fewer pitches and get to converse with clients who are interested and have the potential to convert. Also, clients find it easy to chat with freelancers with experience in the solution they are specifically looking for.

The Problem

The previous existing interaction with clients and freelancers was; clients get to the platform, apply as clients, work with the Advisable team to create a proper brief, brief is sent to freelancers who fit the criteria of services needed.

‍

These freelancers then apply to work with the clients, highlighting why they are a proper fit. The clients review the freelancers based on their proposal,  experience and decide what freelancer the project will be awarded to.

‍

‍

It was noticed that this process wasn't scaling well because of the constant need for freelancers to always pitch to clients why they are a good fit every time a new project is available. The goal was to test a different approach where clients get to read case studies of projects relating to solutions they need, written by different freelancers. The clients get an inside view of the problems freelancers have encountered, their thought process, strategy, and the outcome of the solution created. This gives the client more information to choose the right freelancer for the job.

Overview

Advisable is a freelancing network that allows companies to hire the world's best freelancing talent. Compared to other existing freelancing platforms’ business model,  where freelancers with different levels of expertise, are allowed to showcase their work and just anyone who needs services hires the freelancer, which lead to a whole lot of issues like the client getting ripped off, freelancers being under priced for their work, complicated payment processes, etc,  Advisable properly caters to both freelancers and clients. Where for clients, they get to collaborate with the advisable team to generate a proper brief. They support the client to properly explain (to the tiniest detail) the problem statement, the type of solution they need, and the type of people/ services they are looking for.  Clients are certain they are going to be interfacing with freelancers that have a proven line of experience and skill set because of the proper screening process each freelancer  goes through to validate their skill. 

Advisable also has built-in task management tools for clients to track the progress of work done by the freelancer, easy payment process, and fosters client and freelancers collaboration.

‍

"We just want to do the work" - every freelancer

‍

For freelancers, Advisable makes sure they are only presenting them with vetted clients and quality projects that meet the freelancer's payment standard, (so conversations about under-pricing are completely eliminated). The project management tool gives freelancers flexibility to highlight tasks they are working on without the feeling of being micromanaged.

‍

You don't feel left out

‍

Advisable also has a community of top freelancers where freelancers connect with others in similar or completely different fields of expertise to learn, share knowledge, and collaborate on projects.

‍

‍

Goal 🎯

The goal was to test a different approach where clients get to read case studies of projects relating to solutions they need written by different freelancers. The clients get an inside view of the problems freelancers have encountered, their thought process, strategy, and the outcome of the solution created. This gives the client more information to choose the right freelancer for the job.

Thought process

Wireframing, mockup design, dev implementation

1st iteration

The first approach was to create a single page where all projects certain freelancers have worked on are displayed. Each case study gives a brief description of the company, what the project was about, the freelancer's process of execution, and the results from the project. At the end of reading the case study, we market the freelancer and create an opportunity for potential clients to connect with the freelancer.

‍

‍

Moved on to developing the website on Webflow.

Leveraged Webflow's animation interactions to create an infinity Marquee for the hero section, and used Webflow CMS feature to properly manage, update and display the content for the page. Form submissions were handled by Webflow & Zapier.

‍

‍

Results of 1st iteration

After testing the page with potential clients, some of the common feedback that was shared was it seemed like a "lengthy read". Readers had a hard time navigating to specific freelancers they wanted to read about and it felt like too much content was being displayed at the same time which was causing cognitive overload, reducing conversion, and had a lot of drop-offs from the site. Another thing that was noticed was it felt too "salesy". Yes, we wanted people to signup to always receive mail notifications about new case studies released but the current approach had a signup request before showing the readers the actual content (value) which was a turn-off to readers.

‍

"Imagine asking for payment before even seeing what the product looks like"

‍

Continuous iterations

The solution to reducing too much content thrown at the reader at first glance was to create an index page where we highlight what the case studies were about before the readers decide what case study they'd love to check out first.

"Value first, sell later. "

Have you ever been to a school library, where you go to a shelf and walk slowly with your eyes horizontally scanning through the books trying to find what you're looking for?

That was the experience I wanted to replicate. Decided to design with a horizontal scroll interaction in mind. Where readers can swipe/ scroll/drag to move left or right to view case study cards searching for what piques their interest.

‍

Began to design a horizontal card stack layout for each case study, testing out multiple styles, colour schemes & symbols that properly communicated the idea of a relationship between the freelancer and company, and can scale properly with any company's visual brand.

‍

‍

‍

.. and after a couple of iterations, found a sweet spot!

The team decide on the preferred style and symbol, and we had a winner!

‍

Development

Moved on to development on Webflow. For the horizontal scroll interaction, the common Webflow horizontal scrolling tricks didn't seem to work for me because they weren't properly scaling depending on screen width so did some further research and found a code pen implementation on CSS-tricks, made some personal tweaks and it got the interaction I wanted.

‍

‍

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.