Kyle Slyva.

UX Designer

Home

Portfolio

About

Kyle Slyva.

UX Designer

Home

Portfolio

About

Kyle Slyva.

UX Designer

Home

Portfolio

About

Kyle Slyva.

UX Designer

OP3N

Forging a Web3 Super-App

Client
OP3N
Industry
Web3 & Social Tech
timeline
Dec 2022 - Feb 2023
team
3 Team Members
Role

Ideation & Conceptualization, Persona Creation, UX Research, UX Design


Overview

OP3N tasked us with creating user flows for their super-app, aiming to scale up their proof of concept into a global social platform. The app, designed for artists and content creators, leverages Web3 and blockchain technologies to offer secure, private interactions and content ownership.


Challenge

Facing tight deadlines and a limited scope, I had to deliver thoughtful designs quickly. Without similar apps to make comparisons, I relied on my own experience and research to create the right solutions. Designing a super-app was challenging because it required an intuitive and easy-to-navigate framework that was consistent across every section of the product.


Solution

What started off as an initial focus on higher-level user flows evolved into extensive ideation and the creation of high-fidelity wireframes. The successful completion of this phase resulted in the opportunity to further collaborate with OP3N and push the product further with UI and branding.

Role

Ideation & Conceptualization, Persona Creation, UX Research, UX Design


Overview

OP3N tasked us with creating user flows for their super-app, aiming to scale up their proof of concept into a global social platform. The app, designed for artists and content creators, leverages Web3 and blockchain technologies to offer secure, private interactions and content ownership.


Challenge

Facing tight deadlines and a limited scope, I had to deliver thoughtful designs quickly. Without similar apps to make comparisons, I relied on my own experience and research to create the right solutions. Designing a super-app was challenging because it required an intuitive and easy-to-navigate framework that was consistent across every section of the product.


Solution

What started off as an initial focus on higher-level user flows evolved into extensive ideation and the creation of high-fidelity wireframes. The successful completion of this phase resulted in the opportunity to further collaborate with OP3N and push the product further with UI and branding.

Role

Ideation & Conceptualization, Persona Creation, UX Research, UX Design


Overview

OP3N tasked us with creating user flows for their super-app, aiming to scale up their proof of concept into a global social platform. The app, designed for artists and content creators, leverages Web3 and blockchain technologies to offer secure, private interactions and content ownership.


Challenge

Facing tight deadlines and a limited scope, I had to deliver thoughtful designs quickly. Without similar apps to make comparisons, I relied on my own experience and research to create the right solutions. Designing a super-app was challenging because it required an intuitive and easy-to-navigate framework that was consistent across every section of the product.


Solution

What started off as an initial focus on higher-level user flows evolved into extensive ideation and the creation of high-fidelity wireframes. The successful completion of this phase resulted in the opportunity to further collaborate with OP3N and push the product further with UI and branding.

01

User Flows: Chat

My first task was to design the Chat flows, aiming to rival top apps like WhatsApp and WeChat while emphasizing Web3's privacy and security. Through a range of user flows, I explored different interaction patterns and design treatments, from basic text bubbles to complex processes like purchasing content and forming social groups. These early flows also established interaction and UI patterns that we would carry forward throughout the entire app.



My first task was to design the Chat flows, aiming to rival top apps like WhatsApp and WeChat while emphasizing Web3's privacy and security. Through a range of user flows, I explored different interaction patterns and design treatments, from basic text bubbles to complex processes like purchasing content and forming social groups. These early flows also established interaction and UI patterns that we would carry forward throughout the entire app.



02

02

02

User Flows: Shop

User Flows: Shop

User Flows: Shop

The Shop section was the primary commerce area, where artists and creators could sell their products. It was crucial to create an intuitive and visually appealing design to ensure user engagement during the purchase process. I devised a framework for Shop screens and explored how users could seamlessly share their purchases and favorites with others, even through the Chat tab.

The Shop section was the primary commerce area, where artists and creators could sell their products. It was crucial to create an intuitive and visually appealing design to ensure user engagement during the purchase process. I devised a framework for Shop screens and explored how users could seamlessly share their purchases and favorites with others, even through the Chat tab.

03

03

03

User Flow: Discover

User Flow: Discover

User Flow: Discover

Following the creation of the Shop pages, I moved on to the Discover tab, a reel of relevant content for users to interact with. By utilizing modular design for different content types, I established a framework that could accommodate a diverse range of content while maintaining a consistent user experience.


Following the creation of the Shop pages, I moved on to the Discover tab, a reel of relevant content for users to interact with. By utilizing modular design for different content types, I established a framework that could accommodate a diverse range of content while maintaining a consistent user experience.


04

04

04

User Flow: Me

User Flow: Me

User Flow: Me

The "Me" phase stood out as the most distinctive among the five project phases, serving as both a settings page and a private engagement space. Users could access various features, such as viewing account statistics, setting up personas, and interacting with the Personal AI Assistant. To ensure a personalized experience, I utilized a modular card-like structure, tailoring information to match the needs and preferences of individual users.


This was also when I began the introduction of “Personas”. These would allow users to create multiple types of accounts or profiles, each projecting a different personality. For instance, users could establish a personal persona for communicating with friends and family while seamlessly switching to a business persona. These transitions would dynamically adjust elements like contacts , profile information, chat history, and various other settings throughout the app, ensuring a consistent experience for each persona.



The "Me" phase stood out as the most distinctive among the five project phases, serving as both a settings page and a private engagement space. Users could access various features, such as viewing account statistics, setting up personas, and interacting with the Personal AI Assistant. To ensure a personalized experience, I utilized a modular card-like structure, tailoring information to match the needs and preferences of individual users.


This was also when I began the introduction of “Personas”. These would allow users to create multiple types of accounts or profiles, each projecting a different personality. For instance, users could establish a personal persona for communicating with friends and family while seamlessly switching to a business persona. These transitions would dynamically adjust elements like contacts , profile information, chat history, and various other settings throughout the app, ensuring a consistent experience for each persona.



05

05

05

User Flow: Spaces

User Flow: Spaces

User Flow: Spaces

"Spaces" served as a dynamic platform for users to view live content across the app and join various communities within it. Designing this section presented a challenge as I needed to create a clear distinction between the different types of content users were engaging with. To achieve this, I implemented a tab-like design, offering users a comprehensive view of all activities within their spaces, and providing the option to filter down to individual communities or live events.

"Spaces" served as a dynamic platform for users to view live content across the app and join various communities within it. Designing this section presented a challenge as I needed to create a clear distinction between the different types of content users were engaging with. To achieve this, I implemented a tab-like design, offering users a comprehensive view of all activities within their spaces, and providing the option to filter down to individual communities or live events.

Results

This project was an ambitious endeavor for both the client and our team. It started off as a relatively simple user flow process and evolved into a complete app framework, with basic flows sparking innovative concepts along the way. I established a great relationship with the client and although the journey is not yet complete, I am proud to have created an impressive framework that provides a solid foundation for the client to build upon.

This project was an ambitious endeavor for both the client and our team. It started off as a relatively simple user flow process and evolved into a complete app framework, with basic flows sparking innovative concepts along the way. I established a great relationship with the client and although the journey is not yet complete, I am proud to have created an impressive framework that provides a solid foundation for the client to build upon.

This project was an ambitious endeavor for both the client and our team. It started off as a relatively simple user flow process and evolved into a complete app framework, with basic flows sparking innovative concepts along the way. I established a great relationship with the client and although the journey is not yet complete, I am proud to have created an impressive framework that provides a solid foundation for the client to build upon.

MORE WORK