Biocode — 2024
![Globe](/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fjoonassandell-biocode-hero-globe.32ab744d.png&w=3840&q=80)
We have toreverse globalheating
We have to reverseglobal heating
Role
- Product design
- App development
- Web development
Biocode is Carbon footprint calculator that makes sense. It’s aimed for food brands, producers and farmers. It’s an easy tool for tackling the reporting chaos and clearly communicating environmental values to customers.
I’m currently working for Biocode as lead product designer and front-end developer. I’m responsible for crafting our design system and making sure our application’s code stays manageable. Work samples here are mainly from the latest brand redesign which included iconography, logo design and website renewal from my part.
![Biocode homepage and isometric Biocode application](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-home-hero.jpg&w=3840&q=100)
!['Who Biocode is for' cards and call to action to sign up for Biocode](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-home-whoitsfor.jpg&w=3840&q=100)
![Four main Biocode features and quote of Biocode's customer](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-home-calculate.jpg&w=3840&q=100)
![Call to action to discover Biocode reporting service](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-home-reporting.jpg&w=3840&q=100)
![Biocode application icon](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-icon.png&w=3840&q=75)
![Biocode for producers mark](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-producer-mark.png&w=3840&q=75)
![Biocode for products mark](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-product-mark.png&w=3840&q=75)
![Biocode for reporting mark](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-report-mark.png&w=3840&q=75)
![Example of Biocode's easy to use card](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-card-easy-to-use.png&w=3840&q=100)
![About us page of Biocode homepage](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-about.jpg&w=3840&q=100)
![Example of Biocode's agile card](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-card-agile.png&w=3840&q=100)
![Example of Biocode's insightful card](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-card-insightful.png&w=3840&q=100)
![Example of Biocode's credible card](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-card-credible.png&w=3840&q=100)
![Biocode feature page hero cards](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-features-hero.jpg&w=3840&q=100)
![Biocode feature page assessment image](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-features-assessments.jpg&w=3840&q=100)
![Mobile view of Biocode's homepage](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-mobile.png&w=3840&q=100)
![Biocode feature page results image](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-website-features-results.jpg&w=3840&q=100)
![Biocode for producers app in dark mode](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-producer-crop-dark.jpg&w=3840&q=100)
![Biocode app sign in page](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-auth.jpg&w=3840&q=75)
![Biocode app for producers overview page](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-producer-overview.jpg&w=3840&q=75)
![Biocode app for producers assessment page](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-producer-crop.jpg&w=3840&q=75)
![Example of Biocode's user interface elements](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-ui.jpg&w=3840&q=75)
![Another example of Biocode's user interface elements](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-ui-2.jpg&w=3840&q=75)
![Biocode for producers application teaser image](/_next/image?url=%2Fbiocode%2Fjoonassandell-biocode-app-producer-frame.jpg&w=3840&q=75)