I redesigned a website of Amber Engine, a B2B e-com SaaS startup. This was a long-term project as we continuously worked on improving the UX and UI of the website throughout 2021-2022.

This project resulted in:

• improving the success of corporate partnerships due to a more professional look

• acquiring first customers through online representation (together with other marketing efforts)

• startup getting acquired in March 2022 (together with other product&marketing efforts)

Project Overview

My Role: Lead UX/UI Designer, Visual Language, Design System

Timeline: April 2021 - December 2022

Background

Amber Engine is a B2B company with an e-com SaaS product. Together we have created numerous pages and worked on numerous UX issues on their website, managing to greatly improve it overall. This is a permanently ongoing project as we always keep testing and adjusting the website, sometimes working on bigger redesign projects, sometimes just changing minor details. (This is also why the actual website might look slightly different from what you’ll see on the images on this page - we might be trying something new, something might not be implemented yet or changed already after I’ve finished this case study piece.)

Problem

Amber Engine’s product was good, but their website was not. Because of this, they did not look credible and lost a couple of partnership opportunities with other companies who let them know that they need to level up their online representation game to be taken seriously. They were also not getting any customers from the online presence which we hoped could change with the new design that would make the company look trustworthy (together with other marketing efforts).

Design Process

I worked on this as a part of an agile fully-remote cross-functional international team at Amber Engine, for the most part being the only person responsible for all things design. This was a very fast-moving agile environment where we were constantly ideating, making dozens of changes, testing how new things work and then continuing to improve whatever we could. Sometimes we’d change the UI things, such as button colors or shapes; other times the UX things - for example, the forms on the website and the logic behind them, the information architecture in the navigation, the settings for pop-up windows, etc.

Since this was a permanently ongoing long-term project rather than a one-time redesign, the process was changing a lot depending on what we were trying to achieve at the moment, but a somewhat default framework (after we have redesigned the overall UI look) looked like this:

1. Ideation: someone would come up with an idea on what we could change/improve - this could be me, or the director of marketing, or content manager, or anyone else at the company

2. Discussion: we would discuss the idea and see if/how we wanted to implement it and where to position it in the prioritization roadmap

3. Research: sometimes team members would bring a pre-made research alongside with their idea, sometimes it was up to me or the project manager to check the competitors/heatmaps/other analytics

4. Design phase 1: I would start working on visualizing the idea on canvas

Presentation: I would present the first draft of the design and a Loom video explaining my decisions

5. Approval or further discussion + iterations

6. Development

7. Testing and further iterations if needed

Credits

Austin Szelkowski – Director of Marketing

Rein Bautista – Project Manager

Maria Fernandes – Junior Designer

Vijay Sutar – Lead Developer

Bianca Toia – Content Manager

Alexandra Borzo – Lead Copywriter

Part 1 - Original website analysis

This is how the website looked before redesign.

This design had a couple of great aspects, namely:

• it’s minimalistic and clean, definitely doesn’t feel overwhelming and gives a very “light” vibe due to all the negative space around elements and good spacing;

• structure: the elements of the design feel structured, there definitely is a grid in place and no chaos.

However, certain aspects of the original design were not so great:

• too much negative space, which together with plain light background colors makes the website look quite empty and too spaced-out (still better than chaotic or overwhelming though!);

• it is not very illustrative of the product of Amber Engine, while the easy UI of the product is one of their main value points - there is just one product screen and the rest of the images are sketched illustrations that do not provide any explanation on what’s going on there;

• no consistency in elements - some elements have rounded corners, some have sharp corners; buttons with the same CTA have different colors;

• some lines of the text are too long, which makes them hard to read;

• no human/emotional side in design, it feels very tech-y with just text and product illustrations;

• the red color used for some elements gives a feeling of a warning sign or an error;

• the blog section looks very different from the rest of the website, breaking the consistency of the page;

• not accessible color combinations.

These were just some of the issues of the original UI that could be easily fixed on their own, but the goal of the project was to give Amber Engine a brand new look - professional, elegant and clean. Therefore, we started working on the creative direction for the branding and the completely new website design.

Part 2 - UI redesign / branding update

During my time at Amber Engine, we shifted back and forth with visual language — we tried to be more serious (e.g. more minimalistic look), tried to be more playful (e.g. bigger variety of colors, customized fun icons). As the company was developing and their identity was shaping up, I worked hard on leveling up their design maturity as well through taking initiative on such projects as analyzing and improving the UX of the website (and not only the visual look), advocating for inclusiveness (e.g. changing the color palette to make it more accessible, checking the correct tags and alt text on the website elements) and creating a design system to remain consistent afterwards.

The final new look of Amber Engine was designed based on the following:

• First of all, Amber Engine is a B2B brand. Their primary audience is mostly C-level management, and their website is mostly an informational step to purchasing the product on the customer journey map. This calls for conciseness and minimalism – we should not distract the user with too bright, too eccentric design + the website needs to look professional and clean to be trustworthy. Moreover, as the branding is based on a light theme, it would be very easy to create an inconsistent and dirty look by using too many different colors and graphic elements.

• The softness of the visual elements was inspired by (1) the fact that the logo of the brand has a circular glyph, which calls for adding more round elements into the designs, (2) the general UX/psychology principles stating that soft, rounded elements create more trust in users rather than sharp elements.

• The bright accent elements reflected the values of the brand and the product, as in “easy and fun to use.”

Part 3 - UX analysis & improvements

Here are some of the UX issues we've tackled (or analyzed and working on them right now).

1. Updating the website navigation to be more clear and concise

2. Analyzing the issue of hidden pricing and how it affects us

3. Ensuring that all the important details are easy to find (e.g. length of a trial,

4. Adding more case studies so that our potential clients know how exactly we can help them

5. Creating internally shareable materials that make it easier to present Amber Engine to team members, colleagues and other stakeholders

6. Removing the intrusive lead generation pop-up

7. Making the customer journey easy to understand by always providing context to our customers on what to expect next in the onboarding process

8. Demonstrating the product UI upfront to ensure that the customers find it aesthetically pleasing and easy to understand

9. Clarifying the difference between the products of Amber Engine and the role of each of them so that it's easier for the customers to make a decision about which one they need

10. Improving the search engine of the website.

Other materials

Here are some other materials I've designed for Amber Engine.

And some more :)

(these have slightly different colors because they were designed before the new brand guidelines were finalized)

Launch campaign

Designed with purple as the main color to make it stand out among the rest of the content (creative directed by me).

Retrospective

The website redesign project I worked on for Amber Engine was one of the longest and most complex projects I've ever undertaken. It wasn't a simple one-time redesign, but rather a continuous improvement of the website and the company's branding.

I'm pleased to say that my contributions helped the company succeed. Our work resulted in the company's first clients from ads, improved the success of corporate partnership initiatives, and the company was ultimately acquired within a year of our work together. It was gratifying to see the tangible impact of our efforts.

During the project, I had the opportunity to work with an agile cross-functional team, which taught me a great deal about teamwork. I learned how to communicate effectively with team members, manage timelines and priorities, and work collaboratively towards a shared goal.

This project also marked my first time hiring, guiding, and working with junior designers. It was an incredibly fulfilling experience to serve as a mentor and supporter, and I discovered a new passion for helping others grow in their design careers.

One of the most significant insights I gained from working with Amber Engine was the importance of collaboration between designers and developers. I realized that creating a better flow of communication between the two groups was critical to the success of the project. Additionally, I learned that providing feedback and working closely with the development team was essential to ensuring that designs were implemented correctly and effectively. Going forward, I know that I can improve in this area and continue to develop my skills as a designer and team player.

I am grateful for the support that I received from my Amber Engine colleagues, who gave me the freedom to practice lots of skills during our work together. I was able to work on various tasks, including research, ideating, branding, leading junior designers, creating low and high fidelity wireframes, adjusting elements for the mobile version of the website, creating unique user flows for specific website sections, prototyping, and even directing certain marketing campaigns. The experience that I gained during this project has been invaluable, and I look forward to applying it to future projects.