C
r
e
a
t
i
n
g

a

b
r
a
n
d

a
n
d

w
e
b

a
p
p

f
o
r

a

S
w
i
s
s

s
t
a
r
t

u
p

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.

P
r
o
j
e
c
t

g
o
a
l
s

0
1
B
r
a
n
d

r
e
c
o
g
n
i
t
i
o
n

a
n
d

c
o
n
t
a
c
t
T
h
e

c
h
a
l
l
e
n
g
e

f
o
r

t
h
i
s

p
r
o
j
e
c
t

w
a
s

b
u
i
l
d
i
n
g

a

n
e
w

b
r
a
n
d

a
n
d

e
-
c
o
m
m
e
r
c
e

s
i
t
e

a
t

t
h
e

s
a
m
e

t
i
m
e
.

T
h
e
r
e
f
o
r
e

I

h
a
d

t
o

m
a
r
r
y

t
h
e

e
m
o
t
i
o
n
a
l

a
n
d

t
e
c
h
n
i
c
a
l

r
e
q
u
i
r
e
m
e
n
t
s

o
f

a

f
l
e
d
g
l
i
n
g

b
r
a
n
d
.
0
2
M
o
d
e
r
n

a
n
d

s
c
a
l
a
b
l
e
T
h
e

c
h
a
l
l
e
n
g
e

f
o
r

t
h
i
s

p
r
o
j
e
c
t

w
a
s

b
u
i
l
d
i
n
g

a

n
e
w

b
r
a
n
d

a
n
d

e
-
c
o
m
m
e
r
c
e

s
i
t
e

a
t

t
h
e

s
a
m
e

t
i
m
e
.

T
h
e
r
e
f
o
r
e

I

h
a
d

t
o

m
a
r
r
y

t
h
e

e
m
o
t
i
o
n
a
l

a
n
d

t
e
c
h
n
i
c
a
l

r
e
q
u
i
r
e
m
e
n
t
s

o
f

a

f
l
e
d
g
l
i
n
g

b
r
a
n
d
.
0
3
M
a
i
n
t
a
i
n
a
b
l
e
E
v
o
p
a
c
k

i
s

a

m
u
l
t
i
-
n
a
t
i
o
n
a
l

c
o
m
p
a
n
y
,

o
p
e
r
a
t
i
n
g

i
n

E
n
g
l
i
s
h
,

G
e
r
m
a
n

a
n
d

F
r
e
n
c
h
.

T
h
e
y

n
e
e
d
e
d

a

d
i
g
i
t
a
l

e
s
t
a
t
e

t
h
a
t

t
h
e
y

c
a
n

e
a
s
i
l
y

u
p
d
a
t
e
,

i
n
c
l
u
d
i
n
g

a
l
l
o
w
i
n
g

c
u
s
t
o
m
e
r
s

t
o

t
r
a
n
s
l
a
t
e

c
o
n
t
e
n
t

b
e
t
w
e
e
n

d
i
f
f
e
r
e
n
t

l
a
n
g
u
a
g
e
s
.

A laptop and phone showing the EVOPACK web app

EVOPACK wanted to differentiate themselves with a sustainable angle from the traditional chemical industry while conveying reliability and trust. I began by exploring various themes for the logo, such as incorporating DNA, evolution, arrows, preservation, nature and movement.identifying themes Everything started off with the logo

The agreed upon brand strategy focuses on being personal, innovative and professional.

To minimise design and development work, EVOPACK's resulting design system is based on atomic design principles.

Building connections — We included features on all pages to promote engagement with potential customers and investors.

Reusable page structures allowed EVOPACK's website to be built quickly and easily scaled.

The web app needed to support multiple languages — such as English, German and French — so we built language context into the app which users can easily toggle between.

Eventually we migrated the website to Webflow and connected it to the in-built CMS so that any team member could easily manage the website going forward.

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.

That’s all for this one.
Fancy one of these next?

Screens showing the redesigns iOS clock app

H
o
w

g
r
o
u
p
e
d

a
l
a
r
m
s

c
a
n

i
m
p
r
o
v
e

t
h
e

u
s
a
b
i
l
i
t
y

o
f

o
n
e

o
f

w
o
r
l
d
'
s

m
o
s
t
-
u
s
e
d

a
p
p
s

Three phones showing the updated order confirmation page UI

Creating a brand and web app for a Swiss start up

Project goals

Brand recognition and contact

Modern and scalable

Maintainable

The agreed upon brand strategy focuses on being personal, innovative and professional.

To minimise design and development work, EVOPACK's resulting design system is based on atomic design principles.

Building connections — We included features on all pages to promote engagement with potential customers and investors.

Reusable page structures allowed EVOPACK's website to be built quickly and easily scaled.

The web app needed to support multiple languages — such as English, German and French — so we built language context into the app which users can easily toggle between.

Eventually we migrated the website to Webflow and connected it to the in-built CMS so that any team member could easily manage the website going forward.

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.

That’s all for this one.Fancy one of these next?

How grouped alarms can improve the usability of one of world's most-used apps

Improving the UX and conversion of EE's confirmation page

I work across design and development to ensure the best possible experience

Affinity Publisher

Photoshop

Adobe XD

Protopie

After Effects

Affinity Photo

Spline

Adobe Illustrator

HTML5

React

JavaScript

TypeScript

Next.js

Figma

Framer

Affinity Designer

CSS3

Webflow

Jest

Sass

Git

jQuery

GraphQL

GitLab

Navigation

Let's connect

C
r
e
a
t
i
n
g

a

b
r
a
n
d

a
n
d

w
e
b

a
p
p

f
o
r

a

S
w
i
s
s

s
t
a
r
t

u
p

P
r
o
j
e
c
t

g
o
a
l
s

B
r
a
n
d

r
e
c
o
g
n
i
t
i
o
n

a
n
d

c
o
n
t
a
c
t

M
o
d
e
r
n

a
n
d

s
c
a
l
a
b
l
e

M
a
i
n
t
a
i
n
a
b
l
e

That’s all for this one.
Fancy one of these next?

H
o
w

g
r
o
u
p
e
d

a
l
a
r
m
s

c
a
n

i
m
p
r
o
v
e

t
h
e

u
s
a
b
i
l
i
t
y

o
f

o
n
e

o
f

w
o
r
l
d
'
s

m
o
s
t
-
u
s
e
d

a
p
p
s

I
m
p
r
o
v
i
n
g

t
h
e

U
X

a
n
d

c
o
n
v
e
r
s
i
o
n

o
f

E
E
'
s

c
o
n
f
i
r
m
a
t
i
o
n

p
a
g
e