Aboga Online

Main screen

Role

  • User Experience Design
  • Visual Designer
  • Information Architecture
  • No-code developer

Team

  • Luis Martinez (Me)
  • Aboga Online

Client

  • Aboga Online

In the beginning, Aboga Online wanted to be everything for everyone.

I felt it was essential to manage expectations. I do believe with enough work and time, Aboga can become as big as it needs to be, but growth needs to be planned.

This is the list of all the features planned/mentioned at some point in our first meeting, and my final selection (marked with red ink)

The client

Aboga Online is a marketplace by and for lawyers. The website serves three purposes:

  • To be able to hire trustworthy, vetted lawyers
  • A place for lawyers to network and solve problems together
  • A hub where lawyers can find the latest news and webinars

The problem

I was tasked to design and program the website from the ground up. The major hurdle was to show that Aboga Online is not just another marketplace looking for cheap labor.

At the same time, we needed to attract lots of lawyers. So the value of Aboga Online depends on the size of its community.

The solution

I designed a website with three distinct sections:

  • Job Board
  • Community
  • Events

We grew to 200 members in the first two months.

The Process

Most lawyers are specialists, so they rarely dabble in other cases.

However, this doesn't stop their clients from asking fr other services. Instead, they are obliged to refer them to other lawyers. Lorelei approached me to design a site where lawyers could network and meet lawyers from other disciplines.

This site should allow consolidated lawyers to create profiles and show off their past work while letting recent graduates find mentors or network to find a job.

Iphone Mockup

The first description of this site was "LinkedIn for lawyers."

We looked for communities for lawyers and realized that there are only offline communities in Mexico. So Aboga Online was the first online community for lawyers.

Ipad Mockup

We decided to focus our research on other established communities. For example, designers, developers, digital marketing experts, etc., are already running online communities.

Most communities run either on "circle.so" or slack. We did a trial run with a few test subjects and realized that most lawyers are not tech-savvy enough to use either of these platforms.

Since the project was financed by investors with specific rules, paying a monthly fee for a saas was an obstacle as they preferred to pay once and forget about it.

So, we decided the whole platform would have to run on WordPress. This way, we would control every aspect of the platform.

We found there would be four primary users of Aboga Online

Avatars

Based on our interviews, we created three avatars. These avatars helped us understand the target audience and their paint points.

I created user flows for every type of visitor. This way, I noticed commonalities and designed the main screens.

User Flows

The next step was to map the flow an average user would take to signup for an event.

During this step, we noticed we didn't have a straightforward way to sign our users to the platform. We were relying solely on universities and practices to fill our databases

I used Figma to design three different homepages with the same content but different aesthetics. That way, it was easier for Lorelei to choose a look and feel for the rest of the site.

Mockups

Once we had a homepage, I could design the other screens.

Before coding, we created a no-code version of the site to see if our users were following the flows as we intended. We used tools like air table, carrd, and slack.

Detailed Mockups

We realized our job board needed a filtering system. People were posting low-quality jobs, which in turn hurt our reputation.

Our solution was to make all jobs submitted archived for review instead of automatically publishing on the site.

It also allowed me to show Lorelei and her investors all the moving pieces of the site. Thus, we prioritized which sections needed to be coded and completed first.

Different screens

We used FigJam, one of Figma's collaboration tools, to get the stakeholders on the same page. We were able to define the most important screens for one first step.

These changes meant we had to push the due date. However, we should save money and streamline the user flows in the long run.

We launched in March of 2020 and grew to 200 members organically in the next two months. However, it was put on hold when Lorelei, the project owner, became ill and was no longer available to carry out the project.

The domain is still registered, but it redirects to a blank page.

Site animation