Toast

Social Media App for Creatives

How can we design a social networking experience that appeals to both the creators and their consumer base?

Introduction

Background

Toast is an up-and-coming social networking mobile app designed specifically for creatives, whether they work on illustrations, design, crafts, etc. The platform aims to give creators maximum flexibility in choosing how to display their work, and the ability to moderate interactions with their followers. It also aims to safeguard creators from copyright infringement, a problem rampant on current social media platforms.

Personal Capstone Project

Tasks: User Research, Information Architecture, Visual Design

Timeline: 2 Weeks

Tools: Figma, Procreate, InDesign, Photoshop, Illustrator

Project Goals

1. Design an app for social networking that enhances the experience of interacting between creator and consumer, and gives creators control over how to display their work and moderate interactions with others

2. Streamline the process of saving and collecting work to use as reference and inspiration, while ensuring credit for a piece is also correctly linked back to the original creator.

Research & Synthesis

Market Analysis

I first conducted some general research to understand the market, demographics, and consumer habits. Some highlights:

In the past year, over 80 percent of all Generation Y art buyers bought fine art online, with almost half of online buyers using Instagram for art-related purposes

91% of all social media users access social channels via mobile devices.

64% Pinterest users described the platform as a place to find ideas, products or services they can trust.

1-on-1 Interviews

In this user study, I interviewed 4 creators and 3 consumers of online creative content to uncover pain points they had with current social networking services, and to better understand how these platforms facilitate interactions between these 2 groups.

Summary of Findings:

Instagram is the most popular platform for posting artwork, followed by Twitter, then Tumblr and Reddit
- Participants use these platforms because there is a large consumer base

Participants post their work online to converse, share perspectives, and gain knowledge, inspiration, & motivation
- It's also a way for them to market themselves and grow a following

Most common frustration was not having the flexibility to present one's post the way they want to

Summary of Findings:

On Instagram, participants follow mainly friends and artists to support them and get inspiration

Participants like using Pinterest for doing research on a creative endeavor, due to the ease of use in finding useful images or links and the ability to collect them on a single board

Participants often use social media like Pinterest, Facebook, Tumblr, etc. for collecting images related to a topic of interest, simply to come back and view them later for entertainment — topics vary from specific fandoms, to animals, to fashion

Persona

I consolidated the data I gathered from the debrief into two personas, one for creators and one for consumers.

Creator Persona

Consumer Persona

Define

Deciding the Features

Using the data from my debrief, the secondary research, and the personas, I compiled a list of the features my app would need. I also referenced Instagram, Twitter, Pinterest, and Facebook to make sure I wasn't missing any important functions.

Sitemap

After looking at other social media apps to get a general feel of their structure, I put together a sitemap for the various functionalities needed.

Design

Sketches

With these features in mind, I began sketching out wireframes with a focus on the process of creating a post and on how posts would be displayed to a viewer. I continued referencing other apps throughout this stage, expanding past social media apps to ones with other functionalities such as photo editing, mood board making, and collage making.

Low Fidelity Wireframes

Combining the parts of each sketch that I felt worked best, I began developing the wireframes digitally.

Iteration

Testing

I decided to test the prototype in low fidelity, so as to be able to test user's understanding of the structure and navigation early on before adding the imagery. 2 participants in their 20's took part in the test.

Summary of Findings:

One participant did not think to look at the bell or mail icons for notifications, because there weren't any badge icons attached to them signifying new alerts
The other participant tried to view more comments by pressing “more” on the hashtags below the description, because he’s so used to finding it there (this is where Instagram places it)

Hi Fidelity Wireframes

After fixing a few of the errors caught during testing, I added imagery for the user icons and posts. I also added a burnt orange color to highlight CTAs or selected states, and created a simple logo in Illustrator. The final mockup screens are as follows:

Reflection

Break It Down

Designing an entire social media app from scratch was an incredibly complicated, overwhelming task. Tackling a single feature or page at one time, and looking at how other apps handled the design of each of those parts specifically, helped me to fully flesh out the task flows and layouts for each. Once a section was complete, then I could step back and tweak it to integrate smoothly into the app as a whole.

Previous Project

Next Project

Toast_top