Submit a site

Website Case Study

View website

Team UX

Page weight: 105.96 KB

Carbon per page view: 0.033g

Team UX website homepage

How we built the Team UX website

By Yuna Orsini and Daniela Peñaranda at Team UX

Our previous website was neither very heavy nor very rich. It was a pseudo ‘one-page’ that contained a few additional internal pages not belonging to the main navigation. However, after several major content updates over the nearly 4 years of the site’s existence, a redesign became necessary in order to:

  1. Review the ergonomics of our site, whose content had evolved significantly over the years and whose structure was no longer suitable.
  2. Break free from dependence on the Webflow SaaS tool and regain the autonomy to implement strong technical choices in support of eco-design.
  3. Clearly communicate our specializations and make our website a showcase for these expertise.

Our eco-design methodology was based on an initial phase of strategic reflection

First, we redefined the needs of potential users of our site and, more importantly, prioritizing them. In our case, user needs included: contacting us, understanding our offering and discovering our references.

Then, for the retained functional units, we envisioned a more radical and less environmentally impactful critical path, resulting in different functional and ergonomic choices, specific graphic translation, and optimized technical development.

Then, we made strong initial functional choices

  • Removal of our case studies, which were the heaviest pages on our previous site.
  • Retention of the absence of data collection.
  • No use of rich and heavy media such as videos.
  • No integration of third-party scripts.

It is worth noting that we did integrate two pieces of content that did not exist in the old version:

On the UX side, we also made impactful ergonomic decisions

  • Selection of a multi-page site to address specific functional units without requiring the user to load all content, unlike the previous one-page site.
  • Facilitation of contact – the main functional unit – regardless of the page, without having to load a new page, thanks to the omnipresent link to an anchor at the bottom of the page.
  • Default hiding of project images and display of a warning message when the user chooses to view the images in larger size.
  • Limitation in the dimension and therefore the weight of project images as they are there only to suggest the content of our deliverables.
  • Adherence to accessibility rules related to design.

We then translated these choices into our UI productions

  • Reduction of the number of requests and external dependencies by choosing to integrate 1 custom font, unlike the previous use of 2 Google and Adobe web fonts.
  • Decrease in CPU workload by ultimately avoiding the use of resource-intensive CSS like the initially planned “blur” in the background of the page design.
  • Graphic design with clever image management:
    • Some visuals are lightweight vector images: the logo, icons representing our values.
    • Simple decorative shapes were designed to be directly integrated into HTML/CSS: the yellow capsule shape in the background, the white separating curve. Decorative blue elements on the site are 4 unique images, reused as background throughout the site, at different sizes, orientations, and opacities. Our 2 profile photos are reused multiple times on the homepage and then on an internal page.
    • Visuals for each project are not loaded initially but only upon the user’s decision to display a specific gallery.

Finally, the technical implementations carried out allowed us to achieve our eco-design objectives

  • Abandonment of Webflow to reduce our dependence on an external SaaS tool and eliminate several resource-intensive requests.
  • Transition to a static site using the Astro framework: there are no more requests to a database to load content.
  • Selection to serve only the CSS actually used through the Tailwind framework.
  • Choice of the “Variable” variant of the Satoshi font to access the 3 weights used on the site from a single file (127kb instead of 73+73+74=220kb), then replacement of the TTF format with the Woff2 format when it became available (43kb instead of 127kb), followed by the removal of unused glyphs in the font using the pyftsubset command-line tool (22kb instead of 43kb).
  • Customized management of images: based on the formatting and compression results obtained for each image, we either chose the PNG format if it was more efficient or provided browsers with 2 ultra-optimized Web formats: AVIF and WebP.
  • Implementation of lazy loading to load media only when they exceed the fold and are actually viewed.
  • Configuration of a long cache time for resources that are updated infrequently.
  • Collaborative efforts between development and design to maximize accessibility implementation.
  • Reduction of CPU workload by minimizing the use of technical solutions requiring JavaScript calls/recalculations.
  • Hosting by Infomaniak, “the ethical cloud”: ISO 50’001 certification for energy management since 2015, consumption of local renewable energy, Power Usage Effectiveness (PUE) of 1.09 (vs the European average of 1.8), data centers cooled by natural outdoor air without air conditioning, server lifespan between 5 and 15 years, allocation of unused resources to other tasks, energy inverters in standby mode, offsetting all their greenhouse gas emissions by 200% (source of information: Infomaniak).
  • Open-sourcing of the code under the Creative Commons CC BY-NC-ND license.

What tools were used:

One thing that helped reach the goal

To develop our eco-design strategy and tactics, we relied on recommendations already written by committed individuals or organisations, such as:

We also heavily relied on close collaboration between design and development. We can never thank Julien Viala enough, the full-stack developer who worked on our site with talent and dedication. We felt free to exchange ideas with him extensively to test and iterate, always pushing the boundaries of our eco-design approach without crossing the line into lack of creativity in interfaces. The three of us relied on our mutual ambitions for this project, which allowed us to ensure that by the end of this initial launch, we had learned a tremendous amount together.

Finally, we also want to emphasize that eco-design is an ongoing improvement process. To date, we have already identified areas for improvement that we will gradually implement on our website.

We hope to inspire other initiatives like ours

Visit the Team UX website

More from the case studies