Head of Design & Front End Developer
Legal Tech
& SaaS
2018 - 2020
advofirst Logo
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
  • Front End Development

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 has short legal and other specialized questions, but the waiting 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 monetize previously unpaid micro-advice services and increase website traffic.

My Role

As the Head of Design, I was responsible for the design aspect of the whole project. 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 also developed the Front End.

The 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:

Color Palette

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 End result 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 diverse 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 month. The plan of any user flow is: avoid confusion & don't overlook anything. The flow chart begins with the consumer’s entry point of 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.

The Final Product

The redesign of the web page had the main purpose of increasing conversions and improving brand awareness.
advofirst Webpage

Social Media Assets

Posting on various different social media channels had a profound impact on growing the list of users interested in the product.
Instagram Prmo
advofirst | Chat