Bridge Web and VR

Subscription and Purchase

The largest telecom operator in the UAE is collaborating with a video company to create a new subscription feature on the website. Consumers can pay via credit card or telecom bill and watch 360 videos immediately.

Company:

VIVERSE

Role:

UX&UI Designer

Year:

Jul 2024 - Aug 2024

The Team

1

UX&UI Designer

1

Product Manager

2

Developers

The Goal - seamless integration

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

Checkout page

The Problem - from 0 to 1 feature

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 - techncial constrain

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 the website.
- 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 - gain common knowledge in a short time

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.

Reference for 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 video 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 video 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 video 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 video 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 existing 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.
Align with the 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 existing 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.
Align with the 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 existing 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.
Align with the 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 existing 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.
Align with the 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 - learning and catch problem fast

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.