• Design,
  • Development,
  • Announcement,
2020-10-13

New headless website for Swedish second hand chain Ge för livet

The Swedish second hand chain Ge för livet (Give for life) wanted to update the design on their website. They needed a site that would speak to their audience, that would be easily translated into their social media presence and most importantly; a site that they could easily update themselves as they keep growing. 

Ge för livet is a non-profit organization that gives all their proceeds to charity organizations working with human rights in various ways, i.e children’s rights, and against trafficking. Therefore they wanted to keep this project small, but still get a big change for the better. We want to support causes like theirs and set up a small team to accommodate their wishes. 

Reusable components make the site easy to build and update

As we talked to the client, it was clear that the main brief was to make it easy for them to later be able to customize the site themselves. To achieve this goal our designer worked closely with one of our developers. What they came up with was a design built on a few reusable components used throughout the site.

One component with two different color themes.

The designer on this project, Elin Hesselstrand really liked working on it: “It was a fun challenge to create the design within the frames of reusable components. There’s more to consider when the design should be able to work with various content. I was happy to solve this together with the developer and manager.” 

Furthermore these reusable components will make updates in color etc easier, because changes to one block will be displayed in all similar blocks across the site.

Visual elements that the website design is based on.

“For the design of the website I was inspired by the squared form of social media. I also wanted all the colorful and funky things a second-hand store can contain to be part of the visual communication. One of my colleagues used the term “modern grandmother” to describe the website, and I think that sums it up quite well. Hopefully, the warm and human-focused design can inspire more people to buy and donate things to Ge för livet.” - Elin Hesselstrand, head of visual design.

Headless 

We’ve already written about the benefits of Headless in a different blog post, so it was an obvious choice for us to build a headless site for Ge För Livet. For content we used DatoCMS, which is where all the data is set up and accessible for the client. We built the front end on Svelte. For our main developer for this project, Maíra Martins, this was the first time writing on Svelte. She loved it! This is her own thoughts about the project:

“From the beginning, we wanted to give the client control over the website, so we created reusable blocks of content in the CMS. I was really impressed by how easy it is to translate this concept into reusable code components with Svelte. Coming from React, Svelte feels much faster and easier to work with - I am totally in love with it! The best part of this experience is we managed to deliver a beautiful, incredibly fast website, in less time than it would take if we were building this on React or Gatsby.”

The website's home page contains some of the main components.

No hard code

Some clients aren’t too confident making design changes on their site with no supervision. For them we provide that service - which means it doesn’t really matter if we do some hard coding - since we will be the ones rewriting the code if any changes are needed. However, since Ge för livet wants to be able to make changes themselves it is important that all data can be accessed through a CMS. Since Ge för livet has a manager with a lot of knowledge in this area, we are happy to build the site so that further changes can be left in her hands. This also keeps the project small, so that more of the organization's resources can go towards charity.

Skrivet av Elin Sundberg, Elin Hesselstrand, Maíra Martins