Stacks

UI/UX, Ideation

An iPhone app that helps people create their own social networks.

Website
Apple Store download
Made in partnership with Nate Parrott



Personal role: roles

Questions

  • What would it look like if anyone could make their own social network?
  • What if people could easily solicit the type of data they want?

Outcome

A shipped iOS app that uses drag and drop capabilities to allow users to create their own apps and social networks.

Ideation

With 50% of the world’s population with a mobile subscription, mobile is the most pervasive computer platform. However, development for these platforms is still a long process, taking days, months, or even years to create a product. How can we leverage the mobile computing phenomenon to encourage creation and ideation on a much wider scale, allowing people to create their own social networks? We already see this happening in various Facebook groups, where users enact their own rules surrounding what content is and is not appropriate to post. What if they had the option to further customize the way they collected this information?

This project started off by thinking about possibilities of combining, remixing, or reusing parts of different programs or apps on the computer. No idea was too dumb not to put down on the list. Everyone made a list of at least 50 different ideas, which we selected our favorites from and highlighted them. This list was made in a collaborative Google Doc, which allowed us to take inspiration from ideas from each other—a way to virtually bounce ideas off of each other.

Because of this, we were able to quickly jot down many ideas without discussion. That meant no idea could be thrown out before it had a chance to settle in and possible be reimagined as a better idea.


We started realizing that a lot of our ideas were very interesting, but what interested us more about them was not the content but the systems or behaviors they created. So why not make something that enabled users to create these systems and assign behaviors to their content?

System

Inspired by hypercard, as well as drag-and-drop website builders like Weebly, we decided to create a tool that would allow anyone to create or customize their own app through dragging and dropping behaviors into a card. Behaviors are anything that a user can interact with to feed the app data, while cards are simply a defined area on which the behaviors are placed. Cards with similar layouts of behaviors are in the same stack.

Our first idea was to allow users to attach behaviors to messages—an area of tech that is naturally rich in personal content. However, this relied on attaching to existing messenger platforms (before iOS allowed Messenger apps) and it limited the scope of communication as well as the scope of how content could be displayed. It didn't give the amount of freedom or agency to the user as we wanted because it was still constrained to the Messenger app.

Instead, in creating Stacks as a separate app entirely, we allow users to directly manipulate the behaviors and place them anywhere they want on the screen. They can use gestures that are natural to them, coming from existing UI behaviors in common apps. There are very little restrictions—behaviors can be placed anywhere on a card, they can overlap other behaviors, and some behaviors can even trail off the card itself.

This led to our second idea, which used a 3-step process to set up a stack. This followed design patterns that we're all used to seeing—fill out a form and the product is quickly created for you. However, while testing this out with friends, we realized that it still felt a bit clunky. If we think about the social media created today—the proliferation of memes and other quick forms of content—it makes sense to have an interface that conforms to that. Having three separate screens full of forms and toggles made it feel less exciting.

We then landed on this much simpler workflow. The behaviors are added to the card as they add the first piece of content. This allows them to see their content immediately, but also give enough information to the app for it to know how to work the following cards in the stack. It also gets rid of almost all forms, bringing in direct manipulation instead. This allows users to feel more in control over the content they're adding to the card.

Creating the first card defines what the format of all the other cards in the stack will look like. You drag and drop behaviors and/or content into the card, then post it. Users can then post more cards in the stack by substituting the content from the original card with their own.

This workflow allows the user to define the template at the same time as creating the first post in the stack. There’s no unnecessary checklists or forms to fill out before getting directly to the content.

Visual

The first passes for logos were an attempt to play on the word 'Stacks'. I tried to use line weights, overlapping shapes, and persepective in order to try make the geometric shapes less generic. However, they still lacked the character we were looking for.
Because previous iterations were very generic and lacked recognizable character, I instead decided to play with the idea of Russian dolls as a way to both honor the name 'Stacks', as well as giving the brand more character
Instead of having one brand color, we decided to create a brand gradient. We combined two bright colors—both of which are not made for print, staying true to the idea that this is a digital experience.

Outcome

The flow of creating a new stack—you start with a blank card, then you drag and drop behaviors or content onto the card, then you post it.

The gradient changes color with each new card you place on the stack.

You have the ability to have friends and notifications from the various stacks you've participated in. This helps you keep up with interesting and fast moving stacks, apart from just the feed.

Some current examples of stacks, with posts coming from the original creator of the stack, or from others contributing to the same stack.