Skip to content
Banner Builder
Banner Builder
Adopting, optimizing, semi-automating, and digitalizing marketing campaign banner creation.
Role

User Experience Design
Interaction Design
User Interface Design
Visual Design

Timeline

February 2020

August 2020

A short heads up

Since I’m bounded to a nondisclosure agreement, there are no specific client- or team member names mentioned throughout the portfolio and case studies. When names do show, there are additional agreements made with the client/person at hand.

Thank you for understanding!
The brief
semi-automating banner creations

One of our clients commissioned us to develop a tool that could safe them a tremendous amount of time and cost, when creating marketing banners. These marketing banners would be used both in digital form and in print. They also must follow their specific pre-production guidelines.

The challenge
MAINTAINING HIGH BANNER QUALITY AND QUANTITY

The biggest challenge we faced, was to maintain high quality and quantity, whilst also making the creation of these high-grade banners as automated as possible. Furthermore, the tool had to be time and cost efficient. And lastly, the tool had to have the ability to create all banner sizes stated in their guidelines, plus fit all their varying content.

tram-banner
webbanner-edge
How it works
Fast and cost efficient

Banner Builder can create multiple banner sizes with the same content, or one size for multiple channels, with multiple content variations. Each campaign/season, content is uploaded, smart templates are defined conform pre-produced guidelines, and channel requirements are created. Once everything is set up, banners can be created by the end users. Dynamically and online.

Who it’s for
Large Retail & E-commerce organizations

It was a specific question from one of our clients. However, there was a lot of potential expanding the future solution towards other retail- and e-commerce organizations. This was due to the fact that they have similar paint points and needs. Banner Builder is for those who need to be able to communicate their brand through a range of channels. Each channel has their own requirements, while all content still needs to be included.

My Contribution

While working on the project, I was responsible for the overall user experience, interaction concepts, and the visual/user interface design. I translated the problem and needs into a valuable design solution, eliminating the pain points at hand. I observed how meetings developed and retrieved data and information from those meetings. I analyzed it and used it to strengthen the design decisions.

THE PROCESS
Tackeling the project
How we accomplished it
Understand
Actionable problem statement

Direct contact with the client enabled me to understand the context of use better. We figured out that the current banner creation process was focused on either one banner or one channel at a time. The actionable problem statement we identified throughout the kick-off and briefing was as followed:

“How might we produce large quantities of marketing banners that are according to guidelines and channels, while being time efficient and meeting high quality requirements?”

Research, analysis, validation
Excessive guideline, content, costs and requirements analysis

Since there was little room for good user research, we had to work with the client and our knowledge of the users and process. We discovered that users work on banners in separate InDesign files. This is a repetitive activity, which can interfere with the high quality requirements. We analyzed all the collected information. Four key pain points emerged:

Emerged key pain points

  • Large amounts of repetitive tasks
  • From one file to the other
  • Losing overview due to quantity
  • Double check with guideline

Once the pain points were clarified, we did a second massive research and analysis on the guidelines, content, costs and requirements. Figuring out how these elements can play a role in future design decisions. Finally we shared the use- and insightful outcomes with our client. They were delighted with the results.

Banner Builder Interaction Concept Sketch
Ideate
New point of view

While empathizing with the user in mind, I started iterating on several sketches. This process went back and forth, until a final sketch was chosen. In between all of this, I sat down with the team members, and in order to gain input from different points of view, discussed the collected information and sketches.

Because I was still rather new within the retail, e-commerce and fashion industries, it helped me to better understand what patterns I should take in consideration, from which I could better substantiate my design decisions.

bb-sketches-01
bb-interactionconcept-02
bb-sketches-03
bb-sketches-02
UI & visual design
CLIENT SPECIFIC WHILE MAINTAINING THE UX

Once everything was discussed and confirmed, we came to the one solution. Since it had to be within the client’s style, while we also aim to solve the pain points, we divided the builder into functionality-sections. We created the core of the builder. And by this practice, no matter the aesthetics, we maintained the determined user experience.

Instant visual design & prototype

We were realized by the fact that most people are visually oriented. So we created detailed wireframes of the main screens involved. They, however, lacked some context since no representative content was shown. We immediately eliminated this issue, by creating a visual design of the 3 user flows that could be taken. This cleared the skies instantly, and we could proceed to the final phases.

Two approaches

The identified needs were mainly related to either content or size, regarding marketing banners. To ensure we met both needs, we started the creation of banners with a choice of either going for a content, or size focused creation process.

two-approaches
selection-bar

The selection bar

We made the selection bar the prominent feature, since the focus is on the creation of banners without any trouble or setbacks. With disabled, active, hovered, static states, we ensured that the user exactly knows where they are in the creation process.

Created Banners

Once the user reaches the final stage of the creation process, we lay emphasis on the final outcome. The high quality requirement is the centralized point of attention during this stage.

created-banners
order-list

Order list

With the order list – on the right side of the design – we approached the solution, in a similar way as an online shopping cart pattern. In this way we met the mental model of our users without big changes.

Prototype
CLICK-MODELLING AND PROTOTYPING

Presentation of the final design is key. Through the use of a well thought out, tested prototype and click-model, we were able to completely show the interactions, user experience, and visual design to both client and team. It visualized the end product in a great way.

And finally, once all of the aspects above were approved, all the designs were received by the development team and the first version of the Banner Builder was launched.

public-banner
Meet-ups & iterations
VALIDATING ASSUMPTIONS AND GAINING INSIGHTS

Throughout the entire process, we kept on meeting up with our client. This was a great way to consistently validate findings and assumptions. Over time, information can be added or changed, new stakeholders can suddenly come into the picture, and interested parties can take a look.

Since all of this happened during the project, we iterated intensively upon the newly gained insights and information. This resulted in a thorough thought out created designed.

retrospect
Evaluation & reflection
What I’ve learned

My biggest challenge

Humans are thinkers. Therefore, thoughts can change. I had to take on and integrate an adaptive attitude within the process, because of high demands and requirements shifting from A to B, or either defend UX or go-with-the-flow regarding design decisions. This was my biggest challenge during the project.

Best lesson

Despite the fact it was a highly complex, technical project beyond the surface, less is more. Thanks to the expertise of the development team, I was able to understand how data was retrieved and used in the front-end. This helped me make informed design decisions and added value to the simplicity and impact of the product.

Contact
Coffee-time!
Let’s get in touch

Liam Tanis

Currently, I am not open to new work, but feel free to contact me anyways for a good conversation. I’d love to talk about inspiring challenges and ideas. 

Case studies

Experience

LinkedIn

Download resume

Contact

liam.tanis.work@gmail.com

+31 6 138 28 668