Loading

My friend and I were both long time vegans. When someone who was interested in going vegan asked us for help, we didn't have much for online resources to give them.

The closest thing to a true online Vegan Kit were small, poorly designed embedded pages in Animal Organization websites with plenty of links guilt-tripping users into shelling out money to the organization to save animals (but rarely to go vegan).

Pictures of our process: personas (with coffee stains), navigation structure, free association, interface design

We designed VeganKit to be an all-in-one resource for those already vegan or wishing to become so. We didn't want to shove gory imagery in people's faces, accepted no money--not even from advertisements, and didn't even put our names on it. We wanted our users to focus on veganism and the animals who benefit from it.

Technology

To build VeganKit, I used Kickstrap 1, which was unreleased at the time. As with most of my implementations of Bootstrap, I prefer to use elements like navigation and scaffolding, but leave the rest of the design to custom CSS. In this case, we wanted to have a measured set of columns take on a certain color and bleed out to the top, left, and bottom, while the rest of the page remained white. It's harder than it sounds without using CSS's new flexbox.

After numerous users suggested we offer the site in multiple languages and many had offered to translate for us, we organized a group of volunteer translators, upgraded to Django, and currently have the site available in Swedish, Spanish, Romanian, German, and many other languages coming soon.