Suqna
Context
The client runs an existing classifieds platform where people buy and sell cars, rent and sell homes, hire, trade furniture and electronics, and book services. It already had real users and traffic. The job wasn’t to reinvent the category but to bring order to a lot of surface area, while keeping the existing content model and categories.
The challenge
Six products pretending to be one. The friction showed up whenever a user crossed from one category, or one screen, to the next.
- Six card styles: every vertical, from property and cars to jobs and furniture, had its own card, so the eye had to relearn the layout in every category.
- A header doing too much: search, notifications, saved items and the location switcher fought for the same strip and buried the categories.
- No line between browsing and deciding: the listing page looked like the results page.
- Posting felt like paperwork: a long form before sellers knew where they were, the point where we expected first-time sellers to drop off.
Approach: fix the shared patterns
Instead of polishing screens one by one, I fixed the patterns every screen shares. Everything on the platform serves one of three jobs, find, sell or manage, so the map was organised around those jobs and not around six verticals.
One listing card
Image, price, two lines of specs, location. Learned once, read everywhere.
Category-first header
Verticals get their own row; secondary actions move into one quiet icon rail.
Decision support
On the detail page, photos and price lead and a side panel keeps seller, contact and a finance calculator in view.
One teal
Used only for primary actions, prices and active states, so it always means “do this next”.
- Find9 screens
- Motors
- Real estate for sale
- Real estate for rent
- Jobs
- Services
- Furniture & electronics
- Search results
- Listing detail
- Chat with seller
- Listing detail
- Sell6 screens
- Place an ad
- Choose category
- Ad details
- Choose plan
- Checkout
- Ad is live
- Place an ad
- Manage6 screens
- My ads
- Favourites
- Saved searches
- Notifications
- Chats
- Settings
Every vertical funnels into the same search results and listing detail: six entry points, one way of deciding.
- Start
- End
- Screen
- System action
- Decision
Buyer: from search to a conversation
- Start: Home: one search for everything
- Decision: Know the category?
- Yes: tap a vertical
- No: just type
- Screen: Search results with filters
- Screen: Listing detail
- End: Chat with the seller
Seller: post an ad in short steps
- Start: “Place an ad”, centre of the tab bar
- Screen: Pick a location
- Screen: “What are you listing today?”
- Screen: Category and sub-category
- Screen: Details, one group at a time
- Screen: Review, plan and checkout
- End: Ad is live
Identity and design system
The identity had to be quiet enough to let six verticals of content lead, and recognisable at 18px in a header.
From Figma A brand identity sheet. From the Suqna identity sheet in Figma. Suqna is a placeholder brand that stands in for the client.
The system in use
Colour
Contrast is calculated against white or the darkest ink, whichever is higher. Click a swatch to copy its hex.
Teal: actions, prices and active states only
Neutrals
Typefaces
- Plus Jakarta SansLogo, headings and marketing moments
- RobotoInterface: dense listing data that stays easy to scan
One listing card for every vertical
- Image4:3 photo, 8px corners, the same crop in every vertical
- PriceTeal and first: the one number people scan for
- SpecsTwo lines at most: what it is, then its key facts
- LocationLast, in muted text
Web: home, search and detail
The homepage leads with one search across all verticals, with quick tabs so nobody has to pick a category before typing, then popular sub-categories and curated rows that all reuse the same card.
Posting an ad
Instead of a long form, sellers start with one clear question, “What are you listing today?”, and move through eight short steps: category, sub-category, details, review, plan, summary and checkout, always knowing where they are.
Mobile: full parity
The app carries the same card system, category grid and search, tuned for one hand, with “Place an ad” in the middle of the tab bar where the thumb rests. Nothing important lives only on the big screen.
Home Motors “What are you listing?” Account
Prototype: posting an ad on mobile
Tap through the redesigned mobile flow, from browsing to posting a car ad in short, guided steps.
1 / 8 Home: one search, every vertical
Tap the screen, swipe, or use ← → to move through the flow.
Reflection
The hardest part was never a single screen, it was keeping six very different verticals feeling like one product. The card system and one restrained accent did most of that work: once someone learns what a teal price means on the homepage, that knowledge travels with them.
- Next: usability sessions measuring time from search to contacting a seller, and an Arabic right-to-left version of the system.
