Syra Coffee App:
Digital Shot Card & Shopify-Powered
Online Ordering
Syra Coffee
App Redesign
Syra Coffee App:
Digital Shot Card & Shopify-Powered
Online Ordering
Redesign of the Syra Coffee App following a rebrand,
enhancing their core product: the Shot Card,
and improving the loyalty experience.
Redesign of the Syra Coffee App following a rebrand, enhancing their core product: the Shot Card, and improving the loyalty experience.
Redesign of the Syra Coffee App following a rebrand,
enhancing their core product: the Shot Card,
and improving the loyalty experience.
Research
UX Strategy
UI Design
Prototyping
Project Overview
Project Overview
Project Overview
Syra Coffee is one of Barcelona's biggest specialty coffee companies, with its own roastery and coffee shops, most in Barcelona and across Spain. Following a recent brand revamp. that modernized Syra's image and expanded its digital presence, this project focused on redesigning the Syra Coffee mobile App to create a seamless and engaging experience for their customers.
Syra Coffee is one of Barcelona's biggest specialty coffee companies, with its own roastery and coffee shops, most in Barcelona and across Spain. Following a recent brand revamp. that modernized Syra's image and expanded its digital presence, this project focused on redesigning the Syra Coffee mobile App to create a seamless and engaging experience for their customers.
Syra Coffee is one of Barcelona's biggest specialty coffee companies, with its own roastery and coffee shops, most in Barcelona and across Spain. Following a recent brand revamp. that modernized Syra's image and expanded its digital presence, this project focused on redesigning the Syra Coffee mobile App to create a seamless and engaging experience for their customers.
Timeline
Timeline
Timeline
12 Weeks - 2023
12 Weeks - 2023
12 Weeks - 2023
Rol
Rol
Rol
Product Designer
Product Designer
Product Designer
The Challenge
We focused on evolving the Syra Coffee mobile experience beyond its initial MVP. The first version was functional but limited: users couldn’t track their transactions, and the Shot Card, a key loyalty mechanic, still existed only in paper form, disconnected from the app.
We set out to bring Syra’s loyalty system into the app, creating a smoother experience for customers and a scalable foundation for future features.
The Challenge
We focused on evolving the Syra Coffee mobile experience beyond its initial MVP. The first version was functional but limited: users couldn’t track their transactions, and the Shot Card, a key loyalty mechanic, still existed only in paper form, disconnected from the app.
We set out to bring Syra’s loyalty system into the app, creating a smoother experience for customers and a scalable foundation for future features.
E-commerce integration
The app lacked online shopping, creating a disjointed experience. Our challenge was to unify physical and online products.
Digital Shot Card
The physical shot card, a key loyalty mechanic, was easily lost or forgotten by customers, leading to a disconnected experience and a lack of valuable data for the business.
Loyalty
The Beans program was strong but lacked features for users to interact with each other. We wanted to expand this system, with the goal of creating a more connected experience.
Brand Alignment
Ensuring the app's design fully reflected Syra Coffee's recent brand update.
E-commerce integration
The app lacked online shopping, creating a disjointed experience. Our challenge was to unify physical and online products.
Digital Shot Card
The physical shot card, a key loyalty mechanic, was easily lost or forgotten by customers, leading to a disconnected experience and a lack of valuable data for the business.
Loyalty
The Beans program was strong but lacked features for users to interact with each other. We wanted to expand this system, with the goal of creating a more connected experience.
Brand Alignment
Ensuring the app's design fully reflected Syra Coffee's recent brand update.
The Solution
E-commerce Integration
Survey feedback indicated a strong need from users to be able to purchase both in-store and online products through the app, and to earn 'Beans' for all purchases.
A key challenge was merging the online store (e-commerce) with the option for customers to collect products in-store, complicated by the fact that some products are exclusive to one channel (e.g., beverages available for in-store pickup only, equipment available online only), while others are available in both (e.g., coffee beans).
17%
Of users expressed the need to purchase
products online or for home delivery.
17%
Of users expressed the need to purchase products online or for home delivery.
The Solution
Survey feedback indicated a strong need from users to be able to purchase both in-store and online products through the app, and to earn 'Beans' for all purchases.
A key challenge was merging the online store (e-commerce) with the option for customers to collect products in-store, complicated by the fact that some products are exclusive to one channel (e.g., beverages available for in-store pickup only, equipment available online only), while others are available in both (e.g., coffee beans).
E-commerce Integration
The Solution
E-commerce Integration
Survey feedback indicated a strong need from users to be able to purchase both in-store and online products through the app, and to earn 'Beans' for all purchases.
A key challenge was merging the online store (e-commerce) with the option for customers to collect products in-store, complicated by the fact that some products are exclusive to one channel (e.g., beverages available for in-store pickup only, equipment available online only), while others are available in both (e.g., coffee beans).
17%
Of users expressed the need to purchase
products online or for home delivery.
The Tag System
Inspired by desktop research of successful e-commerce models like Walgreens, we implemented a tag-based filtering system within the app's 'Shop' section. This allows users to easily identify product availability:
Collect Now
'Collect Now' tag:
Lets users instantly identify which items are ready for in-store pickup.
FLAT WHITE
€2,50 /
250
Collect Now
For Delivery
'For Delivery tag:
Helps users know which products can be sent directly to their home via Shopify.
MOCCAMASTER KBG SELECT
€230,00 /
23000
For Delivery
Collect Now
For Delivery
'Collect Now' & 'For Delivery' tag:
Some items are both! In those cases, we used both tags to keep it clear.
Collect Now
For Delivery
COQUEIRO
€10,00 /
1000
Filtering by tag: Users can filter by availability with one tap.
Filtering by tag
Shop view with tags
Checkout process
The Tag System
Inspired by desktop research of successful e-commerce models like Walgreens, we implemented a tag-based filtering system within the app's 'Shop' section. This allows users to easily identify product availability:
Collect Now
'Collect Now' tag
Lets users instantly identify which items are ready for in-store pickup.
FLAT WHITE
€2,50 /
250
Collect Now
For Delivery
'For Delivery' tag
Helps users know which products can be sent directly to their home via Shopify.
MOCCAMASTER KBG SELECT
€230,00 /
23000
For Delivery
Collect Now
For Delivery
'Collect Now' & 'For Delivery'tag
Some items are both! In those cases, we used both tags to keep it clear.
Collect Now
For Delivery
COQUEIRO
€10,00 /
1000
Shop view with tags
Filtering by tag
Filtering by tag: Users can filter by availability with one tap.
Checkout process
The Tag System
Inspired by desktop research of successful e-commerce models like Walgreens, we implemented a tag-based filtering system within the app's 'Shop' section. This allows users to easily identify product availability:
Collect Now
'Collect Now' tag: Lets users instantly identify which items are ready for in-store pickup.
FLAT WHITE
€2,50 /
250
Collect Now
For Delivery
'For Delivery tag: Helps users know which products can be sent directly to their home via Shopify.
MOCCAMASTER KBG SELECT
€230,00 /
23000
For Delivery
Collect Now
For Delivery
'Collect Now' & 'For Delivery'tag: Some items are both! In those cases, we used both tags to keep it clear.
Collect Now
For Delivery
COQUEIRO
€10,00 /
1000
Shop view with tags
Shop view with tags
Filtering by tag
Filtering by tag: Users can filter by availability with one tap.
Shop view with tags
Checkout process
The Challenge
We focused on evolving the Syra Coffee mobile experience beyond its initial MVP. The first version was functional but limited: users couldn’t track their transactions, and the Shot Card, a key loyalty mechanic, still existed only in paper form, disconnected from the app.
We set out to bring Syra’s loyalty system into the app, creating a smoother experience for customers and a scalable foundation for future features.
The Challenge
We focused on evolving the Syra Coffee mobile experience beyond its initial MVP. The first version was functional but limited: users couldn’t track their transactions, and the Shot Card, a key loyalty mechanic, still existed only in paper form, disconnected from the app.
We set out to bring Syra’s loyalty system into the app, creating a smoother experience for customers and a scalable foundation for future features.
The Solution
Digital Shot Card
As one of Syra’s core products, the Shot Card needed to evolve beyond its physical format. Turning it into a digital feature wasn’t just a design challenge, it was a strategic move to align with user expectations and strengthen business scalability.
We had the following goals with this transition:
Automatic purchase tracking and no fraud risk.
Real time data on purchase habits, redemptions, and store performance.
Launch new Shot Cards in hours, not weeks. Seasonal promos like our Summer Drinks Shot Card are easy to roll out and test, without printing costs.
No more lost, damaged, or forgotten cards.
The Solution
Digital Shot Card
As one of Syra’s core products, the Shot Card needed to evolve beyond its physical format. Turning it into a digital feature wasn’t just a design challenge, it was a strategic move to align with user expectations and strengthen business scalability.
We had the following goals with this transition:
No more lost, damaged, or forgotten cards.
Automatic purchase tracking and no fraud risk.
Real time data on purchase habits, redemptions, and store performance.
Launch new Shot Cards in hours, not weeks. Seasonal promos like our Summer Drinks Shot Card are easy to roll out and test, without printing costs.
The Solution
Digital Shot Card
As one of Syra’s core products, the Shot Card needed to evolve beyond its physical format. Turning it into a digital feature wasn’t just a design challenge, it was a strategic move to align with user expectations and strengthen business scalability.
We had the following goals with this transition:
Automatic purchase tracking and no fraud risk.
Real time data on purchase habits, redemptions, and store performance.
Launch new Shot Cards in hours, not weeks. Seasonal promos are easy to roll out and test, without printing costs.
No more lost, damaged, or forgotten cards.
E-commerce integration
The app lacked online shopping, creating a disjointed experience. Our challenge was to unify physical and online products.
Digital Shot Card
The physical shot card, a key loyalty mechanic, was easily lost or forgotten by customers, leading to a disconnected experience and a lack of valuable data for the business.
Loyalty
The Beans program was strong but lacked features for users to interact with each other. We wanted to expand this system, with the goal of creating a more connected experience.
Brand Alignment
Ensuring the app's design fully reflected Syra Coffee's recent brand update.
E-commerce integration
The app lacked online shopping, creating a disjointed experience. Our challenge was to unify physical and online products.
Digital Shot Card
The physical shot card, a key loyalty mechanic, was easily lost or forgotten by customers, leading to a disconnected experience and a lack of valuable data for the business.
Loyalty
The Beans program was strong but lacked features for users to interact with each other. We wanted to expand this system, with the goal of creating a more connected experience.
Brand Alignment
Ensuring the app's design fully reflected Syra Coffee's recent brand update.
The Solution
Loyalty
Results from survey, customer feedback, and barista interviews confirmed how much customers value Beans. However, the program felt limited, so we set out to make loyalty more social, versatile, and scalable.
The Wallet
We designed a "Wallet" as the central hub where users can manage their digital Shot card, rewards, transactions, and gifts. This section made the loyalty program more tangible and personal.
Gifting feature
We designed a gifting feature that allows users to send a coffee, a digital card, or transfer “Beans” directly through the app. This feature was added in response to a recurring user request: the ability to share with friends.
Seasonal & Campaign Features
The digital infrastructure we designed allowed the loyalty system to evolve beyond a simple points mechanic. It gave the business the flexibility to launch seasonal Shot Cards, special promotions, and community-driven campaigns directly through the app, all without the limitations of physical elements.
The Solution
Loyalty
Results from survey, customer feedback, and barista interviews confirmed how much customers value Beans. However, the program felt limited, so we set out to make loyalty more social, versatile, and scalable.
The Wallet
We designed a "Wallet" as the central hub where users can manage their digital Shot card, rewards, transactions, and gifts. This section made the loyalty program more tangible and personal.
Gifting feature
We introduced a gifting feature that allows users to send a coffee, a digital card, or transfer “Beans” directly through the app. This feature was added in response to a recurring user request: the ability to share with friends.
Seasonal & Campaign Features
The digital infrastructure we designed allowed the loyalty system to evolve beyond a simple points mechanic. It gave the business the flexibility to launch seasonal Shot Cards, special promotions, and community-driven campaigns directly through the app, all without the limitations of physical elements.
The Solution
Loyalty
Results from survey, customer feedback, and barista interviews confirmed how much customers value Beans. However, the program felt limited, so we set out to make loyalty more social, versatile, and scalable.
The Wallet
We designed a "Wallet" as the central hub where users can manage their digital shot card, rewards, transactions, and gifts. This section made the loyalty program more tangible and personal.
Gifting feature
We introduced a gifting feature that allows users to send a coffee, a digital card, or transfer “Beans” directly through the app. This feature was added in response to a recurring user request: the ability to share rewards with friends.
Seasonal & Campaign Features
The digital infrastructure we designed allowed the loyalty system to evolve beyond a simple points mechanic. It gave the business the flexibility to launch seasonal Shot Cards, special promotions, and community-driven campaigns directly through the app, all without the limitations of physical elements.
The Solution
Brand Alignment
The redesign respects the app’s original purpose, so we aimed to translate Syra Coffee’s renewed identity into the digital space, making sure the app conveyed the brand’s new look and feel.
The Solution
Brand Alignment
The redesign respects the app’s original purpose, we aimed to translate Syra Coffee’s renewed identity into the digital space, making sure the app conveyed the brand’s new look and feel.
The Solution
Brand Alignment
The redesign respects the app’s original purpose, so we aimed to translate Syra Coffee’s renewed identity into the digital space, making sure the app conveyed the brand’s new look and feel.
Home Screen
Features Product
Before
Before
After
Before
After
After
Featured Products
Before
Before
After
After
A vibrant and balanced visual approach that brings Syra Coffee’s new brand to life on every screen.
Home Screen
Before
After
