Freedom Mobile Promo Engine
Want to see the results before reading?
​
When users log into their Freedom Mobile account to upgrade their phone or change their plan, they might be eligible for special promotions—some available to everyone, others personalized just for them. But you’d hardly notice. The alert banner announcing these offers sat quietly at the top of the screen, easy to scroll past without a second glance. Clicking it opens a cluttered side drawer packed with legal copy that takes longer to read than buying a phone itself. And when users finally decide to check out? There’s no clear feedback showing which promotions—if any—are actually being applied. What should feel like a rewarding experience ends up being uncertain and overlooked.
​​
How might we... create an interactive promotions experience that clearly surfaces available deals and empowers customers to choose the best one for their needs?
Who were we designing this for?
-
Current Freedom Mobile customers looking to upgrade their device.
​
The Team
Me! (UI/UX Designer)
2 Product Owners
2 development teams
My Responsibilities
As a UI/UX designer, my role was to:
01.
Analyze customer promotion experiences from leading telecom providers to identify market expectations and highlight differentiation opportunities.
02.
Own the end-to-end creation of high-fidelity mock-ups and prototypes for the promo engine UI, ensuring seamless behaviour across myAccount and Shop states.
03.
Collaborate closely with development teams for each flow (myAccount and Shop) to confirm technical feasibility and align on constraints.
04.
Iterate designs based on developer and stakeholder feedback, refining interactions and usability accordingly.
Scope & Constraints
-
The UX team working on this project was extremely lean (3 main contributors with 1 additional designer working in a consulting capacity).
-
2 separate development teams meant 2 different agile processes and sprint timelines to take into consideration. If one team fell behind, the other could be blocked in completing their work.
-
Because this was integrating net-new functionality, there were occasionally unanticipated error scenarios and back-end constraints.
The Process
Interested in a deeper look? View the Figma here.
The Research Stage
During the research phase, I looked at competitor interfaces and explored design inspiration on Pinterest to identify opportunities for improvement. Fido’s expandable bottom drawer for displaying promotions stood out as a compelling concept, though it lacked interactivity. Building on the idea, I decided to re-imagine the UI with a refreshed brand aesthetic and a series of interactive animations that users could click and scroll through.
The Mockup Stage
In this stage, I developed a set of static mockups in Figma to illustrate the drawer’s expansion behaviour and the various states of the “promo cards” contained within it. To accommodate the lengthy legal copy often required in Freedom’s telecommunications offers, I designed an animation to flip each card over and reveal scrollable legal text on the back.
For prototyping, my team leveraged a combination of Figma Make and generative coding with Claude to bring the concept to life and test user interactions.
The Requirements Stage
During the review process, I collaborated with our product owners to define the necessary customization within our Contentful CRM to ensure long-term scalability. To streamline future updates, we established a component-based framework that would let the UX team handle most edits and new offer placements directly, without additional development support.
The Development Stage
After briefing in the mocks and prototypes, I stayed close to the development team to see the designs come to life. When technical challenges came up, we’d problem-solve together to find solutions that balanced user needs with feasibility. At the same time, I was taking front-end development courses, which helped me better understand their perspective and collaborate more effectively.
​​
The Demo Stage
During the final stages of development, we put together a fully interactive demo in our staging environment using a test login specifically for stakeholders. This allowed them to explore the feature for themselves, without accidentally touching anything in other development environments.
​​
Launch!
Reflections
What I learned from this project
-
Complicated asks get complicated solutions.
-
Good communication is a quick and easy way to build trust.
-
Never aim for perfect, because it's the enemy of the good.
What I would do differently
- Expanded my research to global and non-telecommunications examples​
-
Leaned on Figma Make earlier in the prototyping process. I wasted a lot of time trying to add complicated interactions manually when I didn't need to.