Responsive Web Design for Salewa's online campaign
  • Add to Collection
  • About


    Salewa Warmup is a brand communication campaign launched by Salewa in September 2016. An interactive online product configurator was designed in … Read More
    Salewa Warmup is a brand communication campaign launched by Salewa in September 2016. An interactive online product configurator was designed in order to help users to find a matching jacket for their specific needs. Read Less
Salewa Warmup Online Configurator
A sample case of the Design Process
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.
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.
It always starts with sketches, post-its and storyboarding
The audio-visual interactive discussion online over the user experience map
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.
Paper and pen sketching helps staying focused on the big picture
The wireframe interactivity is important for testing and feedback
Designing the product configurator interaction: one primary action per screen!
Mobile wireframes and prototype used on real devices
Screen flows with advanced wireframes
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.
Wireframe testing clarified that we needed to simplify some interaction steps
Designing with small and touch screens in mind
It is useful to prototype some key animation effects
A simple interactive tool that explains the relation between emotions and body temperature
Visualizing the outcome of the widget integration into the partner’s website
Registration form with pre-filled data gathered from a linked social network account
Flippable cards with additional information on backside - Created with Framer prototyping
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.
Screen annotations, CSS and design suggestions, debugging comments
Year: 2016
Client: Salewa
Agency: Motorialab
Web Coding: Motorialab
Visual Guidelines: Salewa
Visual Design: Harun Alikadic
Interaction Design: Harun Alikadic
Design Tools: Illustrator, Photoshop
Prototyping: InvisionApp, Framer, Keynote
Links: Desktop Mockup, Framer Fabrics Mockup