Product Design
UI / UX Design
Shotcall
The platform for gaming creators to engage their community and monetize their content in one place.
Project goal
The main goal was to create a platform that will make it easy for fans to support and engage with their favorite creators, something like Twitch’s channel points, but more.
The main goal was to create a platform that will make it easy for fans to support and engage with their favorite creators, something like Twitch’s channel points, but more.
The main goal was to create a platform that will make it easy for fans to support and engage with their favorite creators, something like Twitch’s channel points, but more.
My role
Some of my main responsibilities were deep researching of other social media platforms, usability testing with a small group of creators and directly iterating on the design based on feedback.
Created 100+ responsive pages including landing page, profile pages, event (product) page, feed page, chat, modals, etc.
Some of my main responsibilities were deep researching of other social media platforms, usability testing with a small group of creators and directly iterating on the design based on feedback.
Created 100+ responsive pages including landing page, profile pages, event (product) page, feed page, chat, modals, etc.
Some of my main responsibilities were deep researching of other social media platforms, usability testing with a small group of creators and directly iterating on the design based on feedback.
Created 100+ responsive pages including landing page, profile pages, event (product) page, feed page, chat, modals, etc.
Design Library
Design Library
Design Library
Lorem ipsum dolor sit amet consectetur. Massa semper feugiat molestie pellentesque. Lectus in faucibus praesent ut at rutrum viverra aliquam.
Lorem ipsum dolor sit amet consectetur. Massa semper feugiat molestie pellentesque. Lectus in faucibus praesent ut at rutrum viverra aliquam.
Lorem ipsum dolor sit amet consectetur. Massa semper feugiat molestie pellentesque. Lectus in faucibus praesent ut at rutrum viverra aliquam.
STYLE GUIDE
Colors
PRIMARY PALLETE
Main
#02B3A6
Teal
#5FFDF1
Background
#1F2128
Boxes
#292B32
Inputs
#31343D
SECONDARY PALLETE
White
#FFFFFF
Dark Gray
#687979
Light Gray
#A5A8A8
TEXT PALLETE
Alert Red
#FF3D3D
STATUS PALLETE
Confirmation Green
#02B373
TYPOGRAPHY
Typography
Heading H1
Size: 24px
Line-height: Auto
Weight: Bold
Gaming deserves the same dedication.
Heading H2
Size: 20px
Line-height: Auto
Weight: Bold
Gaming deserves the same dedication.
Heading H3
Size: 18px
Line-height: Auto
Weight: Bold
Gaming deserves the same dedication.
Heading H4
Size: 16px
Line-height: Auto
Weight: Bold
Gaming deserves the same dedication.
Paragraph P1
Size: 16px
Line-height: 24px
Weight: Medium / SemiBold
Gaming deserves the same dedication.
Body B1
Size: 14px
Line-height: 20px
Weight: Medium
Gaming deserves the same dedication.
Body B2
Size: 12px
Line-height: Auto
Weight: SemiBold / ExtraBold
Gaming deserves the same dedication.
COMPONENTS
UI Components
AVATARS
Picture
Initials
AA
Icon
SELECTION CONTROLS
Active
Disabled
Disabled
Active
ATOMS
Dropdowns
Choices
Choices
Choices
Choices
Option
Option
Option
Option
Option
Option
Option
Choices
BUTTONS
Buttons
MAIN BUTTON GUIDELINES
MAIN BUTTON VARIATIONS
Small Button
Normal Button
36px
8px
12px
44px
20px
Radius 8
Radius 10
Aa
SemiBold, 14px
Aa
SemiBold, 14px
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
Button
View all
View all
View all
View all
View all
View all
View all
View all
View all
TEXT BUTTON VARIATIONS
Have a project in mind?
Let’s talk!
Have a project in mind?
Let’s talk!
Have a project in mind?
Let’s talk!
STYLE GUIDE
Colors
PRIMARY PALLETE
Main
#02B3A6
Teal
#5FFDF1
Background
#1F2128
Boxes
#292B32
Inputs
#31343D
SECONDARY PALLETE
White
#FFFFFF
Dark Gray
#687979
Light Gray
#A5A8A8
TEXT PALLETE
Alert Red
#FF3D3D
STATUS PALLETE
Confirmation Green
#02B373
STYLE GUIDE
Colors
PRIMARY PALLETE
Main
#02B3A6
Teal
#5FFDF1
Background
#1F2128
Boxes
#292B32
Inputs
#31343D
SECONDARY PALLETE
White
#FFFFFF
Dark Gray
#687979
Light Gray
#A5A8A8
TEXT PALLETE
Alert Red
#FF3D3D
STATUS PALLETE
Confirmation Green
#02B373
COMPONENTS
COMPONENTS
UI Components
AVATARS
Icon
Initials
AA
Picture
SELECTION CONTROLS
Active
Disabled
Active
Disabled
TEXT
Typography
Choices
Choices
Choices
Choices
Choices
Choices
Option
Option
Option
Option
Option
Option
Option
Choices
ATOMS
ATOMS
Dropdowns
Product Design
UI / UX Design
Shotcall
The platform for gaming creators to engage their community and monetize their content in one place.
STYLE GUIDE
Colors
PRIMARY PALLETE
Main
#02B3A6
Teal
#5FFDF1
SECONDARY PALLETE
Background
#02B3A6
Boxes
#292B32
Inputs
#31343D
TEXT PALLETE
White
#FFFFFF
Light Gray
#A5A8A8
Dark Gray
#687979
STATUS PALLETE
Alert Red
#FF3D3D
Confirmation Green
#02B373
STYLEGUIDE
Typography
Heading H1
Size: 24px
Line-height: Auto
Weight: Bold
Heading H2
Size: 20px
Line-height: Auto
Weight: Bold
Heading H3
Size: 18px
Line-height: Auto
Weight: Bold
Heading H4
Size: 16px
Line-height: Auto
Weight: Bold
Paragraph P1
Size: 16px
Line-height: 24px
Weight: Medium / SemiBold
Body B1
Size: 14px
Line-height: 20px
Weight: Medium
Body B2
Size: 12px
Line-height: Auto
Weight: SemiBold / ExtraBold