App Dev / Case Study
Designing a social app where creators can buy visibility on trending posts and monetize their own content, from the VIR concept through to checkout.
Brand
Virality System is a social platform for creators and users who want to increase content visibility and turn engagement into economic opportunity.
At its core is VIR: a media placement that users can purchase above a trending post. Buyers can promote their own content, while the creator hosting the VIR can earn revenue from that space.
Challenge
The challenge was to introduce a new mechanic inside a familiar social interface without overloading the feed, profiles, content creation, or payment flows.
VIR had to feel visible, desirable, and understandable from the first use, without overshadowing the original trending content it connects to.
Brief
The brief was to design a contemporary, intuitive app aligned with existing brand guidelines and able to make VIR the platform's core differentiator.
Method
Social platforms are built on continuous loops: discovery, interaction, creation, profile, notifications, purchase, and return to the feed. We broke down recognizable social patterns through reverse engineering, then rebuilt the experience around VIR as the proprietary product mechanic.
Analysis
Low-fidelity wireframes focused on the features that were new to the product: presenting VIR and purchasing a media placement. Familiar social interactions drew on established platform patterns. This stage explored information hierarchy and the steps involved in payment before the detailed screen designs were developed.
UI Design
A social app is not only a set of screens. It is rhythm, micro-interactions, feeds, profiles, comments, avatars, and states that must remain clear while content constantly changes. Messages, comments, and avatars were built as editable elements, making it quick to preview screens with different content. Buttons and supporting components brought a playful character to creation flows and settings while respecting the existing brand identity.
Onboarding
Sign-up was designed to ask for few details and make getting started straightforward. An introductory image and a clear message about the platform gave users a reason to explore, without burdening the first interaction with unnecessary requests.
Product
Every feed card can open different paths: viewing, profile, comments, social actions, connected VIR placements, and monetization steps. We mapped these scenarios to make interface behavior clear at every sensitive touchpoint.
Core mechanic
A VIR appears above the post hosting it. Its size and position were explored using examples of popular content from other social feeds, with the aim of making the paid placement visible without overshadowing the original post.
The design also defined the information shown on the VIR card and the actions available when users tap it. Placement, content, and interaction needed to work together to explain an unfamiliar feature.
Checkout flow
Adding a VIR involves two flows: configuring the media placement, including content and duration, and checkout, using either wallet balance or traditional payment methods. Configuration and payment were treated as distinct stages, helping users understand their choices before purchasing. A clear, visually satisfying success screen completes the flow.
Product decisions
Product quality did not depend only on the main screens. Secondary areas had to support trust, repeated usage, and faithful implementation.
Creators hosting a VIR need to set a price for their space and withdraw their earnings. The design covers these tasks alongside feedback messages for potential checkout and withdrawal issues, so users can understand the outcome of a transaction.
Dark mode was developed as a consistent alternative to the light interface, with attention to use in low-light environments. Contrast, readability, and the treatment of visual elements were considered together to preserve the identity of Virality System.
Profiles give users a place to present themselves and start new interactions. The information hierarchy was designed to work with a small amount of content or a larger collection, whether someone is viewing their own profile or visiting another user's page.
The design files document differences between screens and how flows evolve after each interaction. This gives developers a reference for intended behavior and helps them reproduce the interface faithfully while meeting the brand's requirements.
The project
The project brings feeds, profiles, and monetization flows into a recognizable social interface. The virality viewing mode and VIR placements give the product its own identity, while the documented screens and flows provide a reference for development.
Approach
Simplicity does not come from removing features. It comes from making the user's goal, next action, feedback, and economic impact easy to understand.
In Virality System, UX/UI work balanced familiarity and differentiation: close enough to known social products to feel immediate, distinctive enough to make VIR stand out.
If you are building an app with proprietary mechanics, monetization, or complex flows, we can help turn it into a clear, adoptable product ready for development.
Your next project
Planning an app or a digital platform? Let's define its users, core features and goals to give your product a clear direction.
Clear goals. A proposal tailored to you.