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

We received a question from one of our clients, if we could make a tool that helps solving the tremendous amount of time and costs spend on the creation of marketing banners. Both online and print. And conform their determined pre-production guidelines.

The challenge
MAINTAINING HIGH BANNER QUALITY AND QUANTITY

The biggest challenge we faced was to keep the high quality and quantity of banners maintained, while also making the creation of banners as much as automation-friendly as possible. Secondly, it should be time and cost efficient. A third one, the ability to create all banner sizes stated in the guidelines, with corresponding 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 should 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. Translating the problem and needs into a valuable design solution, eliminating the pain points at hand. Observing how meetings developed. Retrieving data and information from those meetings, analyzing it, and using it to strengthen design decisions.

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

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

“How might we produce large quantities of marketing banners conform 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 found out that users work on banners via separate InDesign files. The repetitive activity can interfere with the high quality requirements. We analyzed all the collected information.

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 became 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 I sat down with the team members, discussing the collected information and sketches, in order to gain input from different points of view. 

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, to inform my design choices with.

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. In order to solve the pain points, while the tool is somewhat client specific designed, we created the core of the builder. Dividing it up into sections, that no matter the aesthetics, will maintain the determined user experience.

Instant visual design & prototype

We were confronted by the fact that most people are visually oriented. We created high fidelity wireframes of the main screens involved. However, they lacked context since no representative content was shown. We immediately eliminated this issue, by creating a visual design of the 3 user flows that can be taken. This cleared the skies at once, 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, we start 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 ensure 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 produced 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, similar to a common 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. Via the use of a well thought through, 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 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 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 created design.

HINDSIGHT
Evaluation & reflection
What I’ve learned

My biggest challenge

People are humans. Therefore, thoughts can change. The adaptive attitude I had to integrated within the process, because of high demands and requirements shifting from A to B, and either defend or go-with-the-flow regarding design decisions, was my biggest challenge during the project.

Best lesson

Despite the fact it being a highly complex, technical project at the backside, less is more. Thanks to the expertise of the development team, I understood how data was retrieved and used in the front-end. This helped me inform my 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. Loving to talk about inspiring challenges and ideas. 

Case studies

Experience

LinkedIn

Download resume

Contact

liam.tanis.work@gmail.com

+31 6 138 28 668