Interconnected WiFi nodes are placed on bikes and spread across the city, resulting in a completely decentralized MESH network. It is fully self-sufficient and green-powered due to the dynamo charging battery connected to the bikes.

INTRO


During my Master’s in Digital Design, I started working in Figma for the first time and learned about the principles of UX. I was intrigued and wanted to know more about UX and UI design.

Therefore, I signed up for Ladies at UX, hoping that a mentor could guide me. I was lucky to be matched with Joris Feitz, who has been a UX designer at Achtung for over five years.

In this mentorship, I learned the basics of Figma, the steps to follow (and in what order) when designing a website, and how to set up a design system.

I learned all this while working on a fictive case called Cycle. During the master’s program, there was a course on Speculative Design in which I set up a concept for a design idea. I decided to use this concept as a case study for the mentorship and designed a website for the fictional product Cycle.


CASE STUDY

Challenge
Imagine a fictive future in which there is a global technological recession, and design an artifact from this future.

Solution
A future like this – in which one cannot rely on a steady network provided by multinationals – requires a bottom-up solution:

Interconnected WiFi nodes will be placed on bikes, spread across the city, resulting in a completely decentralized MESH network. It will be fully self-sufficient and green-powered due to the dynamo charging battery connected to the bikes.

DISCOVER


Briefing
See the briefing for the master’s assignment, as well as the concept I created above. As a 2049 society is a bit futuristic, I decided to bring the idea of CYCLE into the present. Who would want to use CYCLE? This is where the persona came into the picture.

Persona
Due to a lack of time and resources, this persona isn’t based on actual people. Not ideal, but we had to make it work anyway. Instead, I thought of what kind of person would value the characteristics of a mesh network, such as independence, collectivity, and sustainability.

Independence is relevant. There is an increasing number of movements in which people are becoming more skeptical of big companies and more careful about giving away their data. Besides, an increasing number of people is starting to live more green, as the planet’s limits are becoming more and more visible. Combine these movements and a collective, peer-to-peer mesh network could be interesting.

Competitor research
CYCLE is about bikes and tech. In a city where e-bikes are booming, I figured I should first look at how others have set up their websites. This was also useful to get a general sense of the different parts of a commercial site and get used to UX terminology. See the competitor research below.

DEFINE


Sitemap
Based on the competitor research, I set up a sitemap with the parts my site would need. Let’s look at some of them in more detail.

Lack of shopping basked
As the initial idea was for a one-product shop, there was a lot I could leave out. A shopping basket didn’t seem necessary for just one product. Instead, an option for immediate checkout made more sense. Later, I decided that there could be additional products such as an extra lock or a booster. In this case, a shopping basket would be more beneficial.

Live map
Adding a live map to the homepage seemed like a good idea as it immediately shows the collectiveness and liveliness of the community around the product.

Collabs
One of the things that makes a product trustworthy is recognition from other brands – preferably big ones. CYCLE collaborates with Swapfiets and Van Moof.

About page
As not everyone would be familiar with the technicalities of a mesh network, I thought it needed some explanation on the ‘about page’. Another great benefit of an about page is the sense of identity it creates for the brand.

Priority guides
Part by part, I filled in what these sections would look like in more detail. Adding actual copy would help me later in the process when I set up wireframes. Besides, writing down what content would actually look like gave me an idea of the space and placement it needs on the website. It’s seemed better than working with placeholders and Lorem Ipsum copy.

DEVELOP

Wireframes & iterations
In this case study, I included two versions of the many wireframes I iterated.

The first thing that jumps out when comparing the two versions is the difference in margins, padding, and other whitespace. The second wireframe looks far more organized and is easier on the eyes.

Sometimes, there was too much text in one place, and I had to spread it out, as was the case with "Our Story." Other times, I completely redesigned a component, such as "Results." This component went from a card design to a text-based design, for the sake of variation. It was also a good opportunity to reintroduce the characteristic font of the brand.

Joris and I decided to leave out the checkout pages, as they would have taken too much focus at this stage.

DELIVER



Final designs
When putting in the content, I realized the design lacked images. I created more space for images in sections such as "Benefits." Another challenge was the fact that there was no content for the product, as it’s fictional. Therefore, I created illustrations of the product and all other related products. In the "Features" section, I saw an opportunity to include these illustrations as a visual aid for the text.