Loop for iOS & Android

I want to thank Alex Doumet (engineering), Thomas Chekaiban strategy & marketing), Nour Sabbag (logo, visual identity) and Walid Khoury (precious counsel) without whom this project would have never existed.

Loop is a pretty simple product. It lets you create private photo albums by selecting people from your contact list.

Only members can view, share and comment on photos. That’s it.

Find it on the App Store (might not work because server is not always up)

I’ll first give a brief description of both Loop and my role, before explaining the underlying principles that motivated its design, for both iOS and Android. I’ll then explain how I took certain decisions before concluding with Loop’s origin story.

My role

I designed the product — while my other cofounders worked on marketing and iOS/backend.

I started out by making a list of requirements (what should a group photo-sharing app do?) to designing the information architecture and flows (how should users realise their goals in the app?) and finally to interface design (how should elements be positioned on the screen?).

Finally, after months of testing, feedback and iteration, I released a final, field-tested 1.0.

The underlying principle

Before designing a software product, it’s healthy to ask yourself about goals. What do you want your users to be able to do? What ideas are going to direct your design work? How should the product feel like? And so forth.

For Loop, we had a straightforward principle that would guide our decisions.

The principle was to model Loop after default iOS apps.

Apple habituated us, since iPhone OS 1.0 to certain design principles. Today, users naturally understand the navigation structures and flows of iOS apps. The same is true for system-looking apps.

WhatsApp, for instance, looks like it could have been built by Apple. Some people say WhatsApp has “no design” because it looks so standard. That’s the distinctive feature of excellent design. Users do not think about the interface. They just use the service and interact with the content seamlessly.

Loop was the second product I set out to build. Modelling it after default iOS apps reduced our testing costs, sped up development and made it understandable almost instantly by anyone who ever used an iOS app. Benefits that ought not to be underestimated, especially when you’re bootstrapping, foolish and still testing your hypotheses.

(Other great examples of what I call default apps include Tweetbot and 2days.)

Design Decisions for iOS

Now we’re talking about the sweet stuff.

I worked on Loop for over a year. I had to take thousands of decisions. But I am only going to write about 3 of them .

How we chose a one-screen new album flow, how we made the simplest navigation through refinement and iteration, and how we changed from an irregular to a a regular mosaic-like design for albums thanks to feedback.

New Album in one screen

First-time users are greeted with an explanatory message.

After registering an account by giving their phone number, users are invited to create their first album and invite their friends.

Creating an album concludes onboarding. So it ought not to be tedious. It should be fast, clear and enjoyable.

I realised making the album creation a one screen flow reduced the abandonment rate. Users still are pretty excited to try out a new app, but this excitement wanes away quickly after registration. Hence one screen, with the clear “Create” button in the top-right corner that indicates that it’ll be done in one go.

Additionally, creating an album and sharing it with friends happens on the same screen. This prevents the existence of “empty” albums by removing the possibility for a user to be alone in an album thus generating negative feelings towards Loop.

Here’s the complete flow for creating a new album.

Above is the complete flow, screen-by-screen for creating a new album. Here are some notes of interest:

• Removing taps one by one: we noticed that people preferred to select their invitees first rather than enter an album name. They then tapped “Create” but it didn’t work since there was no album name. So we made the name field active with the keyboard automatically visible. This also allowed the flow to be faster since we removed one tap. Users were happier, so were we.
• Search Loop and non-Loop users: we put both Loop and non-Loop users (i.e phone contacts) in this design in order to blur the difference between the two groups and reduce friction when inviting non-Loop users. This makes it seamless for people to invite non-Loop users so the feeling of “where in the world are my friends?” is reduced. (When Loop users invite non-Loop users, our system sends a free of charge SMS inviting invitees to the newly created album.)
• Phone numbers everywhere: we’ve displayed the phone numbers below each contact because some people have multiple numbers for the same contact. WhatsApp, for instance, does not and it’s confusing, as you often have to check if it’s the correct “Jane” with the correct US number that you’re inviting to a new WhatsApp group.
• Making it better: we need some kind of bar showing the names of the people a user selected for their album. Currently, there is none and it is confusing.

The simplest navigation possible

To me, navigation is the most important aspect of a software product. A lot of the confusion users feel stems from poor navigation. So I had to make it crystal-clear. It took about 4 radically different models to come to this current (never say final) version:

Main flow: Home > Album > Photo

Let’s look at earlier examples, shall we?

Let’s call them Original, Snapchat and Current.

1. The Original (left) version featured a sweetly awkward Camera Icon on the bottom. Guess what? You’d slide up to take/upload a photo and then choose which album shall receive said photo. You’d swipe left and right to navigate among your albums. Even though I liked this interaction model (original thinking yo!), I let it down pretty quickly since not many people understood it — my intuition for usability got better, no worries.
2. The Snapchat (center) version followed Snapchat’s navigation. Swipe left to get to the camera and swipe right to get to Settings. Since our beta users were all Snapchat users, they would immediately understand navigation. However, we did not account for older users — Loop is loved by families. They found this interface confusing, so we moved on.
3. The Current (right) version is where we’re at today. Contrarily to the first two versions, it doesn’t include a central Camera menu, meaning there is no way to take a photo before selecting a destination album. To emphasise the uniqueness of each album (and to make this navigation possible) we made adding photos available only from within an album. Our users are happy with this model, and so are we.

When in an album, swipe left to see notifications and tap + to add photos.

Irregular to regular: changing by virtue of feedback

Feedback is basically your lifeblood as a designer. You may have great taste but you ought to stay humble when presenting your work. No decisions should be arbitrary, and user validation is often the best validation.

Originally, we wanted photos inside of an album to be displayed like an irregular mosaic, mimicking the richness and variety of daily experiences. Poetic, heh?

Oh irregularity.

Sure, but also wrong. Browsing through past memories, one of Loop’s biggest selling point was not an enjoyable experience. So we settled for a regular mosaic instead.

All hail regularity.

It looks more appropriate, users find it more enjoyable and frankly it reduces the cognitive load to process all images. We also added a darker background to increase legibility.

Loop for Android

Since Loop for Android is unreleased as of July 2015, this design is a work-in-progress.

However, there still are some decisions that might be of interest.

Be sure to check Loop for iOS to get a sense of what my team and I were trying to achieve with Loop (an app to create simple & private photo albums with anyone).

I took care of end to end product design once again for the Android version. This meant learning about Android design, testing my work against longtime Android users and figuring out all the subtleties when designing the same product for different platforms.

Design Highlights for Android

If you feel like it, check out the prototype on Flinto (a great service that lets you link PNGs to create interactive prototypes).

Ok, so just one thing, as we’re still building and learning.

The New Album icon

This is the screen you land on after you signup. I call it “First Time Home”.

Notice the “+” in the red circle? This is how you create an album in Loop for Android.

On iOS, the button was just a “Create” label. Much clearer, right? (I love labels.)

On Android though, there aren’t many label-buttons. Most buttons are icons.

I couldn’t just use a “+”, as the “+” is our “Add Photo” button, that you see when you’re inside of an album (see below).

This “+” is used to add a photo to an album.

So after dozens of trials (various icons, positions, colours etc.) and user feedback (“what is this shit?”, “I don’t understand”) I settled for a “+” inside of a red circle.

This represents the creation of a container — the album — in which you will add content — photos — by means of the red “+”. After showing the design to 12 users, I am now confident that this button will not create confusion — the kind of feedback I fear most.

(All feedback is great though.)

Early UX

Just for fun, here are early UX work for Loop. The first is the original, first-day IA and the second is what I called the communication board (client-server interactions) that I made for the developers on our team.

Information architecture sketch for the first version of the interface.

This IA was made to create a list of technical requirements for the product. Many things have changed today.

The data board below was used to generate the first list of API calls.

How Loop came to be

My dear friend — and Loop cofounder — Thomas called me and talked to me about a visual how-to guides app. He wanted us to design and develop a service which would have enabled people to create visual how-to tutorials to teach people anything. An even less cumbersome Snapguide. However, after a little bit of discussion we realised there was a bigger opportunity. There wasn’t an universally enjoyed way to privately share photos with friends. Sure, there’s the iCloud Photo Stream feature baked in iOS. But is it great? Do people use it? Do people love it? After asking around and doing a little bit of research we realised that this was not the case. Apple is known for the quality of its software and hardware products. Not for social products.

We paused for a bit. Isn’t Facebook good enough for this? You can create private groups and share photos, right? Yes but Facebook’s nature is that content is public. People use Facebook to browse photos of their hot friends and random stuff. Not to create stories with people close to them.

Isn’t WhatsApp doing the same thing? To a certain extent yes. But text impedes the quality of the photo-browsing and album-making user experience.

So we set out to build Loop (initially named Phop, don’t ask why).

We met with Alex, an iOS dev and creator of Opak in March 2014 and started designing and building the app then. On April 18th 2015, we released it.