After detailed analyses and extensive planning, we managed to create a web-to-print design tool that covers almost all the needs and wishes of the customers and the stakeholder . The design is fully responsive on mobile devices as well as on large displays.

A major weakness I noticed was the lack of price transparency on many sites, where the price is only displayed once the customer has put in the work of uploading one or more designs onto a product. To optimize and enhance the user experience, I decided to design a pre-configuration. This allows the customer to select which sides of a T-shirt they want to print and immediately see the price before starting the design. To ensure the best user experience for all screen sizes, I created three different layouts (mobile, inline and full screen). The biggest challenge was to use a single, non-repetitive HTML structure while taking advantage of the great power of CSS grid. This allowed the tool to achieve a very high loading speed with no unnecessary waiting times.

1. Mobile

When analyzing our own past data and that of our competitors, it quickly became clear that mobile use is a major priority for our customers and that our competitors have not addressed this effectively (or at all). The goal was to break new ground and create a user interface that would allow customers to easily configure print products on small smartphone displays. It was very important to me that the interface was similar to the native photo apps of iOS and Android for ease of use. On the one hand, I was able to leverage the benefit of a proof design, while on the other hand, customers can use the web-to-print design tool with minimal learning required.

The solution turned out to be a huge success. Just a few weeks later, we were able to reduce the drop-off rate on mobile by 29%.

2. Inline

The design tool’s inline version was already the biggest advantage of the old version, highly favored by customers. With almost all competitors, you have to press a "Design now" button and wait for a new page to load. This leads to longer waiting times and, presumably, higher drop-out rates, especially if the website design changes fundamentally after loading. That's why it was clear to us that the popular inline layout had to remain a main component.

3. Fullscreen

The fullscreen layout was initially a feature with question mark over it because I wasn't sure it would be used. However, it was just a matter of implementing and live testing to see if customers wanted to use the full-screen layout to configure the products. The weeks following the release have shown that this feature has been well received. (About 15% of desktop users use the feature, n = 500)

Analysis of the status quo

The first step for me was to analyze the status quo and learn from the strengths and weaknesses. To do this, I talked to colleagues who told me about the most common customer problems. I also went through customer messages to find that certain needs were not being met. Furthermore, with the help of Hotjar, I was able to identify some unrecognized problems.

Pros

• Fast interface without "Design now" button and long waiting times.

Cons

• Some customers were overwhelmed by the somewhat complicated user interface.
• Mobile version was only implemented in a rudimentary way and was considered difficult to use.
• Mobile users often moved the motif unintentionally when they wanted to scroll the page.
• The design does not comply with the usual design principles. (White space, separation, etc.)
• Layer functionality was very unintuitive and led to a lot of unnecessary clicks until customers understood it.

Competitive Audit

The competitive audit played a major role in the thinking process. Although we were only a relatively small team compared to the major competitors in the printing market, the aim was always to design the best web-to-print design tool on the market. It was therefore very important to know the strengths and weaknesses of the competition and to use them.

The result of the competitive audit was that many of the competitors have done a really great job. They offer very advanced tools that sometimes get very technical and leave even veteran graphic designers confused.

What nobody had at the time, however, was a functioning web-to-print design tool that could be used on smartphones. Some competitors completely blocked smartphone access, whereas others allowed it to be displayed on mobile while lacking all functionality.

With the findings from the analysis of the existing product and the competitive audit, it was very clear that mobile functionality plays a major role for our customers.

Now it was time to create an affinity map with every imaginable feature that such a tool could have. The next step was to divide these features into three categories: essential, important, and nice to have. Working closely with the stakeholder and the backend programmer, we were able to work out a feature catalog that made it clear to all of us where the journey was headed.

Note: Some features have been made unrecognizable in order not to violate the NDA.

There were always three thoughts that we had to keep in mind:

Is the value of the feature worth complicating the tool? According to the maxim: As simple as possible, as complicated as necessary.

Is it worth implementing or will it delay our release without adding much value?

Is it technically possible for us to implement?

The goal was to have a tool for the customer that loads incredibly quickly. That's why we didn't want to have multiple design tools that would query whether the user was on a mobile device or not and load different tools accordingly. The best approach was to use a clean and modern solution that utilizes the power of CSS grid to create a completely responsive layout.

I divided the layout into different sections in order to plan exactly how the HMTL and CSS code should look. At first, I thought that realizing something like this might be a bit too ambitious, because I found very few similarly complex CSS grid projects on the web. But, after some work, the layout was finished and performed incredibly well. So, this solution turned out to be a complete success.