Jamaica patty
Personality in Motion
Services
Digital Design
Marketing Materials
Client
I-AM Associates
Info
Jamaica Patty is bold, colourful and full of energy, and the website needed to feel the same. The brief was to turn it into a simple, one-page experience, using movement and animation to capture that personality while keeping the key information easy to find.
A New Energy
The previous site no longer reflected Jamaica Patty’s bold, colourful and energetic personality. The new one-page design puts that character front and centre, using movement and animation throughout to make the experience feel just as lively as the company itself.
Behind the scenes
Exploring Movement
I started by looking at animation-led websites to see how movement was being used in different ways, from small interactions and animated type to elements triggered by scroll. This gave me a better idea of how much movement to use and where it could add something to the Jamaica Patty site.
Working Out the Structure
Since the site was moving from a multi-page structure to a single page, a big part of the UX work was deciding what information actually needed to stay. I went through the existing site's pages and pulled out the most important content, then worked out how it could flow naturally as one continuous page rather than feeling cut down. Alongside this, I took part in briefing the photographer, exploring two directions early on, one focused on people and environment, the other simpler, centred on the food against a plain background. The client ended up choosing a mix of both styles.
Getting It Live
I communicated directly with the client throughout the project, then briefed the developer on the designs and checked in throughout development. Most of the focus at this stage was thorough testing, making sure the site and its animations worked well across different devices and browsers before launch. The final site brought the brand to life with moving type, animated backgrounds, image reveals on scroll, and a playful touch on the menu, where the cursor turns into a patty on hover.