Saam

On the Web

Saam is a background social networking application centered around location, photos and messaging. It's an experimental product I've been working on to learn about graph theory, Cocoa APIs and our interpersonal limits in the understanding of digital privacy.

Dates
  • Feb 2014 - Current
Tools
  • Sketch
  • Framer Studio
  • Keynote
  • Xcode
  • InVision

Learning

October of 2013 my wife and I found out we would be having our first kid. Realizing I would become a father made me ask some interesting questions about time and think about the experiences and memories my wife and I were saving to sharing with our children.

How am I actively and passively storing photos so that my children can see them in 20 years?

Which has made me think about and ask variations of the question as well.

How is my social network empowering me to share my memories with the people I care about most?

I've been asking these questions while thinking about the current constraints of social network construction. Every network that exists today is designed around static data in the desktop era of computing. Putting the burden of curation on the user.

This has shaped how we think about the value of social media. Creating the ability to connect with new people in new ways, but not helping established relationships in the same way. All the while creating new paradigms for what we understand as privacy.

With these questions, I realized a network constructed completely from the data around my mobile phone could change my interaction patterns in dramatic ways. My phone could use my location to curate my network for me. Creating a actively managed feed of the people I'm with in a physical location, knowing who I spend the most time with.

Defining

One of the first interaction design ideas I had on this app was the first view opening directly to a live camera. I think if the main interaction is using and storing images, opening to the camera view should be the interaction the app leads with. Social connections are organized around photos, the app should help users capture them.

I use LayerVault for all my local file versions and storage. It's super helpful in lots of ways, but this is the first time I've found value in being able to go all the way back to the very fist save of the app. Here's a shot of the very first save for Saam, where I started the design for the app.

Saam Save 1

I tried to use a comp photo that had some motion to simulate the the camera being live at the top of the view. Camera views are one of the hardest states to design around statically. You can't ever get close to recreating the feel.

My typical process with iOS design is to go right to the first view when the app opens and start designing out from there. For iOS design, I'm constantly putting the UI into my hand. I'm a huge fan of Sketch Mirror, it's so important to constantly keep putting the comp in your hand to get a feel for sizing and experience. Depending on how "view connected" the app design is, tools like flinto make this experience even better.

After getting this design into my hand, I realized I didn't like how prominent the camera icon was. It drew my eye too much and didn't help me realize I can scroll into the content in the TableView below the CameraView. I pulled it out and started working on how the content in the TableView would be laid out. Here's how my artboards get organized in Sketch.

Saam Layout

Getting to the feed portion of the design, I started working through how content could look that we can pick up in the background of your iOS experience. Taking location data and photos that your taking on your phone in another application and turning them into the data that fills your feed. I wanted the feed to feel like a timeline, so my first iteration had a line going down the left side.

I worked out a second iteration after I felt like the timeline was removing too much layout from the feed and not giving the user enough reason to love it. The middle design is the second iteration.

Saam Feed Design

The third iteration on the far right I tried to combine the two a bit, I liked the power of the line, but didn't want to lose too much of the screen. You can also see the differences between a user who is logged in (first view) and a user who is not logged in (2nd and third). The idea here is not hiding the app behind a login process because all that's requried for use is access to location and camera roll data.

By far, my favorite part of designing this process has been working in Xcode so much. We've been treating this as an internal product of Futura and I've been working on the codebase alongside Chris Constable. I've worked in Xcode with this app far more than any other I've done in the past.

Prototyping

One of the ideas I was working out for the cameraView transition to the tableView was the status bar and line for the day sliding into the header section.

Saam GIF

It wasn't the easiest interaction to time the buttons coming in and out around. The status bar fading in could probably happen a bit faster, as well as the user icon. Overall, the header catch to the fixed position works really well. I was stoked on how we worked out the day titles transitioning as well.

We also implemented a super fun modal view controller for the user settings view. The view lets you create an account if you haven't done so yet. And has your user information if you have created and account. We worked out the animation design in Xcode and are pretty stoked with where it is right now. It's got a slight blur and the content on this view would be pretty heavy interaction based, so we wanted to make sure the opacity didn't show through too much to where it would be tough to read.

Saam GIF0

Takeaways

By design, Saam is a work-in-progress and very experimental. I've worked on the product off-and-on as a personal side project over the last year and have recently been deep in a visual overhaul reflecting much of the new thinking outlined in the learning section. Much of that work will be posted soon.