ADVOFIRST
Role
Head of Design & FrontEnd Developer
Category
Legal Tech
& SaaS
Platform
Web
Timeframe
2018 - 2020
Focus Areas
  • Brand Identity
  • User Research
  • User Stories
  • User Flows
  • Wireframes
  • Mockups
  • Prototypes
  • User Interface
  • User Experience
  • Web Design
  • UX Copy
  • Social Media Marketing
  • Project Management
  • FrontEnd Development
Brief

The Problem

Lawyers and other freelance consultants often receive short questions that they either answer for free, or reject and miss out on potential revenue. The general population often have short legal and other specialised questions, but the wait time and consultation fees are often disproportional to the short nature of the question.

The Solution

Advofirst is a simple chat-based and payment transaction service integrated into a lawyer’s own website. It allows a client to instantly and securely ask a short question, pre-pay and receive and answer. It allows a lawyer to monetise previously unpaid micro-advice services and increase website traffic.

My Role

As the Head of Design I took the responsabilty to design the whole project from A-Z. To ensure the highest quality possible, the best user experience which works seamlessly on different screen sizes, and same design language on every platform. In addition, I alsi developed the frontend.

Research

Advofirst targets two user groups: the seller (lawyers) and the buyer (clients of lawyers) of legal services. In Germany, there are over 30k freelance lawyers with free capacity and over 7.3m internet users who have legal questions. Advofirst could realistically target 7% market share, onboarding over 2k lawyers and 510k clients. Two initial personas:

Design Kick-Off

After the design kick-off meeting, we started with the question: how can the service stand out in the sea of consulting services? Competitors include platforms which connect lawyers with clients and generic job forums, as well as generic freelance platforms with integrated payments. These products had one key component missing: color.

This led me to create a color palette that will drive the narrative of the site:

Brand Identity

The very first iteration of the logo represented the client and her/his customer "merging" by using our service. While the logo got a lot of externally - and a lot of press coverage, I was not fully convinced. Hence the re-design.

For v.2.0, I carried out a series of typographic experiments playing with the structure of the letter “A” and the concept of reflecting the technology dimension. The idea of "merging" still existed. The Endresult ist a mix of the letters "A" "V" and/or "first" as "1."

Interestingly, some see only the letters "A" and "V" others, "A" and "1.", while some see all three.
The logo is complemented by an eye-catching color palette.

Advofirst's first logo played a major role in creating the first social media assets, getting traction and the first customers. You can read more about that topic down below.
Fonts in use: Fira Sans + Heebo & Inter + PxGrotesk
Because a global rollout was always in the back of my head, I used a diversed group of Illustrations at different touch points with the customer.

User Flow

As simple as the idea sounded, the project got bigger with each passing months. The plan of amy user flow is: avoid confusion & don't overlook anything. The flowchart begins with the consumer’s entry point on the product and ends with the final action or outcome, like purchasing a product or signing up for an account. Depicting this process allows developers to evaluate and optimize the user experience and therefore increase client conversion rates.
ADVOFIRST FLOW CHART

The Final Product

The redesign of the webpage had the main purpose of increasing conversions and improving brand awareness.

Social Media Assets

Posting on various different social media channels had a profound impact in growing the list of users interested in the product
Onboarding Flow
Onboarding Flow

Present Your Passion to The Biggest Companies

Be the creator of your own presentation
89 k
Pixel Perfect Designs
Our product will speed up your work in creating your own presentations.
96 +
Modern & Bright Colors
Use the best color solutions to create wonderful presentation.
93 %
Free Google Fonts
There are hundred of beatiful fonts that you can use for free.
77 k
Carefully Named Layers
Want to edit more detailed? It’s easy with well organized & named layers.
Crossplatform apps for desktop and mobile devices to edit presentations easily wherever you are
Greatest future closer than you can imagine. Provide a new technology around the World and take a millons fans right now
New amazing feelings with our well designed application
Men Casual Wear

Your Daily Dose of New Inspiration

Socks
$3.99
Socks
$2.99
Wallet
$20.99
Sunglasses
$13.99
Bag
$43.99
Braclet
$3.99
Ring
$6.99
NEXT
Explore the advofirst Chat Widget.