INTRO


During my master Digital Design, I started working in Figma for the first time and learned a little bit about the laws of UX. I was intrigued and wanted to know more about UX and UI.

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

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

I learned all this working on a fictive case called Cycle. During the master there was a course Speculative Design in which I set up a concept for a design idea. I decided to use this 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 artefact form this future.

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

Interconnected WiFi nodes will be placed on bikes and therefore 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 assignment, as well as the concept I created, beabove. As a 2049 society is a bit futuristic, I decided to take the idea of CYCLE to the present. Who would want to use CYCLE? This is where the persona came into the picture.

Persona
Due 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, of which independency, collectivity and sustainability are key ones.

Independency is relevant as I identified several movements in which people are becoming more skeptical towards big companies and more careful where their personal data. Within my own circles this is a big topic. An even bigger movement is living as green as possible, now the planet’s limits are becoming more and more visible. A collective peer to peer mesh network could be an outcome for these people.

Competitor research
CYCLE is about bikes and tech. Within a city in which E-bikes are booming, I figured I should first look at how others set up their website. This is also useful to get a general sense of the different parts of a commercial site as well as getting used to the UX terminology. See the competitor research below.

DEFINE


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

Lack of shopping basked
As the initial idea was a one product shop, there was a lot I could leave out. A shopping basked didn’t seem necessary for one product. Instead, an option for an immediate check out 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 basked would be more beneficial.

Live map
Adding a live map at the home page 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 for it from other brands – preferably big ones. As this is fictional anyway, why not reach for the top? CYCLE works together with Swapfiets and Van Moof, I decided.

About page
As not everyone will be known with the technicalities of a Mesh network, I reckoned it needed some explanation with an about page. Another great pro of an about page is the sense of identity for the brand.

Priority guides
Part for part, I filled in what these parts would look like in more detail. Adding textual content would help me later in the process when I would set up wireframes, I thought. Otherwise, what content will I work with? Besides, filling in what content would look like gives me an idea of the space and placement it needs on the website. Way better than working just with placeholders and Lorem Ipsum.

DEVELOP

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

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

Sometimes there was too much text in one place that I had to spread out, which was the case in ‘our story’. Other times, I completely redesigned a component, like I did with ‘results’. This component went from a card design to a text-based design, for the sake of variation. Also, it was a good place to reintroduce the characteristic fond of the brand.

Joris and I decided to leave out the check-out pages as this would become too much to focus on for now.

DELIVER



Final designs
When putting in the content, I figured the design lacked images. I created more place for images in sections such as ‘benefits’. Another thing that I had to solve was that there isn’t any content of the product, as it’s fictional. Therefore, I created illustrations of the product and all other related products. In ‘features’ I saw a chance to include those illustrations too, as a support for the text.