What do UX Hack Days look like at idealo 👩🏻‍🎨👨🏼‍🔬
Summary of our UX innovation week @idealoTech (Part 1)
Last year the UX department here at idealo.de decided to do hack days twice a year: In spring and fall we engage with topics that are outside our day-to-day business. We want to think outside the box, do research and change our way of working. Furthermore, we’d like to mix colleagues that do not necessarily work together on a daily basis and learn from each other. The goal is to keep it fresh — everything we do for fun will also have an impact on real projects.
We call our hack days FUX days. FUX stands for “Fantastic UX” — in German that word sounds a lot like the animal fox (“Fuchs”), so we already have our mascot.
Topics, ideas, process
Our FUX days started with a casual planning phase—everybody was invited to come up with topics that are allowed to span from abstract projects on a meta level to geeking out in detail on microinteractions. We split into two teams: Team 1 assigned themselves the task to rethink and redesign some parts of idealo, whilst Team 2 had the task of diving deep into the idealo customer journey.
In this article we want to show the results of team 1.
At first, we came up with new concepts. What could idealo be besides a website and an app? Could the core functionality be integrated into a VR or AR tool? Should we open an idealo popup store? What would the idealo website feel like if it would behave more like an app?
The second part was about style and brand: Rethinking the qualities that support the idealo design of now and redesign the idealo image of tomorrow. What would idealo look like if it was founded in 2018 and not 18 years ago? Can we design a flexible, fresh brand for an idealo that offers direct buying only?
Results
Here is the outcome—everybody on team 1 worked on one or more projects that we want to exhibit here. Below you’ll find those projects and what the authors have to say about it.
App Patterns at Web
Simon says
One thing that disturbs me the most of our current webpage is the disconnectedness. The link between pages and areas is not seamless but clunky, highlighted even more through the lack of transitions and animations.With my exploration I tried to combine different ideas into one cohesive concept.
- Complexion Reduction
- Search as integral center of UX
- Tag based search
- Seamless transitions between page types
- Joy through polish — consistent use of elements, shadows, attention to detail
To save time I decided to use our current iOS design approach as a basis for key elements.
Dashboard
by Andrea Kessler
Andrea says
In the web, idealo users don’t have a personal place where they can overview their saved products, their orders and also their personal stuff.
idealo has a lot of knowledge about users and a lot more about the products they want — but doesn’t make these facts (and the combination of them) reachable and visually appealing for the users.
The playful designed dashboard brings more benefit and joy of use.
The line is the key
by Xosé Lustres
Xosé says
idealo is a complex product and sometimes the user is lost on crowded pages with a lot of information about offers and products. On the other hand this complexity is our best value and part of our identity (Vielfalt). The proposed solution brings together brand and complexity positively, the complexity is hidden behind our brand element (orange bar) and it builds a strong key visual. Every time the user reach this orange bar wonderful things will happen, it will unfold to the user relevant features/content depending of the context. In this way the brand element is more valuable and we encourage the user to interact with us.
Here is a basic prototype to show the line behaviour.
Fully customized
David says
idealo is offering every kind of product — it’s like a general store. Imagine idealo would look specialized, depending on the category you are viewing.
A lot of people are taken to idealo via SEO / google searches. Let’s say you are looking for “good running shoes” at google, one of the results is “running shoes at idealo”, you click on it and enter idealo. In this case idealo would be styled like a shoe store with big imagery, fresh colors and bold texts. Thanks to this customization users get a feeling of trust and get into shopping mode. Also the content is tailor made in this case: In addition to shoes (that’s what you were looking for in the first place), we are offering you running cloth and also electronic products that you could need for your next run.
In the second picture you see idealo in an audio equipment mode. The basic elements are the same but the visual style has changed: tiles get bigger, everything is more rectangular, the color scheme gets darker etc. Those style-differences between the shoe and audio style should be easy to realize — it can be done with pure CSS.
idealo Homepage Redesign
by Daniela Strauch
Daniela says
In The FUX-Tage we were given the chance to be creative and innovative in the creation of designs. During this process, many ideas and questions came up, however, one of the key questions for me was “How could idealo look like in 2025?”. That was my starting point. My inspiration came from the idea that idealo could be based on user interests, that means that the content on the homepage would be based on the interests previously acquired by a “survey” made at the time of registration and also in the recently viewed products (personalized for each user). As the main focus, the Homepage would have the TV Campaign videos playing in the header with an interactive Search Field. After will come to a Carrousel Gallery with offers organized by Themes and finally a featured product.
The main focus of the design lies in 2 aspects—color and trend. For me it was important to show that idealo can be more modern and less technical by the use of bold colors, shadows, gradients and tons of White.
Offer List Redesign
by Daniela Strauch
Daniela says
As a second design, I wanted to redesign one of the most important parts of the website and make it more attractive and interactive.
In order to reach those standards, I decided to divide the offer list into sections. The left section consists of the product image gallery (almost 2 times bigger than the live version) that gives more attention to the product and arouse interest. Underneath we show the direct buyable offer and further product information. The right section shows the offers on tiles — that way they have more individuality and presence on the site. In comparison to the live version, this design focuses on 2 things: product image and price comparison.
Blog Page
by Paolo Pedretti
Paolo says
idealo as a blog page: get inspired, get informed and find anything you need. idealo has a lot of knowledge—I’d like to share this knowledge about products and trends with our users in the form of a blog. A place where users can refer to and be confident to find transparent, useful and independent information for their purchases. Let’s bring the content in focus to inform, guide and inspire our users.
If you already know what you need just type the product name in the search field. Tags that are relevant to the product you are looking for will populate the top of the page. Drag end drop the tags you are interested in in the box below to make up your perfect product selection. We will find the best offer for you.
Do you want to have a broader overview? Just reveal more offers clicking on the drawer below the main offer.
Impressions
Our FUX days Vol. 1 in a nutshell—from working together, lots of feedback sessions and a small exhibition in the end.
What’s next?
The FUX days were super fun—everybody is still excited about this kind of hackathon. Internal feedback from a lot of co-workers was also great and helpful. There will be more FUX days in the near future—so stay tuned!
If you found this article useful, give me a high five 👏🏻 so others can find it too, and share it with your friends. Follow me here on Medium (David Paschke) or on Twitter (@pixelfunk) to stay up-to-date with my work. Thanks for reading!
