Creating a new brand and web app from scratch for a Swiss start up
Evopack, a Swiss/German start-up, asked me to build a brand and website to represent their revolutionary and sustainable packaging solutions. As part of this, I created a custom design system and built their web app using React, SCSS, Figma and TypeScript.
Project goals
01
Brand recognition and contact
The challenge for this project was building a new brand and e-commerce site at the same time. Therefore I had to marry the emotional and technical requirements of a fledgling brand.
02
Modern and scalable
The challenge for this project was building a new brand and e-commerce site at the same time. Therefore I had to marry the emotional and technical requirements of a fledgling brand.
03
Maintainable
Evopack is a multi-national company, operating in English, German and French. They needed a digital estate that they can easily update, including allowing customers to translate content between different languages.
Everything started off with the logo
EVOPACK initially approached me with a brief to create a logo that differentiated the company from the traditional chemical industry while conveying reliability and trust. Keeping in mind EVOPACK’s mission of making product protection more sustainable, I explored various themes for the logo, such as incorporating DNA, evolution, arrows, steps, nature and movement. After a couple review sessions with the team at EVOPACK, the chosen logo option was the horizontal time-glass shape with the arrow going around it.
Creating a useful and personal brand for the business to use going forward
EVOPACK operates in a traditional B2B market were reputation and trust is imperative. Simualtaneously, EVOPACK wanted to appear fresh and different to established packaging and chemical companies. Building on a restrained yet bold...
Modular from the ground up
To minimise design and development work, I used atomic design principles when creating EVOPACK's scalable design system. Working up from a core colour pallette and atomic components, such as buttons, links and text, all higher order components are created with lower order components.
Focused on developing connections
During the short term, Evopack's primary goal was to build connections with potential customers and investors. To support this goal, I designed and developed a streamlined contact section that uses email.js to communicate between the front-end applcation (React) and server. The contact form react component appears at the bottom of all relevant pages to encourage visitors to engage with it and other components, such as the quote section below, are designed to highlight the ambition and individuals driving the company.
Reusable page structures
Part of making the website easy for EVOPACK to maintain and expand over time was to create page designs that were flexible and scalable. I created templates for resource-based pages (e.g. downloads, events, FAQs), products, services, applications (i.e. learning about use cases) and legal content so that new pages could be easily spun up as the company expands. Focussing on a standardised approach to components and pages allowed me to build out the website very quickly while allowing the content of each page to maintain a different feel on each.
Content editable in multiple languages
As Evopack operates in regions speaking German, English and French, they required a web app that allows users to quickly switch between languages. The solution I came up with avoided automatic translators as these can often misinterpret the nuances of languages, instead opting a custom solution involving content written in all required languages and using a toggle on the site to switch between the desired content language. To achieve this, I used the useContext hook in React to make the chosen language available throughout the application and organised the JSON file with the website content into language objects at the top level. On the page level components, the application fetches the JSON file and pulls in the content based on which lanuage is active in the react context.
Rebuilding the website as the company grows
After about a year, EVOPACK had evolved and expanded their product offerings to include both hardware products and services. These offerings alongside additional topics, such as careers, events and downloads, needed to be reflected on the website and easily edited by the core team. Using the design system and brand guidelines, I rebuilt EVOPACK’s website on Webflow and connected it to the in-built CMS so that any team member could easily manage the website going forward.
Next steps and lessons learned
After officially handing over all brand assets, the brand guidelines and the website, my work on EVOPACK was complete and I moved to a more consultative role. One of the main lessons learned from this project is the importance of pre-agreed checkpoints and customer feedback. Agreeing on deadlines for each deliverable and reviewing them before proceeding to the next stage helped us move forward while minimising revisions.
