Back to my portfolio


Tackup.org

Tackup is a webapp for designers that makes sharing design process simple and easy. Document your projects and get updates from your friends on their latest work.
Launch the site


View a demo on vimeo



Sharing design process

For my semester long senior project, I decided to approach the problem of social sharing for designers. Though there are already fantastic websites and applications in this space, I saw the opportunity for a product to address a need I felt was still unmet.

Private vs public

Existing products have traditionally taken a very public approach to a social network for designers, emphasizing getting your work out there and building a community of top talent. These sites are very effective for gaining exposure and browsing for inspiration, however there are downsides to their public nature. Celebrities can dominate the community and there is a motive to get as many likes and pageviews as possible to land on the front page. Feedback and criticism is shallow and mostly praise, since it's implicity encouraged to present your best work. I felt there was room for a more private social network for designers, where a public listing was conspicuously omitted, and that allowed for projects that were private even to followers.


Feedback in the design process

Conversation and iterative feedback

I felt the publicness of the space and the quality of conversation were connected to a third variable, the timing of feedback. Designers need feedback every step of the process, but existing solutions only came into play late in the game. I wanted to address sharing throughout the design process, so that conversation was based on an iterative feedback loop. Good feedback doesn't come from seeing a single screen, but from knowing the context of a problem and the process the designer has taken to get to where they are. Hopefully, sharing throughout a project to a smaller audience would improve the quality of critique.




Process is organized by iterations. You can see comments for each image in the comment pane. (Interface shrunk for preview purposes.) The home page shows a feed of your friends' latest activity.
The project page organizes process by iterations.


Product decisions

Showing the work

To show the process of a project it was important to make the interface as easy and frictionless as possible to browse work through time. In Tufte's words, the work is adjacent in space rather than stacked in time. I wanted to echo the experience of a studio crit: work spread over a wall, where you could easily see a story and make connections. In another sense, I wanted to capture being in a studio with somebody, where at any time you could walk over to their desk, look over their shoulder and say "What're you working on?"

Directing conversation

I wanted conversation on these ongoing projects to be organized and focused, as opposed to general positive or negative reactions. I decided to attach all comments to specific images or iterations, so that feedback was framed around specific examples or a set of work. To make this experience as seemlessly integrated with browsing the project, I created a fixed comment pane that updates contextually based on the current image/iteration in focus. This solves a common interaction problem of viewing a long page of comments while still seeing the work being discussed.

Keep it simple, stupid

Having never coded for the web before and one semester to ship, I needed to run a tight ship on product. I thought of my app as having two components, a utility for documenting a project and getting feedback, and a social network built around this core product. The core utility serves as a "wedge" providing real value while a social graph took shape. I focused on getting the project browser right before throwing up a social framework around it.

The restraint of time helped me carry a spirit of minimalism across the product. I kept the visual design sparse to accomodate for the work, made animations snappy or cut them out altogether, and avoided overly talkative UI language.

Some process behind Tackup's logo. The landing page uses an illustration to reinforce the paradigm used by the project browser. The project browser uses tacks on the corners of the selected image. The 404 page references "hidden" images from the UI.
The project page organizes process by iterations.

Identity design

After toying with names that referenced the iterative process maps that made the app unique, I decided instead that I wanted the product's identity to reinforce a studio/crit atmosphere, which I felt was its driving force. I decided on the name "Tackup," which I felt spoke to the product and had snappiness. Throughout the product, I used a combination of the tack logo, the color yellow, and four simplified tacks on the corners of images to reinforce the branding.


What's next

Making Tackup was one of the biggest learning experiences I've had as a designer, and gave me the amazing opportunity to take ownership in product, UX, and identity design. I'm excited to see where it goes. If you are interested in collaborating or getting involved, send me a line (davidyen@andrew.cmu.edu), I'd love to hear from you.





Back to my portfolio