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