Prime — premium restaurants
I designed a premium restaurant section for Rafeeq, built a working prototype in React and made its entry animation in code.
Rafeeq
A super-app in Qatar with food delivery, grocery and a marketplace.
A separate space for premium restaurants
Prime is a hand-picked selection of restaurants inside food delivery, not a subscription. The agency gave us the logo and a dark style, and I built the interface on top of it. I made the banner myself, and we generated the cuisine icons together with the agency, following my guide.
I made two concepts based on the product requirements: show the restaurants, the chefs and the dishes. Both had a similar structure. The main differences were the background and where the logo sat.
The Prime logo, banner and cuisine icons.
Regular card
Prime card
Fitting more into a restaurant card
The card needed the usual name, rating and delivery time, plus the chef and a carousel of dishes.
I’d have left the dishes out of the card in the list, to give the restaurant and chef more room. We went with the fuller version, so I worked on fitting everything in without making the list hard to scan.
Trying it on a phone. I built and deployed the React prototype with an AI agent. The team could open it on a phone and try the section, instead of just clicking through Figma screens.
I also suggested a short entry animation for the first visit. It lasts about a second and doesn’t block the screen. I built it with the same tech the app uses, so developers could see exactly how it should move.
What changed at handoff
One animation package didn’t work with the developers’ React version. I changed versions and got it working on my side, but we still couldn’t get the same result on theirs.
In the end we shipped a simpler animation, close to the original.
The original animation in the prototype. The released one is simpler.
What I’d do differently. I’d start talking to the developers earlier, before building the animation. Then we could agree on versions and integration from the start and ship the animation as I designed it.
Prime was released in October 2026. We’re collecting the metrics now.
Next case
Design review before release
Designers didn’t see builds before release. I found the people who could change that and made design review a step in the team’s workflow.