ArtSocial
Tools:
• Figma
• Illustrator
• Canva
Role:
Lead Researcher
Lead Designer
A Capstone Project • Timeline: 16 Weeks
Project Overview
Problem Statement
Visual Artists struggle to connect with other like minded artists in order to network and share feedback and input on current projects. Current digital platforms don’t always cater to these artists, and many struggle with the ongoing problem of spam accounts and AI stealing content from others to be processed and re-generated with no acknowledgement to the original creator.
​
​
Goal
A platform for artist to show their work to one another for the purpose of getting constructive feedback from like minded individuals, in addition to being able to provide feedback to those artists as well. ArtSocial functions as a networking platform - with the goal to help each other, not to gain the most likes or followers.
​
Research
Competitive Analysis ​​​​
Four primary competitors were identified and deeply researched on their overall usability and specific features specific to artist needs
User Interviews
Through six comprehensive user interviewed, five key features were noted that users were looking for
Advanced Security Features
To safeguard user work from AI “learning” and protect users from spam and bot accountsin Chief
.png)
Developed Comment Section
To allow users to cater how fellow users respond and provide feedback to their work
Organized Feedback Levels
Provide teachings to newcomers on critique etiquette, and give artists a place to receive constructive feedback
.png)
Subscription/Free Account Plans
To provide users different ways to utilize the platform based on their needs
Strong Network Abilities
To connect likeminded artists with one another and form a community
Personas & Journey Maps
In order to better understand my target users, two personas were created - one looking to obtain feedback, and one looking to provide it
Persona 1
Amy
The Freelancer
Persona 2
Adam
The Edcuator
User Flow
Finally a user flow was created with both personas in mind - this was used as a guideline later for where to start and focus with the designing phase
Design
Wireframes / Low-Fidelity
Goals:
-
Establishing a Layout
-
Prioritizing Content Hierarchies
Home Page​
New Upload Page
Artwork Feedback Page
Provide Feedback Page
Mid-Fidelity
Goals:
-
Refining Layout
-
Establishing the base UI features
-
First Usability Testing Prototype
Home Page​
New Upload Page
Artwork Feedback Page
Provide Feedback Page
User Feedback
Text Heavy
While all text fields were not yet implemented, users pointed out concerns in areas where there would be a lot of text
Navigation Clutter
Too many varying navigation layouts - the navigation itself was helpful but made the design too clutter with so many types of layouts
Feedback Confusion
The feedback page left users unsure of the best way to explain their thought processes with providing feedback
With my overall layout as a clear pain point to my users, it was clear that a total layout redesign was necessary
Minimalism
Layout was re-designed and converted into a more minimalist design - bringing the focus back to the user shared artwork
Collaspable Text
To aid in text heavy locations, collaspable text components were implemented
Interactive Feedback
The feedback page was redesigned and made more interactive - giving users a easier and more engaging feedback system
Style Guide
Inspired by the work of Piet Mondrian
Typography
Aa
Reem Kufi Fun
Name
Weight
Size
Header 1
Bold
36pt
Header 2
Regular
20pt
Header 3
Bold
18pt
Body 1
Regular
20pt
Body 2
Regular
18pt
Input
Regular
14pt
Button
Medium
16pt
Color Palette
#211A1E
#FFFFFF
#083D77
#868690
#C3423F
#F9E900
#C8C6D2
High-Fidelity
Goals:
-
Accessibility
-
Re-Structuring
-
Foundation for an Interactive Prototype
Home Page​
New Upload Page
Provide Feedback Page
Artwork Feedback Page
Next Steps
Guided Feedback
Utilizing the same concept within the Open Feedback example, but allowing more customization from the poster’s side to ask more targeted questions on what they want feedback on specifically
Anonymous Feedback Option
A concept to allow more honest opinion in deciding if someone has given good feedback or not - as unbiased as it can be
Dark Mode Toggle
A personal touch and an accessibility feature I feel strongly about - formatting current and future pages to reflect how the platform would read under a dark mode setting - in addtion to other accessability features
Mobile Platform
Originally starting as a web platform, per user recommendation and following research of similar platforms - I would love to build upon the design and implement a mobile version of ArtSocial as well
Full Implemention
See this project fully implemented and become a real functional and working platform for users to join
Research "Like" Removal
A staple in most social networking sights - removing it altogether seemed to of thrown my users off. I would love to explore this more and research other examples of platforms that dropped the function (or similar)