← All projects

NILO / Product UI & website

A small link.
A whole workspace.

We designed the app people return to and the website that brings them there. One place to publish a page, make an introduction, take bookings and see what people do next.

NILO’s workspace in dark mode, with the profile editor beside an iPhone preview of Maya Chen’s page
The NILO workspace, shown with an example profile.

01 / Workspace

Keep the work in view.

A link in a bio can be a portfolio, a contact card or the start of a booking. The challenge was to fit those jobs into one app without making a first page feel like a large project.

We gave the workspace a clear centre: your page. Content, Design and Details sit beside a live preview. Bookings, contacts, short links and QR codes have their own places in the navigation. You can make one edit without losing sight of the whole page.

NILO design tab with page presets and a live iPhone preview
Start with a design. Choose a starting point, then open the controls for type, spacing, colour and card style as you need them.
Instagram-specific setup form asking for a username and offering profile or post display
Ask for what makes sense. Instagram asks for a username and offers Instagram display options. The fields change with the platform.

From first edit to first share

  1. Set upChoose a name and give the page a starting shape.
  2. Make it yoursAdd content and see how it looks as you work.
  3. PublishChoose when the draft becomes the page people see.
  4. ShareSend the link or hand someone a digital card.

02 / Identity

One identity.
Many ways to meet.

The public page gives the full picture. The digital card is for the moment someone wants to save a contact, send a message or keep a link. It carries the page’s colours and type, so it feels like the same person made both.

That distinction guided the visual system. Maroon marks the app’s primary actions. Warm paper and charcoal keep the editing surfaces quiet. The creator’s chosen style stays visible in the preview and belongs to the things they share.

  • Maroon
  • Pink
  • Paper
  • Charcoal
Maya Chen’s example contact card on mobile, with Save contact, Share card and QR actions
The public card puts the contact action first.

03 / Insights

What happened after the link?

An open, a click and a saved contact tell different stories. Insights gives each its own place, with filters for a page, card, short link or QR code and a comparison to the previous period.

The overview answers what changed. The audience, destination and activity views let people look closer when they have a specific question.

NILO Insights showing separate counts for opens, clicks, QR opens, contact downloads, messages and bookings
Insights overview with fictional example activity.

04 / Website

Let the product make the introduction.

Actual page examples do more than a list of features can. The homepage puts them beside a place to try a username, so visitors can picture both what they’ll make and where it will live.

Feature pages, templates, help and account screens continue the same story. The website has room for expressive colour and movement. The workspace carries the brand in smaller doses, where it can guide the next action.

NILO’s maroon homepage with pink type, an iPhone example reel and a field to try a username
The public homepage introduces the app through example pages and a place to begin.

In use

Designed to be lived in.

NILO is live. The same design system runs from the first visit to the editor, public profiles, digital cards and the tools people use to share and manage them.

Visit NILO ↗ Explore the workspace demo ↗
LET’S WORK TOGETHER

Let’s Talk.

Tell us what your brand, website, or product needs to do.

Discuss a project ↗