Skein

art direction, UX/UI design, animation

Skein is a social media application concept that uses geo-tagging to create more contextual narratives centered around location-based experiences. Pieces of media, or “pins”, are tagged by location and time and then connected to other pins to create sequential narrative threads called “yarns”. These pins can only be accessed by other users from the location where they were created. A pin created in a park, for example, can only be accessed by other users if they are also in that park. Access is not dependent on time, however, so a pin can be seen days, months, even weeks later.

 

Skein imbeds a deeper level of information into digital media, allowing you to tell and explore narratives which are more in tune with the natural limitations of location. You experience another user’s narrative yarn in situ as it unfolded, without such heavy-handed curation. With this application, you are more literally walking a mile in someone else’s shoes.

Demo Movie

Process

My design process started with a rough wireframe/sitemap that outlined the user flow and experience of the application. It was important to keep the application simple to ensure that users never got too far away from the central acts of content creation, exploration, and following friends. I wanted the experience to be relatively flat, so I put the application's main actions within the first two levels below the home screen.

sitemap / wireframe

After the application's architecture was defined, I sketched out possible layouts and icons, fleshing out the ideas in my wireframes. For the icons, I wanted to create them using outlines to keep the UI elements from overwhelming the social content users would be exploring.

layout sketches

This application was designed as part of my master's degree thesis project. You can read more about my design process here.

Sample Screenshots

Home Screen (Map View)

Media Thumbnail (Map View)

Media View (List View)

Home Screen (List View)

Media Generator

Add Description

Create New Yarn

Add to Yarn

Your Profile (List)

Your Profile (Map)

Friend List

Manage Content

Yarn Map View

Friend's Yarns

Final Design