Flyeralarm

Introduction

In December 2017 I joined Flyeralarm as a digital Designer in the young UX Department. Beside me were 2 dedicated UX-Designers, 1 product manager and 1 team lead on board.  Later on 2 more visual designers joined. With a solid team we had enough manpower to face the challenges that awaited.
‍
Design up until this point had only been an afterthought at the company. It was not a driving force in the development process, and user experience suffered.
‍
Some of the struggles that we were facing at this point:
- Long development times with many feedback loops
- Dozens of design elements doing the same job
-Workflow issues with  development teams
-No user cantered approach to new features
‍
Over the next two years our team resolved all these issues and more, making a huge impact. Here I highlight the projects in which I made hands on contributions.

Upload

I created a new design for the uploader application. This is where users upload their final designs once they bought their print product. With thousands of different products on sale, there was a lot of complexity that our team needed to simplify. With an industry first of automatic error correction in uploaded print data, we reduced the refund rate dramatically. The easy to use and simple interface helped first-time users not feel overwhelmed by such a technical subject. The overall adoption rate has been great and steadily rising.

A crucial step in the success was clear communication with development teams. I joined sprint meetings to present new designs and discuss the feasibility. User flows helped to clear any misunderstandings in functionality.

Before & After

Online Designer

I led the design for the redesign of the existing online design tool. User can design and buy their print product right in the browser.

Responsive Webdesign

As a company-wide project to switch the legacy web shop to a responsive one, that would look great on all devices, I explored multiple approaches for how to structure the content and the look and feel of the product tiles. We also sped up page loading times by having each product picture in multiple resolutions, and loading only the best fitting one for your device. The Google Lighthouse performance score went from a slow 34 to a speedy 77, a huge improvement.

Landingpages

To better highlight the variety of products in a subject, our team created multiple pages with interactive elements and new design patterns.

Before & After

Design system

I led the project to establish a company-wide design system that helps the design teams to better communicate with development teams. The system was first established in Sketch and used by the design teams to find any missing elements. Afterward, it was switched to a front-end system where designers can make changes to the elements on the fly and push them directly to the live web shop. Developers then only need to copy and paste the frontend code and can focus on the backend.

Frontend

As the switch from a static screen design system to real code progressed, I got more and more involved in writing the production-ready frontend code. Our team created a software solution based on patternlab.io that helped us deliver it to all teams. With real JSON data we made sure that the designs were as close as possible to the live versions.

Our SCSS style guide made sure that any code written by other teams stays consistent. With my experience, I mentored team members on the usage of HTML, SCSS, and Javascript. The project was a huge success and sped up development times immensely.