A responsive website UI design for The Collection at UB City, bringing its brands, events, journal and visitor information together across desktop and mobile screens.
The Project
This case study shows the website UI design for The Collection at UB City, Bengaluru: nine desktop screens and six mobile screens, from the home page and brand directory to events, a journal and contact.
Every screen below is the design as exported, shown whole. The notes describe what can be seen in the designs, in the order a visitor might meet them.
Deliverables
Discipline
Platforms
Project UB City — The Collection
Client UB City — The Collection
Scope 15 exported screens
The exports give no brief, dates, technology or launch status, so none are stated here. Desktop designs were exported for Home, About, Brands, Brand detail, Events, Journal and Contact; the mobile exports cover Home, About, Events and Contact.
Design direction
What the screens show, read from the exports: a restrained palette, an editorial type pairing, and the same page structure repeated from one screen to the next.
Descriptions are visual observations, not documented design decisions, and no colour values or font names are claimed.
Desktop
01
Arrival and story
The Home and About pages introduce the destination: a hero image, a welcome, and the first look at what is inside.
A long, single scroll that moves from the building to the brands, dining and art on offer.
The story page: a skyline hero, an introduction, a philosophy and a timeline.
02
Discovery
The Brands page is a directory; a brand’s own page gives it room for a photograph and the practical details.
A directory built to be scanned: filter, jump by letter, open a card.
One brand’s page, shown here with a watch brand.
The export still holds template tokens such as “MANAGER - NAME” and “CONTACT - NUMBER”.
03
Events
Events is the most developed section in the exports: upcoming and past views, filters, and a featured event.
Six upcoming events as a grid of cards.
The same page, reorganised by time.
A featured event opens as a panel over the list.
04
Editorial and contact
A Journal for longer stories, and a Contact page that sorts enquiries by purpose.
An editorial page: one featured story, then a browsable archive.
A form, the practical details, and three routes by enquiry type.
The export holds placeholder text in the form fields and a stock-map watermark.
Mobile
Six mobile screens, each shown complete. Scroll inside a frame to read its full length. Mobile exports were made for Home, About, Events and Contact; Brands, Brand detail and Journal were not part of them.
01
A tall hero, then the welcome text and image stacked, with brands and dining as one-card carousels.
02
One column: introduction, philosophy cards, a vertical timeline and two buttons.
03
Filters wrap over two rows; event cards run full width in a single column.
04
The featured event becomes an inline panel with Previous and Next controls.
05
Month sections each hold a sideways row of cards, with the next card peeking from the edge.
06
Labels sit above the fields; the enquiry tiles stack as full-width rows.
The “About” mobile export repeats one card title three times and the featured-event image area is a placeholder; both are shown as exported.
UI details
Close-ups cut from the desktop exports, for the patterns that recur from page to page.
Typography
Lettering cut from the Home page design. Font names are not stated in the export, so the type is described by how it looks.
Typography
Descriptions are visual observations from the exports, not documented type specifications.
The UB City designs keep a single palette, type pairing and page structure across nine desktop screens and six mobile screens, rearranging layouts for the smaller width.
