Lithop

Complete redesign of the corporate website, the realization of a dark mode, and user flow testing to improve UI/UX and increase customer acquisition via web forms.

Year
2022
Category
  • Lithop
  • User Interface Design
  • User flow
  • Dark mode
  • Design system

During my time at Lithop, I had the opportunity to completely redesign the corporate website, working primarily on the User Interface Design. In a later phase, I also got to implement a dark mode and improve the user flow for better customer acquisition via web forms.

My Role

  • User Interface Design
  • Improvement of the user flow

What was achieved

  • A completely redesigned corporate website with a design system in the background
  • Evaluation of analysis data and improvement of the existing user flows
  • Additional implementation of a dark mode

Dark mode

In addition to redesigning the corporate website, I also implemented a dark mode in a later phase.

Dark mode
Light mode

Improving the user flow

Very very loooooong webforms

Lithop uses packages/web forms to attract customers to its services. However, the packages were not being used as intended and on a regular basis. So we analyzed the data we collected with Google Analytics and looked into our defined funnels and conversions to determine the user behavior. In doing so, we noticed that users were closing the page after a short period of time and abandoning the process while filling the form out without even clicking submit.

The web form seemed too long and confusing to users due to the large amount of content. Users were simply overchallenged with filling out the entire form to request a service and therefore abandoned the process – it was even difficult for me to display the entire form here in one image.

Improvement

Through brainstorming sessions and further data analysis, we concluded that users need a guiding hand and need to fill in their information step by step or they will abandon the process. Therefore, I have defined three key points that are important for the user:

  • The user should only see information that is currently relevant to him.
  • The user should know at any time which step he is currently at.
  • The user should receive a summary of the completed form before finally submitting it.

I then implemented a multi-step form. To avoid drowning the user in information, our next step was to reduce the content of the form to the essentials. This helped us create a clear sequence and flow to guide the user through the filling process.

This new type of multi-step form was then applied to all service packages in this category in a further step.

Iterative 4-step process


We had an iterative 4-step process where once we went live, we observed the data and user behavior and considered how we could improve it. After implementation, we repeated the process.