Withings
A company website selling innovative connected objects for the health of its users.
Type
Website
My Roles
Web Designer / Developer
Years
2020 - 2022
Team
3 creatives developers, 2 project managers
Duration
2 years, part time
Stack
JavaScript
scss
gsap
Context
Integrated into a small team after Withings raised funds in 2021, I find myself assigned to the main e-commerce website, with the task of helping it evolve.
Project challenges and missions
1
Implement a new design system.
2
Design and develop new pages.
3
Update old pages & obsoletes elements.
4
Develop reusable modules.
Working method
We were working in Agile with projects, but with strong conditioning determined by product releases. In fact, the site's projects depended enormously on what was happening on the business side.
Job details
It's a designer/developer position. It's one of the few companies to combine these two positions in 1. I saw this as an advantage, as I would eventually be able to master design & production, the more experience I would gain.
Mission - multilingual
One of my missions was to redesign and develop the region and language selection experience, which was very incomplete when I arrived. In fact, the site only had 3 languages translated, and it was impossible to change region. The overall aim of opening up to other markets was to develop the site's multilingual and multi-region experience as much as possible.
Mission - footer
Linking this to the experience of languages and regions, I also had to redesign the footer shortly after the arrival of the new design system. It's still used today because of its comprehensive layout and simplicity.
Mission - Delivery
As a complementary mission to the multilingual experience, I was able to completely redesign the page providing precise delivery information. The concept aimed to provide buyers with a quick overview of which supplier would deliver to them, the expected delivery time, and the associated cost. Upon landing on the page, users were automatically geolocated.
Mission - Compare module
Another important assignment was to redesign the product comparison experience on the category pages. This meant making the module modular, with JavaScript classes that could be easily adapted to all product categories.
Highlighting products
I was able to create a lot of pages and components on Figma. I was also able to get to grips with the brand's Design System and identify the layouts that worked best for each product. I was also able to work on interactions, animations and specific scroll animations... Below, the page for the Withings Body, a connected scale, which I had the opportunity to completely redesign and implement all the concepts I learned during this job.
Last Mission - BMI Calculator
To round off my experience at Withings, I was given one last assignment: to create a complete BMI calculation page, with a real health approach, not just to sell products but to provide as much information as possible with verified information. It's an SEO page, but one that was intended to compete with existing pages for calculating BMI. The idea was to provide a greater level of detail than our competitors, with personalisation and interaction for each section: BMI calculation, Datavizualision based on location... there was plenty to explore on this page. I took care of everything, from managing the project to writing the content and carrying out competitive research, as well as design and development. I did everything I could to get the project up and running before I left Withings.
BMI Calculator - New Design System
This page was to have a different look from the other pages on the site, with little connection to the current system design. After a lot of research and testing, the pastel colours worked well and gave a fresh look to the topic we wanted to make appealing. I also used gradients, and made some unique components for this page.
Lessons from this experience
1
Less is more
The best designs I was able to produce at Withings were the ones that were the least busy, the ones that let the content breathe.
2
Happy Business
Business issues are inherent to all teams in a large structure. For our small team, we had to be well organized so as to always be on time and always deliver quality. In fact, our design and development work coincided closely with the release of products for end-users.
3
A good team is the key
Being surrounded by people who are more competent than you are is a really good way of progressing quickly and being stimulated. Especially when you're still a junior.
4
Wearing 2 hats means 2x the work
It's good to go into different complementary fields, but that means spending the time necessary to become good at them, and that's a daily job.
Outcomes
During my two years at Withings, I've had an impact on several product pages that have been consulted several million times. I also got a taste of continuous improvement and the implementation of a full-scale modern system design. I was also able to contribute to essential reflections for the site's general orientation, and had a lot of fun designing and developing solutions used by thousands of users. I was also able to work with brilliant people who were very talented and rigorous in their approach to design and development, which was very formative for me. I also realized that in the future I'd prefer to do less design and more development on a daily basis.