Virality System
Viral by Design:
Shaping the next-gen
social media monetization
Viral by Design:
Shaping the next-gen
social media monetization
Commissioned by DG Technologies
User Interface
Creators platform
Virality
Engagement
ROLE
User Interface
Designer
User Interface
Designer
User Interface
Designer
TIMELINE
From March 2024
to April 2024
From March 2024
to April 2024
From March 2024
to April 2024
TEAM
I was assigned by DG Technologies as designer for their client’s app project. My role involved proposing and designing the User Experience (UX) and User Interface (UI) for the app, working in accordance with the end client’s pre-existing brand guidelines.
I was assigned by DG Technologies as designer for their client’s app project. My role involved proposing and designing the User Experience (UX) and User Interface (UI) for the app, working in accordance with the end client’s pre-existing brand guidelines.
I was assigned by DG Technologies as designer for their client’s app project. My role involved proposing and designing the User Experience (UX) and User Interface (UI) for the app, working in accordance with the end client’s pre-existing brand guidelines.
BRAND
Virality System is a revolutionary social network designed to empower anyone to achieve viral status and monetize their content. Users can pay to attach their content (create a VIR) to trending posts, amplifying their reach and engagement potential.
Virality System is a revolutionary social network designed to empower anyone to achieve viral status and monetize their content. Users can pay to attach their content (create a VIR) to trending posts, amplifying their reach and engagement potential.
Virality System is a revolutionary social network designed to empower anyone to achieve viral status and monetize their content. Users can pay to attach their content (create a VIR) to trending posts, amplifying their reach and engagement potential.
BRIEF
In a competitive social media landscape, our goal was to craft a contemporary, user-friendly app that efficiently showcases the novel VIR system – the brand’s key differentiator.
In a competitive social media landscape, our goal was to craft a contemporary, user-friendly app that efficiently showcases the novel VIR system – the brand’s key differentiator.
In a competitive social media landscape, our goal was to craft a contemporary, user-friendly app that efficiently showcases the novel VIR system – the brand’s key differentiator.
CHALLENGE
Integrating the VIR functionality seamlessly, ensuring a sleek interface that adapts to various scenarios while enticing users to engage with it frequently.
Additionally, we needed to design an effortless user flow for purchasing media space.
Integrating the VIR functionality seamlessly, ensuring a sleek interface that adapts to various scenarios while enticing users to engage with it frequently.
Additionally, we needed to design an effortless user flow for purchasing media space.
Integrating the VIR functionality seamlessly, ensuring a sleek interface that adapts to various scenarios while enticing users to engage with it frequently.
Additionally, we needed to design an effortless user flow for purchasing media space.
Information Architecture
Information Architecture
Information Architecture
Social media platforms create endless loops of discovery, which we analyzed through a reverse engineering process. To navigate this complexity and avoid getting lost in the myriad of features, we developed a comprehensive Information Architecture.
This approach allowed us to:
• Maintain a clear direction throughout the design process
• Ensure a familiar experience for users accustomed to popular social platforms
• Effectively integrate the innovative VIR system within a recognisable structure
Social media platforms create endless loops of discovery, which we analyzed through a reverse engineering process. To navigate this complexity and avoid getting lost in the myriad of features, we developed a comprehensive Information Architecture.
This approach allowed us to:
• Maintain a clear direction throughout the design process
• Ensure a familiar experience for users accustomed to popular social platforms
• Effectively integrate the innovative VIR system within a recognisable structure
Social media platforms create endless loops of discovery, which we analyzed through a reverse engineering process. To navigate this complexity and avoid getting lost in the myriad of features, we developed a comprehensive Information Architecture.
This approach allowed us to:
• Maintain a clear direction throughout the design process
• Ensure a familiar experience for users accustomed to popular social platforms
• Effectively integrate the innovative VIR system within a recognisable structure
Wireframe Exploration
Wireframe Exploration
Wireframe Exploration
Given that established social media giants have extensively tested UI possibilities, we concentrated our efforts on creating low-fidelity wireframes for crucial new features. Our focus was on presenting the innovative VIR functionality and the associated payment flow, as these elements are unique to Virality System and required in-depth analysis and experimentation.
Given that established social media giants have extensively tested UI possibilities, we concentrated our efforts on creating low-fidelity wireframes for crucial new features. Our focus was on presenting the innovative VIR functionality and the associated payment flow, as these elements are unique to Virality System and required in-depth analysis and experimentation.
Given that established social media giants have extensively tested UI possibilities, we concentrated our efforts on creating low-fidelity wireframes for crucial new features. Our focus was on presenting the innovative VIR functionality and the associated payment flow, as these elements are unique to Virality System and required in-depth analysis and experimentation.
High-Fidelity
Design Process
High-Fidelity
Design Process
High-Fidelity
Design Process
Unlike traditional design systems, social media apps primarily feature lists of messages, comments, and profile pictures rather than form components. We crafted these elements to be easily editable, allowing for quick previews of how pages would appear to users.
Unlike traditional design systems, social media apps primarily feature lists of messages, comments, and profile pictures rather than form components. We crafted these elements to be easily editable, allowing for quick previews of how pages would appear to users.
Unlike traditional design systems, social media apps primarily feature lists of messages, comments, and profile pictures rather than form components. We crafted these elements to be easily editable, allowing for quick previews of how pages would appear to users.
Our approach to buttons and other components aimed to evoke a sense of freshness and playfulness. The goal was to create an entertaining experience not just through content, but also in auxiliary flows like creation and settings, reinforcing positive emotions and encouraging app usage.
Our approach to buttons and other components aimed to evoke a sense of freshness and playfulness. The goal was to create an entertaining experience not just through content, but also in auxiliary flows like creation and settings, reinforcing positive emotions and encouraging app usage.
Our approach to buttons and other components aimed to evoke a sense of freshness and playfulness. The goal was to create an entertaining experience not just through content, but also in auxiliary flows like creation and settings, reinforcing positive emotions and encouraging app usage.
Log In and Sign Up
We aimed for a clean experience that genuinely invites new users to try the app. Recognizing that people prefer not to share extensive details on social media, we prioritized a frictionless start, emulating successful companies. However, we distinguished ourselves by introducing our app with an engaging image and promise, making it intriguing to begin using the platform.
We aimed for a clean experience that genuinely invites new users to try the app. Recognizing that people prefer not to share extensive details on social media, we prioritized a frictionless start, emulating successful companies. However, we distinguished ourselves by introducing our app with an engaging image and promise, making it intriguing to begin using the platform.
We aimed for a clean experience that genuinely invites new users to try the app. Recognizing that people prefer not to share extensive details on social media, we prioritized a frictionless start, emulating successful companies. However, we distinguished ourselves by introducing our app with an engaging image and promise, making it intriguing to begin using the platform.
Feed Interaction
Behind every piece of content in the feed lies a world of interactions and potential flows. I documented and presented these to cover all possible scenarios and the evolution of each flow a user might follow after tapping on a specific section of the screen.
Behind every piece of content in the feed lies a world of interactions and potential flows. I documented and presented these to cover all possible scenarios and the evolution of each flow a user might follow after tapping on a specific section of the screen.
Behind every piece of content in the feed lies a world of interactions and potential flows. I documented and presented these to cover all possible scenarios and the evolution of each flow a user might follow after tapping on a specific section of the screen.
VIR
VIR
VIR is a media space users purchase to showcase their content atop trending posts. By testing it above popular content from competitor feeds, I determined an optimal position and size that displays the attached VIR without overshadowing the original trending content.
VIR is a media space users purchase to showcase their content atop trending posts. By testing it above popular content from competitor feeds, I determined an optimal position and size that displays the attached VIR without overshadowing the original trending content.
VIR is a media space users purchase to showcase their content atop trending posts. By testing it above popular content from competitor feeds, I determined an optimal position and size that displays the attached VIR without overshadowing the original trending content.
Designing this functionality also involved deciding what information the VIR card should present and which interactions it should trigger.
Designing this functionality also involved deciding what information the VIR card should present and which interactions it should trigger.
Designing this functionality also involved deciding what information the VIR card should present and which interactions it should trigger.
Adding a VIR
Attaching a VIR involves two distinct flows:
VIR settings (selecting content to display and duration) and the checkout experience (payment via wallet balance or traditional methods). I focused on making this feature transparent for users, enhancing clarity at each step and guiding them towards informed decisions.
Attaching a VIR involves two distinct flows:
VIR settings (selecting content to display and duration) and the checkout experience (payment via wallet balance or traditional methods). I focused on making this feature transparent for users, enhancing clarity at each step and guiding them towards informed decisions.
Attaching a VIR involves two distinct flows:
VIR settings (selecting content to display and duration) and the checkout experience (payment via wallet balance or traditional methods). I focused on making this feature transparent for users, enhancing clarity at each step and guiding them towards informed decisions.
Naturally, the success page needed to be satisfying!
Naturally, the success page needed to be satisfying!
Naturally, the success page needed to be satisfying!
Receiving a VIR
For creators receiving money and VIRs attached to their content, the experience must be equally clear and flexible. Setting prices for their space and withdrawing funds should be a smooth process.
For creators receiving money and VIRs attached to their content, the experience must be equally clear and flexible. Setting prices for their space and withdrawing funds should be a smooth process.
For creators receiving money and VIRs attached to their content, the experience must be equally clear and flexible. Setting prices for their space and withdrawing funds should be a smooth process.
Anticipating potential issues with checkout or withdrawal experiences, we designed user-friendly toast messages, offering maximum flexibility for financial transactions.
Anticipating potential issues with checkout or withdrawal experiences, we designed user-friendly toast messages, offering maximum flexibility for financial transactions.
Anticipating potential issues with checkout or withdrawal experiences, we designed user-friendly toast messages, offering maximum flexibility for financial transactions.
Dark Mode Implementation
No social media platform is complete without customisation. We developed a dark mode option with careful attention to:
• Enhancing user experience in low-light conditions
• Ensuring proper contrast and readability across all elements
• Maintaining consistency while adapting to dark aesthetics
No social media platform is complete without customisation. We developed a dark mode option with careful attention to:
• Enhancing user experience in low-light conditions
• Ensuring proper contrast and readability across all elements
• Maintaining consistency while adapting to dark aesthetics
No social media platform is complete without customisation. We developed a dark mode option with careful attention to:
• Enhancing user experience in low-light conditions
• Ensuring proper contrast and readability across all elements
• Maintaining consistency while adapting to dark aesthetics
Profile =
Coolness
Users are more likely to share their profiles and interact if they perceive them as cool. Creating an appealing and familiar design regardless of content volume was a priority for our new social media platform.
Users are more likely to share their profiles and interact if they perceive them as cool. Creating an appealing and familiar design regardless of content volume was a priority for our new social media platform.
Users are more likely to share their profiles and interact if they perceive them as cool. Creating an appealing and familiar design regardless of content volume was a priority for our new social media platform.
I’m particularly proud of the result and the information hierarchy, featuring a flexible design that works whether you’re viewing your own profile or someone else’s.
I’m particularly proud of the result and the information hierarchy, featuring a flexible design that works whether you’re viewing your own profile or someone else’s.
I’m particularly proud of the result and the information hierarchy, featuring a flexible design that works whether you’re viewing your own profile or someone else’s.
Documenting
Documenting
Documenting
Thoroughly documenting all files and clearly presenting the distinctions between pages and flow evolution was crucial in assisting developers. This ensured they could create something as close as possible to the design vision and brand needs. In social media, aesthetics are paramount, so achieving a 1:1 match between design prototype and final product was of utmost importance.
Thoroughly documenting all files and clearly presenting the distinctions between pages and flow evolution was crucial in assisting developers. This ensured they could create something as close as possible to the design vision and brand needs. In social media, aesthetics are paramount, so achieving a 1:1 match between design prototype and final product was of utmost importance.
Thoroughly documenting all files and clearly presenting the distinctions between pages and flow evolution was crucial in assisting developers. This ensured they could create something as close as possible to the design vision and brand needs. In social media, aesthetics are paramount, so achieving a 1:1 match between design prototype and final product was of utmost importance.
The Final Design
The Final Design
The Final Design
The Virality System resulted in a user-friendly, visually appealing platform that empowers content creators to easily share and monetize their work.
The intuitive interface, slightly more fresh than competitors, coupled with innovative features like the virality mode-view, sets a new standard for social media platforms focused on viral content.
The Virality System resulted in a user-friendly, visually appealing platform that empowers content creators to easily share and monetize their work.
The intuitive interface, slightly more fresh than competitors, coupled with innovative features like the virality mode-view, sets a new standard for social media platforms focused on viral content.
The Virality System resulted in a user-friendly, visually appealing platform that empowers content creators to easily share and monetize their work.
The intuitive interface, slightly more fresh than competitors, coupled with innovative features like the virality mode-view, sets a new standard for social media platforms focused on viral content.
Key Learnings
Key Learnings
Key Learnings
• Balancing simplicity with feature rich design is crucial for user adoption
• Explaining a new feature on a mass adoption product is a challenge for any designer and a critical aspect of the work
• Integrating monetization features requires careful consideration of user experience and plays a crucial role in the app’s business goals
• Balancing simplicity with feature rich design is crucial for user adoption
• Explaining a new feature on a mass adoption product is a challenge for any designer and a critical aspect of the work
• Integrating monetization features requires careful consideration of user experience and plays a crucial role in the app’s business goals
• Balancing simplicity with feature rich design is crucial for user adoption
• Explaining a new feature on a mass adoption product is a challenge for any designer and a critical aspect of the work
• Integrating monetization features requires careful consideration of user experience and plays a crucial role in the app’s business goals