Designed and built a jewellery eCommerce website for a Hira's Gem & Jewellery that is established since 1999.

The brief was straightforward: take a 25-Year-Old Jewellery brand with no digital presence and give it a website that feels as premium as the products themselves.

The challenge was balancing elegance with usability. Jewellery buyers browse with emotion, but they also need clear product information and trust signals before they make a purchase.

Every design decision, from the typography pairing to the spacing between product cards, was made with that balance in mind.

A CMS was built entirely in Framer so the client can manage products and categories without touching a single line of code.

The project started in Figma, where the visual direction, layout structure, and component system were defined before a single line of code was written.

Working in Figma first allowed the client to review and approve the design direction early, avoiding costly revisions during development.

Once the design was signed off, it was rebuilt in Framer, not imported or converted, but built natively to take full advantage of Framer's CMS, interactions, and responsive controls.

This approach results in a cleaner, more maintainable site compared to auto-imported designs.

Jewellery shoppers rarely browse from one device. A customer might discover the store on Instagram from their phone, compare pieces on a tablet at home, and return on desktop to place an order.

The site was built to serve all three without compromise. The layouts, image sizes, and touch targets were all tested and adjusted for each breakpoint in Framer.

Mobile wasn't treated as a scaled-down version of desktop. The mobile layout was designed separately, with a focus on thumb-friendly navigation and fast visual scanning.

Gold pricing in Pakistan fluctuates daily, and customers buying jewellery need accurate, current rates to make informed decisions. Rather than relying on the client to manually update a number on the site, the gold rate section is connected to a live API that pulls the latest prices automatically.

This removes a daily manual task for the client while adding genuine value for visitors. They can check the current rate and browse products in the same place.

The product pages were built using Framer's CMS, which means the client can add new pieces, update prices, or swap out photos entirely without touching any code.

Collections are managed through a simple content panel, no developer dependency after handoff.

Each product card is designed to lead with the photo first, since jewellery is a visual purchase.

Details like weight, material, and price are surfaced cleanly without cluttering the browsing experience.

All product photography was shot and edited as part of this project.

Shooting jewellery is technically demanding, small reflective surfaces, intricate details, and the need to show true metal colour all require controlled lighting and careful post-processing.

Photos were edited in Adobe Photoshop to ensure accurate colour representation, clean backgrounds, and consistent visual style across every product.