Salewa is the specialist leader for mountain sporting goods. Founded in 1935 in Munich, Germany, the company was took over in 1990 by Oberalp group based in Bolzano, Italy.  Warmup is the name of an overall communication campaign launched by Salewa in September 2016. I was engaged to design an interactive online configurator which helps users to find a matching jacket for their specific needs. It combines data such as climate conditions, temperature, gender and activity level in order to identify the product with the proper fabric technology.

Task

We came up with three different user experience environments: a Responsive Website, the Embedded Widgets and an In-store Touchscreen installation. The challenge was to design for these different environments while keeping in mind the user's experience, the stakeholder's campaign objectives and the development effort.

Interaction mapping

In order to put everybody on the same page we worked in the first place on defining the user's paths and screens while considering technical and operational constraints. This part of the process is essential, the creation of the User Interaction Map. It involves everybody that is concerned within the project as these are the bases on which we will build the rest. Online live collaborative presentation was highly useful at this point because it is often difficult to schedule everybody at the same time in the same room, especially when the project has a precise time constraints.

Wireframing and prototyping

Wireframing, or sketching the essential parts of the graphical interface, is where we get deeper into the main functionalities, screen content, user’s interaction, technical feasibility and operational questions. From wireframes we than create an interactive prototype. Handmade sketch detail level is useful as it communicates to everybody that what they see is nowhere close to the final product leading to the discussions begin focused on structure, interaction and strategy rather than details.
Interaction is created with clickable hotspots placed on the image and transitions are sometimes animated. Prototypes are shared with all teams and everybody can comment at any time on a single screen. These prototypes can be used also for user testing and collecting useful feedback from other departments or partners.

Visual design and final prototype

After everybody's happy with the wireframe we can start to polish everything by designing detailed user interface by adding colors, text and real content. We can take feedback from wireframe testing and apply it in the visual design.
Some important questions may arise in this part of the process, thus it’s useful to add details gradually and refine step by step. This is the part of the process in which we usually discuss contents, typography, calls to action, the tone of the communication, visual aspects such as colors, icons and graphic design, animations.
We had to keep consistent with the other campaign materials, therefore designers of the printed and video materials were involved at some point.

Assets sharing, debugging and redesign

Design process is not finished when the coding starts. Assisting developers with some arising problems and decisions is the key for delivering what has been designed and accepted by client.
This activity might continue even after publishing, driven and measured by the effectiveness of the user’s interactions.