User Experience Design
User Interface Design
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.
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 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.
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.
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.
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.
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?”
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
+31 6 138 28 668