Rivo Loyalty Page
Designed and developed a Shopify loyalty landing page that aligns with Graza’s vibrant branding while overcoming platform limitations.
Introduction
Graza, a playful, natural olive oil brand, needed a loyalty landing page that effectively communicated its VIP tier system and referral program. As part of my application for the Digital Designer (LATAM) position at Rivo, I was tasked with designing and developing this page using Rivo’s Shopify page builder. This was my first time working with Shopify, adding a new layer of challenge to the project.
Goals
The goal was to create a modern, engaging loyalty and referral program page while staying within the constraints of Rivo’s Shopify-based system. The challenge was ensuring Graza’s branding remained strong, despite the page builder’s limited flexibility. Key objectives included:
- Designing a visually engaging landing page in Figma that reflects Graza’s fun, hand-drawn aesthetic.
- Developing the design within Rivo’s page builder on Shopify, maintaining both functionality and branding consistency.
- Ensuring a clear, user-friendly experience to explain the loyalty system seamlessly.
Research
I began by reviewing Rivo’s provided inspiration. Examples of other loyalty programs built with their tool. However, I noticed a key issue: they all looked similar due to the platform’s rigid structure. This led me to research brands that had successfully customized their Rivo loyalty pages.
Challenges
- Limited customization in Rivo made it difficult to fully implement my vision.
- Maintaining Graza’s unique aesthetic was challenging due to the structured Shopify page builder.
- Learning Shopify and Rivo’s code required quickly familiarizing myself with its structure and limitations.
Design Process
I approached the design by leveraging Graza’s brand assets creatively while working around Shopify’s constraints. Key solutions included:
- Incorporating Graza’s playful, hand-drawn characters to make the loyalty program feel more engaging. These visuals didn’t just decorate the page—they explained the program in a fun, interactive way.
- Creating subtle motion effects using PremierPro to bring key illustrations to life.
- Inspecting Rivo’s existing code to understand where I could push customization, allowing for small but impactful branding tweaks.
Style
My drawings
Final Design
The final design successfully maintains Graza’s bold, playful identity while working within Shopify’s limitations, enhances usability to make the loyalty program easy to understand and visually engaging, and incorporates custom illustrations and animations to create a unique user experience.
Learnings
This project challenged me to think outside the box and work creatively within constraints. I gained hands-on experience in Shopify development, improved my ability to customize third-party page builders, and reinforced the importance of storytelling in UX/UI design. Most importantly, I proved to myself that even with limitations, strong branding and creativity can shine through.