# 4fresh

> An eco-marketplace: design system, product card, checkout.

- Design: Obel
- Services: Product Design, Mobile, UX/UI
- Year: 2021
- Page: https://obel.ai/works/4fresh

![Product card screens on two phones](https://cdn.sanity.io/images/x3doe9lb/production/e9bcf6a33a9a98a997456082365d4dc7de148505-3720x2040.png?w=1600&fit=max&auto=format)

## A product card for an eco catalog

We pulled the components into a design system and brought the interface to one style. Then we took on the product card and the checkout. In an eco-market a product gets assembled and described differently, and fitting that into a card is the hardest part.

We pulled the components into a design system: a library of reusable elements and a shared design language across the store.

![Orange shopping bag with products](https://cdn.sanity.io/images/x3doe9lb/production/8ee13ea6e43af0ac2faafaa024abcb03ecacc4ca-1120x686.png?w=1600&fit=max&auto=format)

![About product screen](https://cdn.sanity.io/images/x3doe9lb/production/279f4e80afb07aeab9fa46fcf024fc4958f7b16f-1500x1500.png?w=1600&fit=max&auto=format)

![Product characteristics and cart screens](https://cdn.sanity.io/images/x3doe9lb/production/19cfb57f8c53b00d7b6df39d84bd3ec84565e240-3720x2040.png?w=1600&fit=max&auto=format)

## In short

We designed the product card for the eco segment: here a product has to be assembled and described differently.

## Other cases

- [Government sites](https://obel.ai/works/gov-services-uae.md)
- [Government portal](https://obel.ai/works/government-portal.md)
- [Bank 3.0](https://obel.ai/works/bank-3-0.md)
- [Greenlock · v2](https://obel.ai/works/greenlock-v2.md)
- [Payments app, UAE](https://obel.ai/works/payments-app.md)
- [Insurance, UAE](https://obel.ai/works/insurance-uae.md)
- [EventGenie](https://obel.ai/works/eventgenie.md)
- [Greenlock · v1](https://obel.ai/works/greenlock-v1.md)
- [Ecto](https://obel.ai/works/ecto.md)
- [Holodilnik](https://obel.ai/works/holodilnik.md)
- [Villagio](https://obel.ai/works/villagio.md)
- [Bank 2.0](https://obel.ai/works/bank-2-0.md)
- [Olymp Trade](https://obel.ai/works/olymp-trade.md)
- [Fulgur Ventures](https://obel.ai/works/fulgur-ventures.md)
- [Energy](https://obel.ai/works/energy.md)
- [Acceldata](https://obel.ai/works/acceldata.md)
- [Wicked Reports](https://obel.ai/works/wicked-reports.md)
- [B-152](https://obel.ai/works/b-152.md)
- [Laava Tech](https://obel.ai/works/laava-tech.md)
- [Practiqa](https://obel.ai/works/practiqa.md)
- [Enabla](https://obel.ai/works/enabla.md)
- [ISPMA](https://obel.ai/works/ispma.md)
- [Sidekick](https://obel.ai/works/sidekick.md)
- [YouGig](https://obel.ai/works/yougig.md)

## More

- [Works](https://obel.ai/works.md): every project and its case study
- [Process](https://obel.ai/process.md): the eight steps of a project
- [About](https://obel.ai/about.md): who we are and how we work
- [Home](https://obel.ai/index.md)
- [Pick a time](https://calendar.google.com/calendar/appointments/schedules/AcZssZ2cbQTr6gKYFyk6UIi9tyiwKMsWNlr7-SkDHU_ZDUGkuL8X8IrItxc4DGjAgWsHAgwIBTxERTWh): book a call with Obel
- [hello@obel.ai](mailto:hello@obel.ai): to start a project