top of page
Desktop - 2.jpg
Product Design, Illustration, Branding, and Design
Co.Create is a social media app designed to connect artists and foster collaboration. 
Artboard 51_3@2x.png
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
Venn.png

 

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. 

Instagram Story - 1.jpg
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. 

Artboard 51_4@2x.png
Define & Discover
Understanding the space through user research and insight.
Define & Discover
Word Association
word web.png

 

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:
  1. If you like to consume art online, what is your favorite social media platform to do so? Why?

  2. 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.

Artboard 1@2x.png
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

Artboard 2@2x.png
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.

Competitor analysis.png
Ideate
Artboard 51_4@2x.png
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.  

Card Sorting.png

 

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. 

Site Map horizontal V2.png
Design
Artboard 51_4@2x.png
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.

Design wordweb.jpg
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.

Screen Shot 2020-11-15 at 10.16.30 PM.pn
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
board 7.png
board 9.png
Palette #2
board 3.png
Palette #3
board 10.png
Palette #4
board 7.png

 

The palette that most aligned with what I intended was palette #1. 

Venn chart.png
Creating the Design
Color-and-Font.png

 

After defining the palette, I found a stylistic direction that would drive the high fidelity screens.

Fonts.png
Icons and Elements.png
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:
iconography exploration.jpg

  • 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?

Artboard 53@2x.png
Artboard 52@2x.png
Artboard 52_1@2x.png
Artboard 56@2x.png
Artboard 56_2@2x.png
Artboard 51_1@2x.png
Artboard 51@2x.png
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
Artboard 51_4@2x.png
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.

Sketches