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
There are no clear spacing rules
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.
Avenir LT Pro
Solutions Step 2 - Redesign Hero
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.
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.
Solution Step 3 - Improve reading experience
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.
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.
Solution Step 4 - Contact form
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.
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".
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.
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.
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?
Solution Step 5 - More pages
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.
Based on the initial analysis, improvements in usability, communication and trust could be implemented.
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
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.
A variety of factors are implemented to gain the trust of customers:
- Knowledge transfer to symbolize expertise
- Presentation of the company
- Trust symbols
- Links to independent review platforms
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.
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.
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.
Costs and Cost Assumption