← All work

Laytly

Teams lose track of visual assets across four tools that don't talk to each other. I designed the system that holds it together.

Client
Lately Pte. Ltd
Role
Product & UI/UX Design, freelance
Scope
Design system, auth, onboarding, chat, library and albums, account, shopping — web and mobile
Outcome
Sole designer on one product, across web and mobile.
Laytly: the logo, the group media library, albums and the full-screen photo viewer

Context

Laytly is built around the thing that actually accumulates in a conversation — the media. Anything shared in a chat lands in a Library that groups itself by month, and in Albums the group names for itself, so a photo sent in November is still findable in March. Before it, that work lived across three or four disconnected tools. I joined Lately Pte. Ltd as the only designer alongside a cross-functional team, and carried the product across web and mobile.

Decisions · 01

Build a system, not a set of screens

Chose
A component library and shared rules, built once the same pattern had to work in more than one place.
Rejected
Designing each screen to its own brief, which is faster for the first ten screens.
Why
The product was growing across platforms. Once a component had to survive four contexts, consistency stopped being a preference and became the actual work.
Evidence
The component sheet carries bookmark, browse button, checkbox, toggle, tab bar and slider — drawn once each, then reused rather than redrawn per screen.
The Laytly design system: Poppins in four weights and a five-colour palette
Poppins in four weights and five colours, with #3E9AB1 carrying the whole brand and grey, black and two near-whites doing everything else. Small enough that a component can be assembled from it without anyone making a decision — which is the point of having one.
Decisions · 02

Argue with evidence, not taste

Chose
Bringing research and use cases into design review so decisions could be defended on their merits.
Rejected
Presenting finished visuals and asking for approval.
Why
Working with engineers meant every decision had to survive a conversation. A choice I couldn't explain wasn't finished.
Evidence
Velda's three pain points — tracking what she sent and received, version control, one directory that stays current — are the product's three features restated in her words.
Persona: Velda Bunthara, 31, freelance graphic designer in Atlanta
Velda, 31, freelancing across several client projects at once. Her pain points read as the product brief in disguise: tracking what she sent and what she received, version control, and one directory that stays current. Every argument in review could point back here.
Decisions · 03

Let the conversation do the filing

Chose
Three tabs inside every conversation — Chat, Library, Albums — so anything shared is already filed by the time someone goes looking for it.
Rejected
A separate uploads area, the way a drive would hold it.
Why
Nobody files the same thing twice. A library that lives somewhere other than where the sharing happened is stale within a week, and then the team is back to four tools. Making it the same place turns filing into a by-product of talking.
Evidence
The Library groups itself by month — November 2024, October 2024 — so a photo stays findable without anyone naming anything.
A private Laytly thread with its Library and full-screen photo viewer
A private thread beside its Library. The photos in the message are the photos in the Library, grouped by month, each carrying its own likes, comments and bookmark — so a picture can be found again by when it happened, not by remembering who sent it.
A Laytly group: Creative Mind, its Library and its self-named Albums
The same structure at group scale. Creative Mind runs 4,713 members, and the Albums are the ones the group named itself — Recents, Dessert, Holiday in Singapore, Badminton — rather than folders an admin had to set up first.
Decisions · 04

Draw the states nobody demos

Chose
Empty, filled, invalid and disabled drawn for every form — including the password rule written out before it is broken.
Rejected
Shipping the happy path and letting the build invent the rest.
Why
The error state is where a product either explains itself or blames the user. Leaving it undrawn means someone decides it in a hurry, and what gets chosen then is the quickest thing rather than the kindest.
Evidence
Sign-up keeps its button disabled until the terms box is ticked, so the form refuses before it can fail.
Sign in and sign up in empty, filled and error states
Sign in and sign up in every state they can hold: empty, filled, and each validation failure written directly under the field that caused it instead of in a banner at the top.
The Laytly account surface: password reset, notification preferences and account deletion
The account surface, including the parts a demo skips — password reset end to end, notification preferences split to the individual toggle, and Delete Account given the same weight on the page as Save Changes.
Decisions · 05

Connect by scanning, not by typing a number

Chose
A personal QR code as the first way to add someone, with search by name or number kept as the fallback.
Rejected
Phone-number lookup as the main route in.
Why
Adding someone usually happens with both people in the room. A code held up removes the step where two people read digits to each other and one of them mishears.
Evidence
The fallback is real rather than token: 256 names behind an A–Z index, searchable by name or number.
The Connect tab: personal QR code, scanner and the friend list
My QR Code and Scan QR Code as one toggle, with copy, share and save sitting on the code itself. The 256-name friend list stays one tap away for everyone who was added the old way.

Shipped

Laytly onboarding: advanced security, QR connection and the cloud image repository
Onboarding makes three promises in the order they matter: the conversation is private, the connection takes two seconds, and the library lives in the cloud rather than on the phone.
The Laytly chat list, contact profile, and group creation
Chats filtered by unread, groups, favourites and archived, with multi-select for the housekeeping a list this long eventually needs — read, archive, delete — and a contact profile that opens on the media you have exchanged.
Shopping as a third tab inside a Laytly conversation, with cart and checkout
Shopping sits as a third tab inside a conversation, so the recommendation and the checkout are the same thread instead of a link out to somewhere else and a screenshot back.

What I'd change

I built the design system later than I should have. By the time it existed there were already inconsistencies to migrate rather than prevent. On the next product I'd set the tokens before the second screen, not the twentieth.