# Villagio

> A service storefront for a community and an app for residents.

- Design: Obel
- Services: Brand, Product Design, Mobile, UX/UI, Design System
- Year: 2023
- Page: https://obel.ai/works/villagio

![Villagio concierge page listing example services: gifts, shopping, tickets, reservations](https://cdn.sanity.io/images/x3doe9lb/production/57e86294dacc1955dbe2ce11ff636dd1fd31e070-3720x2040.png?w=1600&fit=max&auto=format)

## A storefront outside, an app inside

The project split in two: a storefront for the community's services outside, an app for residents inside. Outside, landing pages and a catalog of services from different contractors. Inside, entry passes, access levels and service bookings.

The internal app is for residents only. We built it as a prototype: registration and residence applications, entry passes, family and staff access, objects, payments and subscriptions, documents, meter readings, and a contact center.

![Hands holding a tablet showing the Restaurant Agava-M partner page](https://cdn.sanity.io/images/x3doe9lb/production/b2d26c66c27920572149e01134d7acb279c1945c-1120x686.png?w=1600&fit=max&auto=format)

![Villagio phone app: a resident's home screen with unpaid bills and a pay button](https://cdn.sanity.io/images/x3doe9lb/production/f415d027d6aa2f61ee2a2107149dcfcec6b8a1b7-1500x1500.png?w=1600&fit=max&auto=format)

![Phone showing “Villagio Life — care about your house” beside a modern villa](https://cdn.sanity.io/images/x3doe9lb/production/c334c0182a57e3ade428b7e1b84d80e2e0755b06-3652x1980.png?w=1600&fit=max&auto=format)

The web side broke into different jobs. Some places needed a temporary stand-in, a placeholder on the site. Some needed an idea tested with a landing page. Some needed a catalog assembled from the contractors already working in the community. We made the visual language for that catalog.

![Grinfild community services screen on a phone](https://cdn.sanity.io/images/x3doe9lb/production/f236e116d2f406dd976652aea36dcceb6d04d901-2148x1332.png?w=1600&fit=max&auto=format)

![Requests and news screen on a phone](https://cdn.sanity.io/images/x3doe9lb/production/8b5d177f69da5198c654c67dc0b0b18df1a315bd-2148x1332.png?w=1600&fit=max&auto=format)

![Examples of services catalog on the Villagio site](https://cdn.sanity.io/images/x3doe9lb/production/10d5fe110d9086f145f646055e0c048b73dc08a9-2148x1332.png?w=1600&fit=max&auto=format)

![Villagio services and news screens on two phones](https://cdn.sanity.io/images/x3doe9lb/production/b6d0cc7d6875eebef90783a2f984570e90ba09bf-2148x1332.png?w=1600&fit=max&auto=format)

![Villagio services and news screens on two phones](https://cdn.sanity.io/images/x3doe9lb/production/f334ef48319188f36cafd6ffd83e42a99a164c52-2148x1332.png?w=1600&fit=max&auto=format)

![Restaurant Agava-M partner page with the contact panel](https://cdn.sanity.io/images/x3doe9lb/production/74ec3884723e6ff19f68174fd151567ba2302e9d-3720x2040.png?w=1600&fit=max&auto=format)

## In short

A resident orders an entry pass and calls up services in one app.

## 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)
- [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)
- [4fresh](https://obel.ai/works/4fresh.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