Bridge Web and VR

Telecom company - Subscription Feature

e& universe is Etisalat’s virtual world platform that brings immersive digital experiences to UAE users. In 2023, e& partnered with VUZ360, a provider of 360° sports and entertainment content, to introduce a new subscription feature.

Company:

VIVERSE

Role:

UX&UI Designer

Year:

Jul 2024 - Aug 2024

Our team

1

UX&UI Designer

2

Developers

The Goal

Enable users to subscribe directly through the e& universe website to access unlimited VUZ360 streaming, bundled with their telecom billing.

Checkout page

The Problem

Before this project, e& universe had no subscription model. We had to design the feature from scratch, while ensuring it integrated smoothly into the existing website and virtual world.

In virtual world

The Challenges

The client requested that the streaming platform only be viewed in the virtual world.

Technical constraints:
- Can not change the payment API method.
- Video area limited to a small window in the virtual world web page.
- “Fullscreen” mode doesn’t behave like a real fullscreen experience.
- Video API integrate to e& universe virtual world.
- No way to control the video's volume or timestamp when watching.

These challenges made it critical to design a clear, transparent, and trustworthy flow that balanced user expectations with technical limitations.

Into the virtual world after subscribing

Research & Discovery

The project was stakeholder-driven, but I conducted a quick competitor analysis of other telecom and subscription checkout information to identify best practices.

Key insights:

Users expect straightforward pricing and trial clarity.

The checkout process must feel secure and fast.

These insights shaped the focus on transparency in subscription details and the ability to cancel within the free trial.

The project was stakeholder-driven, but I conducted a quick competitor analysis of other telecom and subscription checkout information to identify best practices.

Key insights:

Users expect straightforward pricing and trial clarity.

The checkout process must feel secure and fast.

These insights shaped the focus on transparency in subscription details and the ability to cancel within the free trial.

The project was stakeholder-driven, but I conducted a quick competitor analysis of other telecom and subscription checkout information to identify best practices.

Key insights:

Users expect straightforward pricing and trial clarity.

The checkout process must feel secure and fast.

These insights shaped the focus on transparency in subscription details and the ability to cancel within the free trial.

The project was stakeholder-driven, but I conducted a quick competitor analysis of other telecom and subscription checkout information to identify best practices.

Key insights:

Users expect straightforward pricing and trial clarity.

The checkout process must feel secure and fast.

These insights shaped the focus on transparency in subscription details and the ability to cancel within the free trial.

Checkout page

UX Design Approach

Due to time constraints and parallel projects, I skipped wireframes and prototypes and went directly into high-fidelity UI designs, supported by user flow diagrams.

Key UX Decisions:

Watch after subscribed: To maximize the chances that a new subscriber watches videos.
Entry point: Users discover the subscription in the homepage tab.
Flow design: One simple path — Landing → Subscription Info → CTA → Sign-in → Checkout → Payment → Virtual World.
Transparency: Display one plan, one price, with clear free trial and cancellation info.

Due to time constraints and parallel projects, I skipped wireframes and prototypes and went directly into high-fidelity UI designs, supported by user flow diagrams.

Key UX Decisions:

Watch after subscribed: To maximize the chances that a new subscriber watches videos.
Entry point: Users discover the subscription in the homepage tab.
Flow design: One simple path — Landing → Subscription Info → CTA → Sign-in → Checkout → Payment → Virtual World.
Transparency: Display one plan, one price, with clear free trial and cancellation info.

Due to time constraints and parallel projects, I skipped wireframes and prototypes and went directly into high-fidelity UI designs, supported by user flow diagrams.

Key UX Decisions:

Watch after subscribed: To maximize the chances that a new subscriber watches videos.
Entry point: Users discover the subscription in the homepage tab.
Flow design: One simple path — Landing → Subscription Info → CTA → Sign-in → Checkout → Payment → Virtual World.
Transparency: Display one plan, one price, with clear free trial and cancellation info.

Due to time constraints and parallel projects, I skipped wireframes and prototypes and went directly into high-fidelity UI designs, supported by user flow diagrams.

Key UX Decisions:

Watch after subscribed: To maximize the chances that a new subscriber watches videos.
Entry point: Users discover the subscription in the homepage tab.
Flow design: One simple path — Landing → Subscription Info → CTA → Sign-in → Checkout → Payment → Virtual World.
Transparency: Display one plan, one price, with clear free trial and cancellation info.

UI Design Approach

The design followed the e& universe design system, maintaining a tech-forward style with red and marron as primary and secondary colors.

Highlights:

Reused existing UI components (buttons, modals, forms).
Created new video control panel elements to handle streaming interactions.
Ensured WCAG AA compliance using Figma plugins to validate font size and color contrast.
Maintained a neutral but slightly exciting tone in messaging to encourage adoption.

The design followed the e& universe design system, maintaining a tech-forward style with red and marron as primary and secondary colors.

Highlights:

Reused existing UI components (buttons, modals, forms).
Created new video control panel elements to handle streaming interactions.
Ensured WCAG AA compliance using Figma plugins to validate font size and color contrast.
Maintained a neutral but slightly exciting tone in messaging to encourage adoption.

The design followed the e& universe design system, maintaining a tech-forward style with red and marron as primary and secondary colors.

Highlights:

Reused existing UI components (buttons, modals, forms).
Created new video control panel elements to handle streaming interactions.
Ensured WCAG AA compliance using Figma plugins to validate font size and color contrast.
Maintained a neutral but slightly exciting tone in messaging to encourage adoption.

The design followed the e& universe design system, maintaining a tech-forward style with red and marron as primary and secondary colors.

Highlights:

Reused existing UI components (buttons, modals, forms).
Created new video control panel elements to handle streaming interactions.
Ensured WCAG AA compliance using Figma plugins to validate font size and color contrast.
Maintained a neutral but slightly exciting tone in messaging to encourage adoption.

Collaboration & Handoff

I worked closely with the development team, validating constraints during design reviews.

Delivered specs and assets via Figma for smooth handoff.
Identified technical limitations (e.g., fullscreen issue) early and documented them to avoid surprises.

Subscription flows from different entrances

Credit card binding process in different situations

The process will vary depending on the user's login status and subscription status

Outcome & Learning

Outcome:

Delivered a simple, transparent subscription feature from scratch.
Balanced business goals (telecom billing, auto-renew) with user trust (clear trial & cancellation options).
Seamlessly integrated subscription with the virtual world experience.

Learnings:

Process flexibility: Skipping wireframes and going hi-fi can work under tight timelines if flows are clear.
Problem-solving focus: Transparency and clarity are key to driving adoption when constraints limit the ideal UX.
Collaboration: Early validation with developers prevents last-minute blockers.

Outcome:

Delivered a simple, transparent subscription feature from scratch.
Balanced business goals (telecom billing, auto-renew) with user trust (clear trial & cancellation options).
Seamlessly integrated subscription with the virtual world experience.

Learnings:

Process flexibility: Skipping wireframes and going hi-fi can work under tight timelines if flows are clear.
Problem-solving focus: Transparency and clarity are key to driving adoption when constraints limit the ideal UX.
Collaboration: Early validation with developers prevents last-minute blockers.

Outcome:

Delivered a simple, transparent subscription feature from scratch.
Balanced business goals (telecom billing, auto-renew) with user trust (clear trial & cancellation options).
Seamlessly integrated subscription with the virtual world experience.

Learnings:

Process flexibility: Skipping wireframes and going hi-fi can work under tight timelines if flows are clear.
Problem-solving focus: Transparency and clarity are key to driving adoption when constraints limit the ideal UX.
Collaboration: Early validation with developers prevents last-minute blockers.

Outcome:

Delivered a simple, transparent subscription feature from scratch.
Balanced business goals (telecom billing, auto-renew) with user trust (clear trial & cancellation options).
Seamlessly integrated subscription with the virtual world experience.

Learnings:

Process flexibility: Skipping wireframes and going hi-fi can work under tight timelines if flows are clear.
Problem-solving focus: Transparency and clarity are key to driving adoption when constraints limit the ideal UX.
Collaboration: Early validation with developers prevents last-minute blockers.

Reflection

This project strengthened my ability to deliver under constraints while still prioritizing the user.
If I had more time, I would have:

Conducted user testing with prototypes.
Added microinteractions for smoother transitions.

Despite the limitations, the outcome was a transparent, user-friendly subscription flow that supported e&universe’s expansion into immersive streaming.