An iOS Collaborative Photo Sharing App

The Concept 

AndCam was conceived as a collaborative social photo-sharing platform. Our goal was to leverage photo-sharing as a new marketing channel for brands to engage directly with their fans through imagery and stickers.

We officially launched the iOS app to coincide with the premiere of Katy Perry’s Dark Horse music video. We created sticker sets using imagery from the music video and allowed fans to share and collaborate by “remixing” their compositions on a social network like Instagram. A week before its world premier we had Katy Perry take to twitter, Facebook and her website to challenge her fans to be a part of the Dark Horse world. #DarkhorseCam became a top 3 trending hashtag in both the US and UK that day.

PROJECT OVERVIEW

I had the privilege to work directly under Mathew Cullen, the Creative Executive Director of Mirada and Motion Theory Studios. He's collected several Grammies and awards for his work in music and advertising. He's always pushing the envelope to redefine experiences.  

My team and I set out to build an Instagram meets DeviantART social network where users could collaborate on design with their own photos. Our goal was to create and bring a powerful photo editing tool into the hands of our users; an app that was intuitive and easy like Instagram, but with more capabilities like Photoshop. We wanted to create a marketplace where artists could upload their creative stickers for others to use. 

AndCam comprised of 3 products: the iOS App social app with a powerful photo editor, a sticker uploader web app, and a responsive website.

ROLE

I was the lead Product Designer focusing on UX and interaction on a team of 12-15, 6 engineers, 3 designers, 3 QA, and creatives. I collaborated with the stakes holders and engineers to design and manage the full suite of products. From ideas to the finished shipped product, I played a main part in crafting the user experience and interaction design of the entire product. I conducted user testing and interviews to gather qualitative data in helping us identify pain points and make better data informed design decisions. 

PRODUCT

Responsive webapp and iOS app

 

Video overview of AndCam and the photo editor mobile App

 
 
 

Screens from the social portion of AndCam's mobile App

 

AndCam's Responsive Website

 

AndCam's Sticker Uploader Web App

 

THE DESIGN PROCESS

In designing AndCam, I developed a design framework to help guide my design process. We worked on extremely tight deadlines pushing out as many as 32 versions of the iOS app and several versions of the web-app and website.

 

1. Gathering Requirements with Stakeholders and Users

I worked closely with the stakeholders to understand their requirements. We targeted users who were active on photo-sharing social networks and shared content extensively. Photo sharing is inherently viral and we would benefit from the over sharers in the community. I created provisional personas from the requirements and set out to do some user interviews and testing.

2. Wireframing, Prototyping & Implementation 

I did an exhaustive competitor analysis on the top 10 apps in both the photo-sharing and social network space to understand what key features they had in common and how users engaged with the apps. We knew we needed a social aspect as well as a powerful photo editor; we set out to build both simultaneously.

Wireframes

Often times I would not have enough time to prototype the features or flow so I would find an existing interaction flow and show my engineers how it worked.

Since most screens did not have complex animations, I usually “prototype” my flows using an iphone/ipad and with Dropbox installed. We build an internal tool called DropLink to help aid in file sharing and made the design and iteration process go quickly.  I found this method to be the most convenient and time effective way to communicate a flow to developers and testers, especially with all the changes that were being made. It also made the approval process move more quickly.

To help developers and testers, I created design documents with detailed mocks and specifications on how a feature or page should behave. Below is an example design doc I provided the engineers and testers. 

3. Usability Testing & Iteration - 

Once the app was shipped, I started doing usability testing to see where the user’s pain points were. We used the qualitative data to guide our design decisions. To find users, I started with my social network, not anyone I know personally but friends of friends, this way I could get more honest feedback. Once I've depleted that source, I started posting ads on Craigslist. To filter out and screen my testers before they arrive I created a google form questionnaire. I sorted and prioritized users and had them come in for user interviews and usability testing.  

The welcome screen iteration -We noticed our users had a difficult time understanding the app’s purpose with the onboarding flow, once they started playing with the app for a min or so, they immediately got it. With this, I worked with the creative team to iterate on the onboarding messaging and welcome screens. We switch from an animated video to straight forward slides and saw a 7% increase in signups with our daily active users.

Our latest iteration on the onboarding process allowed new users to explore the app and browse through the countless Cams without having to commit to signing up for a new account. This new flow resulted in higher engagement among those users who signed up.

To help guide our design and development, we started focusing on metrics and becoming more hypothesis + experiment driven and focusing on the OMTM (One metric that matters).

Reflection & Learnings - 

Having worked on a product for a year and half, here are the three most important lessons I’ve distilled:

1. Build traction and marketing right into the product from the very beginning — at least one person on the team should be thinking about growth, traction, and marketing while the product is being designed and built.

2. Focusing on the MVP and don’t get distracted — when building a product, you should focus on the minimum cohesive unit to fulfill a need. In AndCam’s case, we could have focused our efforts in building the best usable photo editor first and find traction before moving onto the social network aspect.

3. Focus on the right community and win them over — With AndCam, we could have spent more time focusing on gaining traction with a small artistic community such as DiviantArt, getting them to evangelize our app for us. Instead, we focused too much on iterating the product features and design. Had we created a good relationship with our community.

4. Feature creep is no joke  — As a designer and product person, I really had to learn how to balance the expectations of the stakeholders while meeting the deadlines and keep the engineers from freaking out. This meant I had to learn how to say no more than ever. Sometimes it was hard to resist, it would be just this one flow change or add this one feature, but in the end, sticking to the scope will help the team's moral and keep them happy.