PETSA RENTALEQUIPMENT RENTAL CATALOGUE
A growing equipment inventory becomes a calm technical tool: find the kit, verify the essentials and assemble one human-confirmed rental request.
A searchable cinema-equipment catalogue that turns a complex rental inventory into a clear path from browsing to direct enquiry.
- STATUS
- LIVE / CLIENT WORK
- SECTOR
- FILM EQUIPMENT / RENTAL
- ROLE
- PRODUCT DIRECTION + BUILD
- DELIVERED
- INFORMATION ARCHITECTURE / UX/UI / RESPONSIVE FRONT-END
PROJECT NOTELIVE CLIENT WEBSITE / PUBLIC INVENTORY, PRICES AND AVAILABILITY MAY CHANGE / NO PERFORMANCE CLAIM.
THE PROJECT IN CONTEXT
What the site had to solve.
A professional rental inventory can become difficult to scan as cameras, lens sets and production tools accumulate. Petsa needed to make the range useful to crews without reducing it to a spreadsheet or a generic shop grid.
How can an evolving equipment catalogue feel precise enough for professional shoots and still remain simple to browse from a phone on set?
- AUDIENCE
- Professional production crews and rental customers browsing equipment for shoots in Dubai. Exact role segmentation was not supplied.
- PRIMARY JOB
- Find relevant equipment, compare practical details, collect items in a bag and contact the rental team for confirmation.
- CORE CONSTRAINT
- Cameras, lens sets and production tools create a dense and changing catalogue. Price, availability and inventory are operational data, and the website must not imply an automated checkout or guaranteed stock.
- BIMZI ROLE
- PRODUCT DIRECTION + BUILD
- PUBLICATION STATE
- LIVE / CLIENT WORK
Design is the decisions between screens.
These are qualitative interface changes, not invented performance metrics.
- 01PRESSURE
A long inventory behaves like a spreadsheet.
DECISIONCreate categories, search, sorting and dedicated equipment routes.
CHANGEVisitors can narrow the range and arrive at a specific item deliberately.
- 02PRESSURE
Product cards alone do not support a rental decision.
DECISIONPlace galleries, description, price context, specs and availability fields together.
CHANGEThe facts needed for an initial rental request sit next to the action.
- 03PRESSURE
A retail checkout would overpromise automated fulfilment.
DECISIONUse a bag followed by direct enquiry and human confirmation.
CHANGEThe interface supports multi-item requests while preserving operational truth.
SOFT TECHNICAL CLARITY
A system, not a moodboard.
- TYPE
- Open Sans Variable carries headings, utility and body; hierarchy comes from scale and weight rather than a decorative second family.
- COMPOSITION
- Layered translucent brand plates, rounded utility surfaces, clean product cutouts and restrained depth replace a generic retail grid.
- SIGNATURE
- The P mark behaves as a translucent layered object; the same soft depth gives the catalogue a quiet identity.
- CANVAS#F7F8FA
Catalogue canvas and equipment detail surface
MEASURED / Petsa/tokens.css - PRIMARY#17324D
Technical headings, navigation and key facts
MEASURED / Petsa/tokens.css - SURFACE MUTED#EEF2F5
Quiet utility zones and selected surfaces
MEASURED / Petsa/tokens.css - ACCENT#315D75
Secondary actions and technical emphasis
MEASURED / Petsa/tokens.css - MUTED INK#4C6171
Secondary product and rental information
MEASURED / Petsa/tokens.css
This is BIMZI's evidence-led case analysis, not an official client brand guide. Source-code facts are marked MEASURED; independent audit, licensing and field-performance gaps remain explicit.
Typography
- FAMILYMEASURED
Open Sans Variable through next/font/google, Latin subset, display swap
SOURCE / Petsa/layout.tsx - ROLE MODELMEASURED
Heading, sans and mono aliases intentionally resolve to one family
SOURCE / Petsa/tokens.css - LICENSE REVIEWUNKNOWN
Distribution and deployment licence evidence
SOURCE / BIMZI case audit
Grid & spacing
- BREAKPOINTSMEASURED
30rem / 48rem / 64rem / 80rem / 90rem mobile-first system
SOURCE / Petsa/tokens.css - CATALOGUEMEASURED
Desktop filter sidebar at 80rem; URL-synchronised search, sort and facets
SOURCE / Petsa/catalogue - PRODUCTMEASURED
Two-column gallery/detail composition at 64rem
SOURCE / Petsa/product route
Components
- DISCOVERYMEASURED
24-item pages with category, search, sort and filter controls
SOURCE / Petsa/catalogue - PRODUCT DETAILMEASURED
Gallery, semantic specs and set-content table
SOURCE / Petsa/product route - REQUEST BAGMEASURED
Quantity, date range, PDF export, share and direct messaging handoff
SOURCE / Petsa/bag
Responsive
- FILTERSMEASURED
Disclosure replaces the sidebar below 80rem
SOURCE / Petsa/catalogue.css - PRODUCTMEASURED
Gallery and facts stack on small screens; mobile thumbnails are 72px
SOURCE / Petsa/product.css - TARGETSMEASURED
End-to-end tests include target viewports and a 44px action minimum
SOURCE / Petsa/tests
Implementation
- STACKMEASURED
Next.js 15.5.21 / React 19.1.9 / TypeScript
SOURCE / Petsa/package.json - CONTENTMEASURED
Typed static catalogue with optional validated Sanity source
SOURCE / Petsa/catalog-content - MEDIAMEASURED
Next Image sizes; priority only for active primary media
SOURCE / Petsa/components
Quality status
- ACCESSIBILITY / CONDITIONALMEASURED
Semantic filters/tables, pressed states, aria-live gallery, forced colours and reduced motion exist
SOURCE / Petsa/source + tests - PERFORMANCE / CONDITIONALMEASURED
Paged results and image sizing are verified in source and tests
SOURCE / Petsa/source + tests - FIELD PERFORMANCENOT VERIFIED
Core Web Vitals and low-end device profiling
SOURCE / BIMZI case audit - OPERATIONSUNKNOWN
Prices, availability and public catalogue mode require owner validation
SOURCE / BIMZI case audit
The path through the product.
The visual system supports this route; it does not replace it.
- 01Search or select a category
- 02Scan equipment results
- 03Open an item and review gallery and facts
- 04Add required kit to the bag
- 05Send one enquiry for team confirmation
Selected screens.
Direct captures of the working website, shown across desktop and mobile.
What BIMZI made, and what is not claimed.
The live website now provides a focused entry page, searchable equipment catalogue, detailed item pages, a bag and direct rental-enquiry paths. Inventory, prices and availability remain operational content owned by Petsa Rental; no conversion claim is made here.
Contribution
- Product direction
- Catalogue information architecture
- Search, filter and detail UX
- Responsive interface
- Bag-to-enquiry front-end flow
Known unknowns
- Inventory, price and availability are owned by Petsa and may change.
- Real-time stock synchronisation is not claimed.
- Traffic, enquiry and conversion impact were not supplied.
- No independent usability or accessibility certification is claimed.
06 / WHY THIS CASE MATTERS