Product Design, Illustration, Branding, and Design
Co.Create is a social media app designed to connect artists and foster collaboration.
Case Study
Roles:
Product Design, Branding, UI, Prototyping, Design, Illustration, Graphic Design, Animation
Tools:
Figma, InVision, Adobe Photoshop, Adobe Illustrator, Adobe After Effects, Adobe InDesign
Time and Partners:
August 2020 - November 2020
Collaboration with Morgan Kuin
Deliverables:
User Research, Survey Analytics, User Interview Insights, Task Flow, User Flow, Low-Fidelity Wireframe, Mid-Fidelity Wireframes, Usability Test, Style Guide, High-Fidelity Mockups, Interactive Prototype
Background
In the age of social media, it is easy to think that platforms like Instagram and
Twitter is the pinnacle of digital sharing, connecting, and content making.
However, as a creative and problem solver, I find this to be untrue.
From beginner to advanced artists, many find themselves having trouble
connecting with collaborators and like-minded individuals. In the last few years
alone, creatives on social media found themselves losing connections, having
trouble keeping up with the daily trends, and finding it harder to enjoy their craft.
Now, more than ever, there needs to be a place where artists can make deeper connections rather than pleasing an algorithm.
With the help of my partner Morgan, we made Co.Create, a platform that defies past social media logic by standing at the intersection of collaboration, learning, and creation. Through meaningful communities, daily prompts, connections, and mood board creation, Co.Create encourages all creatives to navigate their careers and hobbies, whether it be personal or professional.
Problem
How might we make an app that incorporates all skill levels, encourages creatives, and fosters communities? Creatives should not have a hard time making meaningful connections or collaborations.
How do we Solve this?
By working with my partner Morgan in the research and development phase, we designed and executed an app that utilizes core functions indicative of our research and problem-solving.
How did we do this?
Use the buttons below to skip to different parts of the process. You may also scroll through to see the whole story.
Define & Discover
Understanding the space through user research and insight.
Word Association
In the beginning, to get a better sense of what we wanted Co.Create to be we made word webs. Based on word association, we found that relationships, friends, and work encompass collaboration. These feelings gave us a better understanding of things to keep in mind when defining our audience.
Research and Insight
With the advancement of digital media, art communities of the past have become more and more obsolete. Once, Tumblr and DeviantArt were the go-to platform for artists but lost its following due to outdated design, spam, and communities. Artists turned to social media sites because it could consolidate content and niches. Though over time, this model subsequently failed (Kelsey Ables, artsy.Net).
Creatives today have to post constantly and are not appreciated for the extra time spent on projects, not to mention the unfairness of the algorithm.
Nonetheless, there is a light at the end of this tunnel. According to a report by Co-Matter, a Post Social Media Era is beginning. Since the Social Media Era paid attention to “hyper-personalization” and loss of “collective experiences,” the new era seeks to find fewer and more trusted connections.
Surveys
To further look and define our problem, we sent out surveys to close friends and strangers on social media to better understand creatives' habits and motivations.
We asked questions like:
-
If you like to consume art online, what is your favorite social media platform to do so? Why?
-
Are there any standout features specific to a social media platform that you really like/dislike in the context of posting and consuming art online? (e.g. Tumblr has reblogs)
Who did we interview?
Frequent Instagram users
(Teenagers and hobbyists)
Young Professionals
(in their 20s)
Key Takeaways:
#1
Social media algorithms are the worst
#2
Creatives are usually shy and have a hard time making connections
#3
Are constantly unmotivated and DO NOT like constant posting
#4
Want more community-oriented places
General notes:
-
Used to like Tumblr -- many started on Deviantart.
-
Likes to separate professional and personal work.
-
Looks to other artists to gain inspiration.
-
Are open to collaboration if the connections are strong and available.
-
Doesn’t like daily posted stories.
We also interviewed competitors to analyze different trends on their platforms. We were looking to see what kept creatives interested and what kept their community strong.
"It’s important to find your peers that are going through the same thing you are so you don’t feel too lonely and don’t give up... be really honest with everyone, know where you stand, and know what the community is about."
-Bee (Co-Founder of Panimation)
Discovering our Users
So who will use Co.Create? Based on our research, we made personas that accurately reflected our target demographic.
Pain Points:
-
Nervous to reach out to people online
-
Unconfident with their work
-
Has been trolled before
-
Hesitant to work with others
Standout Quote:
“I see all of these great artists online and it makes me really nervous to share my art!”
Core Needs:
-
Able to easily reach out to and communicate with online artists
-
Able to save inspiring artwork to a moodboard
-
A discover page that features artists with unique styles
Pain Points:
-
Receives a lot of spam and unsolicited art requests on the internet
Unconfident with their work
-
Has difficulty maintaining online contacts after the initial conversation
-
Has difficulty finding creatives in specific fields unrelated to their own
Motivations/Goals:
-
Network and make connections from different creative mediums
-
Grow skills as an artist
-
Find motivation to stick to an art routine outside of work
Standout Quote:
“I feel like online art communities are flooded with spam and promotions, and are not actually about connecting or conversations at all.”
Core Needs:
-
Separate personal and professional creative work
-
Curate what is public/private on their profile page
-
Filter profiles based on a user’s creative medium
Shy Suzie
Age: 15
Occupation: Student
Traits:
-
Shy
-
Passionate
-
Nervous
-
Open-minded
-
Curious
Summary:
Suzie is a high school student with a passion for art. They want to showcase their art online in order to grow as an artist, but they are self-conscious about their work. They do not have an art community in school, and so they’re looking to talk to artists that they admire online.
Motivations/Goals:
-
Improve as an artist
-
Find an art style
-
Be a part of an artist community
-
Learn new art techniques
Busy Blake
Age: 25
Occupation: Freelance Illustrator
Traits:
-
Busy
-
Driven
-
Adventurous
-
Open-Minded
-
Social
Summary:
Blake is a full-time professional freelance creative. They want to expand their portfolio by creating projects outside of their usual work and are looking to collaborate with peers that can offer new perspectives.
Competitor Analysis
In addition to interviewing competitors, we looked at what features made other digital platforms successful.
It helped define what Co.Create needed.
Ideate
We used a variety of methods such as MoSCow, card sorting, and maps so that we could be as innovative as possible.
MoSCow Method
To organize our ideas, we used the MoSCow method to sort out what types of features we wanted to include in our app.
We decided to include all the Must, Should, and Could Have features. To us, these were the most important pillars of our community.
Job Boards, Stories, Close Friends, and Reposting went against our beliefs. It would restrict users from meeting new people and influence them to stick with their current connections. These are the traps of the current social media model, and we wanted to stay away from that.
Card Sorting
After figuring out which features we wanted to include, our next steps were to use a method of card sorting to find which features should be on which page. We sent out cards to fifteen people and had them organize them based on what they believed.
One of the most important things we noticed was that people wanted to see features associated with seeking new groups on the Communities Page.
But when it came down to more personal things like Your Groups, Personal Browsing, and Your Recommended Profiles, people preferred them on the Home Page. Therefore, we decided to take the liberty of putting other features like Your Saves and Your Daily Prompts there too.
User Journey
By using the information we received from card sorting, we created a sitemap, including all our features and their pathways.
Design
Designing around the problem.
My role was to create the look and feel of all the visual assets.
Design Word Association
To start the design process, I created a word web that expressed the feelings of the Co.Create brand. I based these on our personas and the types of users we would be targeting.
Branding Strategy
Through product defining, word associations, and illustrations, I designed around the problem and the personas we created at the beginning of this project.
Demographic Targeting
-
Ages: People from the ages of 13+ (Focused interest on 18-30-year-olds)
-
Gender: Anyone!! As long as you are a creative that wants to learn from others, collaborate, and meet new people.
-
Skill Level: All are welcomed!! There are groups and communities for all skill levels. It is encouraged that a user can save “mood boards” and explore new creatives.
-
Type: Creatives looking to get inspired, learn, create, and expand their creative capacity.
Things to keep in mind:
#1
Millennial design for younger people.
#2
Friendly in a clean, fun, and accessible way.
#3
A place for YOUNG CREATIVES to discover and create.
Key Adjectives
To get a better understanding, I also defined five adjectives to get a feel of the brand.
Helpful
Inspiring
Safe
Friendly
Inclusive
I want the design to make Co.Create look like an INCLUSIVE app that is also a SAFE space with UPLIFTING and FRIENDLY imagery that INSPIRES its users to collaborate.
Brand Strategy Pyramid
After defining the sentiment of Co.Create, I created a chart that outlined the purpose, promise, personality, and positioning of the brand. This outline gave the brand a concrete goal.
Branding Identity
To achieve the personality I defined, I made style choices that would closely align with the identity of the brand.
-
COLORFUL designs, SLEEK typography, and SIMPLE illustrations will project an INCLUSIVE brand that focuses on SAFE spaces with UPLIFTING and FRIENDLY.
-
By creating minimal illustrations of creative tools, different users and creatives will be represented by their craft.
-
A brand that involves the primary palette will bring simplicity to the design that is easy on the eyes and gives a sense of community.
Branding Survey
I decided to use a survey to see what people associated with different palettes and logos. People were able to input their feelings, and I picked the one that had the most associated with the brand adjectives.
Palette #1
Palette #2
Palette #3
Palette #4
The palette that most aligned with what I intended was palette #1.
Creating the Design
After defining the palette, I found a stylistic direction that would drive the high fidelity screens.
Color definition:
-
A primary color palette to evoke a sense of learning and foster friendship through collaboration.
-
It’s “young” style brings us to a more simplistic time where learning and friendships came easy to us.
-
The primary colors are easy on the eyes because of its versatility. This represents inclusivity and a safe space for all.
-
The contrasting blues pair well with the bright yellows and the bright red adds an enticing accent to the design.
Font definition:
-
I chose Effra font because I want to make the text a bit more informational and objective. Since many of the illustrations are already lively, there is no reason to keep the font vibrant.
Icon definition:
-
To represent the fun, young, and creative vibe we are trying to achieve.
-
Blue is the dominant color because it acts as a strong base for the lighter colors.
-
Round edges to make it modern and soft to the eyes.
Creating the Logo
When creating the logo, I used surveys to guide my design. The surveys allowed takers to pick their favorites based on what I pulled from the internet for inspiration. They used adjectives to describe each one.
Ready for something more?
Expanded Version
Condensed Version
Based on the surveys, I made a few iterations with this in mind:
-
To represent the fun, young, and creative vibe.
-
Use an icon to tie the logo and feel together.
-
Play around with the brand colors and the outline style.
Create
Creating the product with iterations and sketches
Our strategy for building wireframes was to first sketch important features and use our User Journey map to make Low- Fi Iterations. After two iterations of Low-Fi, we moved on to a Hi-Fi Mockup.