logoPortfolioBenchmarksArtikel
dsh/dsh-hero.webp

Deutsche Schadenshilfe

Deutsche Schadenshilfe is the leading company for fair and independent property damage settlement. It is formed from a network of experienced lawyers, experts, and restoration companies. It supports the successful settlement of water, fire, or property damage claims. Deutsche Schadenshilfe acquires the majority of its customers through organic content marketing. Approximately 200 articles provide users with comprehensive assistance on property damage settlement.

An agency recently revised the website design with long delays and numerous revisions. Despite the redesign, the desired increase in conversion rate failed to materialize. The mission was clear: a professional redesign designed around the actual needs of users, with the goal of optimal user experience and lead generation.

Results

+300%

qualified leads

+150%

effective dwell time

+50%

interactions

Metadaten

Industry
Insurance
Size
10-20 Employees
Value
20.000€+
Tasks
    Strategy
    User Research
    User Experience
    User Interface
Tools
    Adobe XD
Date
2021 - 2022
Website Link

Analysis: Step 1 - Visual identity

The first impression

The first part of my multi-stage process model involves a detailed user interface analysis. In doing so, I execute all options of the customer journey that the website provides.

It was quickly apparent why the web page did not convert as desired. It wants to create trust through the dark blue tone, in combination with images known from insurance companies, to create trust. However, this first impression fades immediately of a structure that does not meet the user's wishes, over-complex visuals, faulty functionality, and an unattractive design.

The design is unusable due to lack of structure

The design is unusable due to lack of structure

There are no clear spacing rules

There are no clear spacing rules

The effects

Poor navigation and unstructured content are among the main reasons why users leave a website prematurely. Coupled with inadequate and sometimes unreadable mobile rendering and no consistent guidelines regarding color tone, color usage, spacing and font sizes, the website does not create a good first impression. The site appears unstructured, inconsistently designed, and poor for mobile devices.

Users make an initial judgment of the quality of a product or company based on its design. Products are even rated as more usable, even if they have the same functionality but a higher-quality design. Therefore, what does the unstructured design of the website convey to me as a reader? How structured and high-quality do I perceive Deutsche Schadenshilfe if the web presence creates a different first impression? This problem needs to be solved.

Analysis: Step 2 - Experience

In the second step, I performed a UX analysis of the blog articles. Blog articles are the most important lead aspect of the website and thus receive the highest focus in the analysis. Among other things, the following questions are answered:

  • What information does the user receive about the articles?
  • Is the content of the article communicated as quickly as possible?
  • Are conversion elements implemented in a supportive or disruptive way?
  • Can texts be read efficiently through the right formatting?

The error analysis contained over 60 points for improvement, which were categorized in detail, described and estimated for their impact on conversion rates.

Analysis: Step 3 - Data

Google Analytics & Hotjar

In the final step of the analysis, data-related tools such as Google Analytics or Hotjar are used to gain a more detailed insight into user behavior. Here, the following questions are answered:

  • How do users behave on the website?
  • Which sections arouse the visitors' interest?
  • Which sections don't work?
  • What frustrates visitors?

The first three steps can be used to make targeted changes that sustainably improve the conversion rate and other KPIs.

Solutions Step 1 - Design System

I brought together the knowledge gained in the analysis and created a new concept for the design of the articles. Before that, I created a minimalist design system with color values, fonts and spacing rules.

#005a9f
#0071c7
#0087ee
#d6ac02
#f1c102
#fedc56
#121520
#343c5c
#4b5683
Utopia

Utopia

Avenir LT Pro

Avenir LT Pro

Solutions Step 2 - Redesign Hero

Previous status

The Hero Banner presents essential information briefly and concisely to give users an initial overview. However, the user only sees two images and links to other articles, which does not provide any added value. Users also have to read a long introductory text. They do not get an indication of the reading time or summary in a few words. The user is forced to invest time without knowing whether the article provides added value for the user's goal.

afterbefore

ALT

NEU

Users recognize the added value of the article in the new design

New status

Users can see the title at a glance and the content of the article described in brief headings. Furthermore, a concise thematic classification is provided via breadcrumbs, author info and reading time. This not only increases the efficiency for a quick classification of the added value, but also the confidence in the quality of the article. Below the banner is a table of contents, so that the user can target the best section for himself.

afterbefore

ALT

NEU

The table of contents is quickly scannable

Solution Step 3 - Improve reading experience

Readability

After analyzing the customer journey, user experience, and user-related data, it was determined that much of the focus needed to be on the readability of the text. Therefore, to improve, an easy-to-read font was introduced, along with better font sizes and scaling. Spacing in the text is more efficient, and line lengths and heights have been optimized.

afterbefore

ALT

NEU

The readability of the texts was optimized on numerous levels

Call to Action

CTAs have been made more emotional: Short, concise key points in combination with trustworthy images (customers and consultants) arouse emotions and create trust.

afterbefore

ALT

NEU

Call to action with a heightened emotional level
afterbefore

ALT

NEU

By request, some CTAs were transferred to the modern design

Solution Step 4 - Contact form

Recognize complexity

The contact form is actually one of the most challenging components, as the form is the interface between the customer and the company. Therefore, special attention must be paid to optimization.

Time required

The user has to fill in too much information such as address or area code. In addition, many fields do not use the autofill function, which significantly increases the time required. Users also have to estimate the amount of damage or provide information about the desired service provider. These fields should become optional or allow answer options such as "unclear".

Usability

Fields do not hang together categorically and sometimes take up a lot of space, which creates an unbalanced impression. Some texts can hardly be seen and checkboxes can hardly be clicked.

Graphics

Icons are pixelated and give the impression of low quality. The selected background image arouses false emotions and is not visible in a meaningful way in mobile view.

Process

No clear information and instructions: Phone number and opening hours are left blank with no information about the contact person. Furthermore, no information is conveyed on how to proceed after filling out the form: Who is the recipient? What is the process?

These items were modified based on the following questions:

  • Which user inputs are necessary?
  • Which elements need to be visually emphasized?
  • How is maximum usability ensured?
  • How can the entire form be made visually appealing?
  • How do we inspire trust?
afterbefore

ALT

NEU

The new contact form is significantly simplified and creates trust

Solution Step 5 - More pages

Blog Archive

The blog archives were designed too much in the landing page style. The main focus should be user-friendliness, especially the easy search function. After the change, the most important articles are highlighted via guide. We will suggest the most frequent search queries, and the search will run in real-time. Users can use this to filter content in a targeted manner.

Homepage

Based on the initial analysis, improvements in usability, communication and trust could be implemented.

Usability

The focus is on direct communication with the customer. The homepage also becomes the entry point for the entire blog archive. A sticky navigation allows fast finding of relevant content

Communication

The homepage needs more information about the company. Questions such as "Who are we?", "What do we do?" and "What sets us apart?" should be clearly conveyed.

Trust

A variety of factors are implemented to gain the trust of customers:

  • Knowledge transfer to symbolize expertise
  • Presentation of the company
  • reviews
  • Trust symbols
  • Links to independent review platforms

Landingpages

Previously, the landing pages were overloaded with too much text, which also appeared confusing. Now all the benefits are visible at a glance and the claims consulting process is better visualized. The person in the Hero banner inspires confidence. Important content is quickly accessible via sticky navigation. User ratings optimally round off the trust-building process.

afterbefore

ALT

NEU

The content of the page is quickly recognizable
afterbefore

ALT

NEU

Textual representations have been optimized for reading efficiency

Prospects

Next steps

The new design is currently under development (as of December 2020). Following the development, we must ensure the ongoing use of analysis tools. Initial A/B tests are also to be carried out to check various conversion elements for their effectiveness. Meanwhile, Deutsche Schadenshilfe will continuously expand the content to ensure organic growth. Further design optimizations or tools such as VideoAsk for communicating with customers can be tested.

Present search

The current search is implemented in a very user-unfriendly way. The search function should be optimized as a core component of the website. This includes:

  • A categorical division of the results
  • A fixed number of results without a scrollbar
  • Correctly formatted markers of the search results
  • Background overlay when search is active to improve contrast
  • Highlights of targeted items
  • Hiding of CTAs in mobile view to minimize visual competition

I look forward to continuing to guide Deutsche Schadenshilfe through these steps.

afterbefore

ALT

NEU

The new search takes user intentions into account
Process Description

Process Description

Reviews

Reviews

Costs and Cost Assumption

Costs and Cost Assumption

DSH Benefits

DSH Benefits

Blog Archive

Blog Archive

Landingpage

Landingpage

Blog Article

Blog Article