Sebastian
Grochocki

Senior Web Designer
at Amboss GmbH

Introduction

As a senior web designer, I am responsible for creating and aligning the user interface of the digital product on the website. One of the tasks includes conducting user research through surveys, analyzing heatmaps, defining and executing AB tests, and split tests. Moreover, I am happy to share my knowledge with my colleagues in the team by doing presentations and workshops.

One of the key achievements:

  • Developed unified (website - product), dynamic, and scalable design system.
  • Increased conversion rate on homepage(US) about 24%. Improved engagement in general. *September 2020
  • Contributed to the CMS migration by developing the roadmap and setting the SCSS standards for the React components.

Landing page design (implementation: react static app)

SVG animation of side-by-side product's feature (implementation: after effect animation exported to JSON / Lottie)

The Design System

Resposnsive space fundamentals and grid system

I have developed the entire design system for the website based on the product. Space fundamentals are the foundations of the design system. They are repetitively used in atomic design methodology to keep all components consistent and ready to scale.
As an innovative solution, I introduced responsive REM scale based on the document root font size.

Buttons, typography, icons, and top level components

  • Built scalable and responsive components with Auto Layout feature in Figma as it is close to the implementation process.
  • Created responsive and high quality SVG animations implemented with Lottie library.

Icon is one of the core components. The icon library contains over 200 SVG assets which sometimes needs to be used in different color variations. To avoid duplicates, I decided to apply class names in Adobe Illustrator by using predefined graphic styles, and at the end I have sanitized SVG code from inline styles. The color manipulation is done with toggling apropiate class name, and all the icons codes are bundled into one JSON file. See icon library.

CRO: Split Testing

Pricing page

The pricing page is one of the key pages which has to be constantly improved in the agile cycle. In order to optimize it, I have to ensure that our users understand the membership model. To achieve this, I work closely with User Research Team. We launch surveys, and analyze heatmaps and data coming in from the AB tests or split tests.

On the ideation stage, I work together with Product Manager. We create many low-fidelity wireframes based on the input from main stakeholders. The pricing page is also a bridge between the product and the website. Therefore, I have to work closely with the product team with a strong focus on user experience.

Pricing page design (implementation: Wordpress / ACF)

AB testing

Homepage

Main KPI was to increase engagement and improve the conversion rate and the click-through rate. The secondary goal was to align the homepage with our target group (based on personas) - in this case, the main focus was on students in the US market. I started with simple AB tests to validate each element on the page. To guarantee the quality of data, I have only ran tests with minimum traffic of 30k sessions per page. As result, I have improved:

  • conversion rate about 24%
  • scroll range to the product feature section about 50% in comparison to the control version

An interesting fact is that two components with the same functionality but a slightly different user interface can have varying impacts on engagement and usability. In many cases, the results are unpredictable this is why it is crucial to keep our core value "listen to the customer" in mind.

LP design

paid traffic

SVG animations are scalable and super light for web browsers. One of the directions I would like to go is to create interactive interfaces of the product, simply with the SVG files.

CMS Migration

I work closely with the tech team on CMS migration. Tech tasks include building a product interface of the block builder, coding scalable components with ReactJs and SCSS, providing quality assurance, and planning marketing activities.