UI Case Study: Redesign for Edge Cases and When Designs Breaks
Quick summary: What happens in the process of redesign. Why the old design has failed and how to predict the new design’s problems.
Introduction
Last year I was working at C14 in Barcelona and our client was SEAT, the Spanish automobile manufacturer. Our design team was already managing designs and deliverables into small design components. Each one has to be functional and reusable by its own.
Our Design Process.
- Learning, researching and Defining the problems.
- Wireframing and Sketching.
- Testing and Iterating.
- Specs.
The Hero component?
The component sets in the higher part of the page. It’s present in every product landing page. In our case, it was for every car range’s landing page. Ranges such as SEAT IBIZA, SEAT LEON…..
Understanding the user Journey.
In our case, the hero component is the first thing that’s the user’s eyes are scanning. User’s objectives are to learn about a car range or to select a range Which fits their needs (e.g. sportive ranges or family ranges …).
The component’s content:
From the user’s journey, We start thinking about each piece of information the component should have. In the learning stage: the component help to quickly understand each product characteristic. And in the selection stage: it provides the user with the necessary call to actions.
- Product Image
- Product Name
- Product highlights “features”
- Call to action (e.g. test drive).
The challenges to design scalable UI components.
- Design should serve 78 Countries and over 30+ different languages.
- No control over the content.
- Words in certain languages, for example German, tend to be much longer.
- Certain acronyms or initialisms do not exist in other languages and are written out in full form.
- Unites of measure, numbers formatting or currencies differs from one country to another. Sometimes written in different ways.
- Keep consistencies and the responsive layout.
- Work with the Brand guidelines …
Problems and opportunities of the old design.
Problems:
- Product image: Overlapping with texts and buttons and
- Product image: Has dark layer mask at least on some parts.
- Longer words breaks often the highlights. Causing unbalanced layout.
- Readability and Scannability (Issues due to the unbalanced layout)
UI Approach.
We should be asking what will be the different use cases for every product and Market. How the content team will handle the new layout. Content adaptation on different screen sizes such as mobile, tablet and desktop.
It was a question of whether our design will break or not? The answer was yes. The design will break.
We should predict when and how the layout will break.While keeping the order and balance of the layout. As a designer, it isn’t easy to accept that our beautiful design; the pixel perfect design; will break. That idea inspired by the development approach of Graceful degradation.
The practice of building your web functionality so that it provides a certain level of user experience in more modern browsers, but it will also degrade gracefully to a lower level of user in experience in older browsers.
Define Design rules:
- On Mobile: one single column, Tablets: two columns and Desktop 3 columns max. by establishing this rule the text will have larger areas live in reducing the lines breaks.
- Product Image separated from the Text and buttons. the layer mask no longer needed the image.
- Equal rows alignment, spacing and Two lines break.
- New feature: Interactive highlights, expending to provide more information if the users clicks on.
The final new layout redesign.
Predictable break pattern:
- Long words and lines break.
- Integration of logos and images in different cases .
- Different cases for number of columns and CTA.
Lessons learned.
- Understand the product and the user journey.
- Informations that every component should serve.
- Predict real world situations and prepare your designs for it.
- Explain visually different scenarios.
- Define scalable and reusable design rules.
- Avoid special cases whenever possible.
