219 lines
16 KiB
HTML
219 lines
16 KiB
HTML
<!DOCTYPE html>
|
||
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>YEEP.ME Download Center – Ailyaut's blog</title>
|
||
<link rel="icon" type="image/png" href="../../media/icons/favicon-16x16.png" sizes="16x16">
|
||
<link rel="stylesheet" href="../../style.css" />
|
||
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<meta property="og:title" content="YEEP.ME Download Center – Ailyaut's blog" />
|
||
<meta property="og:type" content="blog" />
|
||
<meta property="og:url" content="https://ailyaut.com/" />
|
||
<meta property="og:image" content="https://ailyaut.com/media/preview.png" />
|
||
<meta property="og:description" content="Hi! I'm Ailyaut, a 24-year-old everything-designer with a particular interest in open source and card games." />
|
||
<meta property="og:locale" content="en_US" />
|
||
</head>
|
||
|
||
<body>
|
||
<header>
|
||
<div id="header_box">
|
||
<div>
|
||
<a href="../../index.html" id="header_title">Ailyaut's blog</a>
|
||
</div>
|
||
<nav id="header_nav">
|
||
<a href="../../blog.html" class="nav_button">Blog</a>
|
||
<a href="../../gallery.html" class="nav_button">Gallery</a>
|
||
<a href="../../projects.html" class="nav_button_active">Projects</a>
|
||
<a href="../../about.html" class="nav_button">About</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="box">
|
||
<div class="column">
|
||
<p class="bold" style="color: var(--accent);">Case study</p>
|
||
<h1>Redesigning the yeep.me Download Center</h1>
|
||
<h3 style="margin-top: 0; color: var(--accent);">And making it easier to use and maintain.</h3>
|
||
</div>
|
||
</div>
|
||
<div style="margin: 2em 0 2.5em 0; max-width: 100%; overflow: hidden;">
|
||
<img style="min-width: 100%; max-width: 149%;" src="media/banner.png">
|
||
</div>
|
||
|
||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||
<div class="column" style="--custom_width: 60%;">
|
||
<h2 style="margin-top: 0;">Overview</h2>
|
||
<p>As a Product & UI designer at Cibox, I undertook the redesign of the YEEP.ME Download Center website to make it easier for customers to find product documentation, to facilitate site maintenance, and to reduce the site's carbon footprint.</p>
|
||
<div class="row" style="width: 100%;">
|
||
<div class="column" style="--custom_width: 50%; margin-right: 2em;">
|
||
<h3>Challenges</h3>
|
||
<ul style="padding-left: 1em;">
|
||
<li>Long product list and lack of search feature made the website hard to use</li>
|
||
<li>Page by page approach made the website hard to maintain</li>
|
||
<li>WordPress was deemed too heavy on the server, and the page had a high carbon footprint</li>
|
||
</ul>
|
||
</div>
|
||
<div class="column" style="--custom_width: 50%;">
|
||
<h3>Solutions</h3>
|
||
<ul style="padding-left: 1em;">
|
||
<li>Introduced search & filter features, modernized UI</li>
|
||
<li>Built an automated updating system to facilitate the maintenance</li>
|
||
<li>Remade the website using only HTML, CSS and a pinch of JavaScript</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<h3>Key results</h3>
|
||
<div class="row" style="width: 100%; gap: 3em;">
|
||
<div class="column" style="width: min-content;">
|
||
<h1 style="font-size: 3em; margin-bottom: 0;">-58%</h1>
|
||
<p class="light" style="text-align: center;">carbon emissions</p>
|
||
</div>
|
||
<div class="column" style="width: min-content;">
|
||
<h1 style="font-size: 3em; margin-bottom: 0;">50%</h1>
|
||
<p class="light" style="text-align: center;">faster search</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="column" style="--custom_width: 30%;">
|
||
<!-- <img style="border-radius: 1em;" src="thumb.png"/> -->
|
||
<h3 style="margin-bottom: 0.5em; margin-top: 0;">Client</h3>
|
||
<p style="margin-bottom: 0;">CIBOX INTER@CTIVE</p>
|
||
<h3 style="margin-bottom: 0.5em;">Role</h3>
|
||
<p style="margin-bottom: 0;">UI/UX Design, Visual Design, Programming, Deployment testing.</p>
|
||
<h3>Tools</h3>
|
||
<p>HTML, CSS, JavaScript, Python, JSON, Git</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="align_horizontal" style="background-color: var(--surface); width: 100%; padding: 2.5em 0 2em 0; margin-top: 2em;">
|
||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||
<div class="column" style="--custom_width: 60%;">
|
||
<p class="bold" style="color: var(--accent); margin-bottom: 0;">BACKGROUND</p>
|
||
<h2 style="margin-top: 0.25em;">What is yeep.me Download Center?</h2>
|
||
<p>YEEP.ME is a brand of CIBOX INTER@CTIVE, an e-bike and e-scooter manufacturer.</p>
|
||
<p>The <a target="_blank" href="https://download.yeep.me">YEEP.ME Download Center</a> is a website where YEEP.ME customers can find the documentation for their products, as well as confortmity certificates and warranty conditions.<br>
|
||
It needs to be updated either when a new product is released or when a correction needs to be made to a document.
|
||
</p>
|
||
|
||
<p class="bold" style="color: var(--accent); margin-top: 2em; margin-bottom: 0;">PROBLEMS</p>
|
||
<h2 style="margin-top: 0.25em;">An endless product list</h2>
|
||
<p>The website featured a landing page with a 3-column list of all the products of the brand that ever existed. The only way to search for a product was to scroll through the list and find it by name or picture. On mobile, the list became a single, long column, requiring even more scrolling.<br>
|
||
The product pages featured a large table that allowed users to search the documentation in multiple languages. If there were more than three types of documents, the table had to be scrolled from left to right, even on desktop. Needless to say, the mobile experience was worse.
|
||
</p>
|
||
<p>Furthermore, maintaining the website was difficult. When adding a product, a new page had to be created by duplicating an existing one and editing the information. Then, the documentation had to be uploaded, and the PDF links had to be edited individually.
|
||
Finally, the product had to be added to the list on the homepage, along with a link to the previously created product page. This whole process was long and tedious.</p>
|
||
<p>Finally, the website was heavy on the server due to its use of WordPress, and its carbon footprint was enormous. <a target="_blank" href="https://digitalbeacon.co/">Beacon</a> graded it an F, with an astonishing 1.101g of carbon emitted per page view.</p>
|
||
<p class="bold" style="color: var(--accent); margin-top: 2em; margin-bottom: 0;">GOALS</p>
|
||
<h2 style="margin-top: 0.25em;">Less scrolling, faster everything</h2>
|
||
<p>1. A faster, cleaner way to search for products, reducing curstomer frustration.</p>
|
||
<p>2. Simpler maintenance. Adding documentation shouldn't be harder than a drag-and-drop.</p>
|
||
<p>3. Lighter website = less carbon emissions and better performances.</p>
|
||
</div>
|
||
<div class="column" style="--custom_width: 30%; gap: 1em;">
|
||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2024_home.png" />
|
||
<p class="light" style="text-align: center;">The homepage in 2024, before redesign</p>
|
||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2024_product_page.png" />
|
||
<p class="light" style="text-align: center;">A product page in 2024, before redesign</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<h1 style="text-align: center; margin: 2em 0 0.25em 0;">The solution</h1>
|
||
<img style="width: 16em; margin-bottom: 4em;" src="media/wavy.svg">
|
||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||
<div class="column" style="--custom_width: 47.5%; justify-content: center;">
|
||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2025_home.png" />
|
||
</div>
|
||
<div class="column" style="--custom_width: 47.5%; gap: 1em;">
|
||
<h2 style="margin-top: 0;">Less clutter, more features.</h2>
|
||
<h3 style="margin: 0;">A single line of products.</h3>
|
||
<p>Product documentation is needed either right after buying a product or when a problem occurs. Since problems are usually unpredictable, the first line showcases the most recent products for quick access, which provides a great first experience for new customers.</p>
|
||
<h3 style="margin: 0;">Search!</h3>
|
||
<p>This was an obvious missing feature in the previous design, so I added it! This search box uses JavaScript to display all the products matching the searched character string in real time.</p>
|
||
<h3 style="margin: 0;">Filters!</h3>
|
||
<p>Sometimes you don't know the name of your product, so filtering by what you know might be useful. Static filtered pages also come in handy for users with JavaScript-blocking extensions, such as NoScript.</p>
|
||
</div>
|
||
</div>
|
||
<div class="spacer" style="--size: 6em"></div>
|
||
<div class="box reverse" style="justify-content: space-between; gap: 2em;">
|
||
<div class="column" style="--custom_width: 47.5%; gap: 1em;">
|
||
<h2 style="margin-top: 0;">Same information, but clearer</h2>
|
||
<h3 style="margin: 0;">A simple document list</h3>
|
||
<p>Instead of a large (and mostly empty) table, the documents are now presented as a simple list, with only what's available for shorter scrolling and better readability in general.</p>
|
||
<h3 style="margin: 0;">Localization</h3>
|
||
<p>Since the brand sells in multiple countries, the website is now available in English and French, with the option to add more languages later.</p>
|
||
</div>
|
||
<div class="column" style="--custom_width: 47.5%; justify-content: center;">
|
||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2025_product_page.png" />
|
||
</div>
|
||
</div>
|
||
<div class="spacer" style="--size: 6em"></div>
|
||
<div class="box" style="justify-content: space-between; gap: 2em;">
|
||
<div class="column" style="--custom_width: 47.5%; justify-content: center;">
|
||
<img style="border-radius: 1em; border: 1px var(--outline) solid;" src="media/2025_code.png" />
|
||
</div>
|
||
<div class="column" style="--custom_width: 47.5%; gap: 1em;">
|
||
<h2 style="margin-top: 0;">Custom solution</h2>
|
||
<h3 style="margin: 0;">A static website generator</h3>
|
||
<p>Since I had to get rid of WordPress for being too heavy, I went for bare HTML pages. Of course, I had no intention of creating hundreds of HTML pages by hand, so I wrote a Python script that scans all the products in a folder and then generates all the web pages with the correct information.</p>
|
||
<h3 style="margin: 0;">Drag-and-drop page generation</h3>
|
||
<p>Since there is no way to know if my future coworkers will have the necessary skills to edit HTML, I made it so that creating and editing a page is now only a matter of dropping files with the correct names in a folder, filling in product info, and pressing a button on a PHP web interface to update the website in a few seconds!</p>
|
||
<h3 style="margin: 0;">Lighter on the planet!</h3>
|
||
<p>Switching to HTML with minimal JavaScript halved the homepage size and the associated carbon emissions! The website now uses fewer server resources and is lighter on the planet!</p>
|
||
</div>
|
||
</div>
|
||
<div class="align_horizontal" style="background-color: var(--accent); width: 100%; padding: 2em 0 4em 0; margin-top: 4em; overflow-x: hidden;">
|
||
<div class="box">
|
||
<div class="column" style="width: 100%;">
|
||
<h2 style="color: black;">Mobile & tablet</h2>
|
||
<div class="row" style="gap: 1em;">
|
||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/mobile_home.png" /></div>
|
||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/mobile_product.png" /></div>
|
||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/mobile_filter.png" /></div>
|
||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/tablet_home.png" /></div>
|
||
<div class="column" style="--custom_width: 25%;"><img style="border-radius: 1em;" src="media/tablet_filter.png" /></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="box">
|
||
<div class="column" style="width: 100%; margin-top: 2em;">
|
||
<h2>Let's get in touch!</h2>
|
||
<p>Want to collaborate or discuss a project?</p>
|
||
<a href="../../about.html#contact" class="button" style="width: fit-content;">Contact me</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="spacer" style="--size: 2em"></div>
|
||
<a href="#" class="btt"><img class="bttimg" src="../../media/icons/arrow_upward.png"/></a>
|
||
</main>
|
||
|
||
<footer>
|
||
<div id="footer_box">
|
||
<div class="footer_item">
|
||
<p>Copyright © 2025 Ailyaut</p>
|
||
</div>
|
||
<div class="footer_item">
|
||
<a target="_blank" href="https://www.websitecarbon.com/website/ailyaut-robotfumeur-fr-index-html/" style="text-decoration: none;">
|
||
<p style="color: black; background-color: var(--accent); padding: 0.2em 0.6em 0.2em 0.6em ; border-radius: 1em;">
|
||
0.02g of CO₂/view
|
||
</p>
|
||
</a>
|
||
</div>
|
||
<div class="footer_item" style="justify-content: flex-end; gap: 1.75em;">
|
||
<a rel="me" href="https://mastodon.online/@ailyaut" target="_blank"><img src="../../media/icons/mastodon.png" class="icon" alt="Mastodon" title="Mastodon"/></a>
|
||
<a href="https://www.youtube.com/@ailyaut" target="_blank"><img src="../../media/icons/youtube.png" class="icon" alt="YouTube" title="YouTube"/></a>
|
||
<a href="https://ailyaut.bandcamp.com/" target="_blank"><img src="../../media/icons/bandcamp.png" class="icon" alt="Bandcamp" title="Bandcamp"/></a>
|
||
<a href="https://codeberg.org/ailyaut" target="_blank"><img src="../../media/icons/git.png" class="icon" alt="Git" title="Git"/></a>
|
||
<a href="../../rss.xml"><img src="../../media/icons/rss.png" class="icon" alt="RSS feed" title="RSS feed"/></a>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</body>
|