X – Hanna Xu logo Large x logo Twitter account – @hannaxu Twitter logo linked to the twitter account @hannaxu LinkedIn account – hannaxu LinkedIn logo linked to the LinkedIn account for Hanna Xu hello@hannaxu.com Email icon linked to hello@hannaxu.com GMIC appAttack Award GMIC appAttack Award Icon Gizmodo App of the Week Award Gizmodo App of the Week Award Icon Google's Best Apps of 2014 Award Google's Best Apps of 2014 Award Adweek Logo Logo for Adweek over transparent background MediaPost Logo Logo for MediaPost over transparent background TechCrunch Logo Logo for TechCrunch over transparent background

First Glance Advertising

Be the first glance. Our phones are always with us. For many of us, it’s the first thing we check in the morning and the last thing we check before we go to bed. An average American checks his or her phone approximately 110 times per day. In 2013, that means 8.9 billion glances in the United States alone.

Locket wanted to take advantage of, in my opinion, the most valuable unused real estate in advertising: the smartphone lock screen. Users are monetarily rewarded for “renting out” their lock screens and brands are given the ability to shape consumer action by being the first thing a user sees on their phone throughout the day.

People do not have to open an app or website to see these creatives. These ads are front and center every time the phone wakes up—when they are free of distractions from competing content. At Locket, we called it First Glance Advertising. And since a good marketing term never comes without an acronym, you can call it FGA™ for short.

Locket Circle Logo

Company

Locket

My Deliverables

Android Design, Web Design, Print Design, Creative Direction, Marketing & Sales Design

Tools

Photoshop, InDesign, Illustrator, Keynote, Paper & Sharpie

Year

2013

Team

Hanna: Lead Designer
Charity: VP of National Sales
Christopher: Co-founder, Head of BD
Paul: Co-founder, Head of Product
Yunha: Co-founder, CEO
Kaushik: Co-founder, CTO
Lisa: Designer (started Nov)

MY ROLE

I joined Locket as their first hire. At that time, Locket consisted of the co-founders: Yunha, Paul, Christopher and Kaushik as well as Jacob (Mobile Developer).

Locket team photo

Locket team photo from before we launched

At Locket, I learned how to function as the design lead at a small, early stage startup. I literally lived at the office in a bunk bed. There was no commute, I just roll out of bed and got to work. At the end of the day, I would fall asleep sometimes with laptops and android test phones as my bedmates.

Picture of the bunkbeds

My bed was the bottom left. Above me was business development lead, Chris. The bunk bed next to me was the CTO, Kaushik

Because I was the only designer, I worked closely with the co-founders to create everything from our Android application to marketing videos to investor presentations. I worked with the CEO and other founding members as an integral voice in our discussion about Locket’s direction and product. When Charity joined to lead sales, I worked closely with her to respond to RFPs and ad campaigns. Since the team was so small, I was also a key member on social media, influencer, and user outreach.

In November 2013, we hired Lisa, another designer. I managed her FGA campaign materials. She also worked on product design with Paul.

Prelaunch

Before I joined, Locket had contracted a designer who created the original blue Locket logo & laid the foundation for Locket's branding. I took over from there and designed Locket’s website and marketing materials.

Website, print, and branding created by me

For Locket’s Android application, I redesigned the original lock screen mockup. The lock screen is a personal space for our users and I wanted to respect that. My goal was to redefine mobile marketing and replace it with something that was beautiful, inspiring, positive and shareable. I made the ad area bigger to fill the entire phone screen.

Pre-Hanna Locket screen mockup

Lock screen design before I joined Locket

My Locket lock screen redesign

My redesign

The State of Mobile Ads

In 2013, most mobile banner ads were small, ineffective, or disrupted natural flow. In fact, forty percent of all clicks were accidental.

Locket lock screen compared to other 2013 mobile ads

Locket lock screen compared to other 2013 mobile ads

I wanted to change that by bringing the beauty of print media to the mobile sphere. Instead of thinking that mobile ads were annoying, I wanted users to like what they see. Below, I transformed three existing print ads into Locket’s lock screen in order to show my vision.

Redesign of a Canon ad into Locket lock screen
Redesign of a Sharpie ad into Locket lock screen
Redesign of a VW ad into Locket lock screen

Note: Above ads were never ran live and only used an example of how we could bring print ads to mobile

Dealing with Android Fragmentation

Android design have always been a bit more complicated because of fragmentation and numerous screen sizes. When we developed Locket’s lock screen we made it a priority to make sure the designs could work on most of our user’s devices. I made detailed design specs in order to make sure ads would display well everywhere.

Paul testing our ads on different screens

We tested ads compatibility with all the common android devices

An image from Locket’s design specs

I created specs that worked well with different Android screen sizes. Why px instead of dp? Most of the designers I worked with were used to creating marketing designs for web, print, and banner ads. Since they were not Android designers, it simplified the multi-page design guideline

So, how does Locket actually work?

Locket rents user's lock screen for advertising. Users can swipe right to unlock their device like normal or swipe left to interact with their lock screen. Users earned rewards randomly for their natural daily behavior (interacting with their lockscreen or unlocking their phone). With their earnings, users can buy items, donate to charity, or cash out.

Users were also able to personalize their lock screen with multiple photos as well as a security passcode.

Product mockup I created for adding a personal photo

Users can add multiple personal lock screen photos

Product mockup I created for adding a security passcode

Users can add a security passcode

Our Launch

We launched Locket on July 18th, 2013.

Within two weeks Locket got:

Locket was ranked #2 in Free, Lifestyle

Hershey's Case Study

Locket partnered up with Hershey’s to raise brand awareness for their premium Scharffen Berger Chocolate as well as drive RSVPs to their chocolate and wine tasting event in Napa Valley.

I worked with Charity and Hershey’s to create the nationwide branding and localized event creatives.

Hershey's branding awareness ad
Hershey's branding awareness ad

Phase 1: Brand Awareness

I created multiple images to drive interest for the Scharffen Berger brand. This was a national campaign and the creatives ran for two days.

Hershey's event driver ad
Hershey's event driver ad

Phase 2: Event Invitation

I created ad units that invited Locket users to the exclusive wine and chocolate event. Interacting with the ad will open up Hershey's website to allow users to RSVP. Ad units were a mixture of teaser ads as well as more detailed invitations.

Results:

  • Locket drove the most RSVPs to the event than any other partner
  • Exceeded expectations for CTR & impression delivery
  • Positive press coverage
  • A very happy client & secured a new national campaign

Consumers have become accustomed to ignoring ads on web site and game screens. But when you put beautiful ads on the screens that are right in front of them, the potential for engagement, response and brand-building seems extremely promising.

Sean Maurer, Scharffen Berger Brand Director

We feel we can break ground while reaching new potential customers. They [ads] are very beautiful. Before a consumer starts playing a game or checking their email, it is the first thing they see. Sometimes, people want a distraction so they turn to their phone. We are going to be right there with something extremely visual and engaging.

Sean Maurer, Scharffen Berger Brand Director

Locket was featured on Adweek

In House Creative Team

After an advertiser is approved, the turnaround time to get their creative onto users’ phones is about two weeks. Locket also has an in-house creative team, and a technical crew that tests ads on 20 top Android smartphones they keep in the office (um, apartment)…

Sarah Perez, Techcrunch

I was the sole member of the creative team when Sarah Perez wrote the article (and until Lisa joined in November).

Since Locket’s ad unit was so specialized I was tasked to work with copywriters, art directors, and sales directors from top design and media agencies including R/GA, AKQA, and M&C Saatchi. The campaigns created were for companies like Pledge, Victoria's Secret, Interscope, Lancome, and Purina.

Here’s a small selection of creatives I worked on.

Frank and Oak Ad Creative
Hotel Tonight Ad Creative
Christina Milian Ad Creative
Ebay Ad Creative
Nike Ad Creative
Scharffen Berger Ad Creative
NBC Believe Ad Creative
Lancome Ad Creative
Imagine Dragons Ad Creative
Imagine Dragons Ad Creative
Purina Ad Creative
Purina Ad Creative
Windex Ad Creative
Windex Ad Creative
Smuckers Ad Creative
Axe Ad Creative
Alltrails Ad Creative
Spotify Ad Creative
Dying Light Ad Creative
Pocket Fort Ad Creative
Groupon Ad Creative
Groupon Ad Creative
Orbitz Ad Creative
Orbitz Ad Creative
Chocomize Ad Creative
Amazon Ad Creative
Eukanuba Ad Creative
Eukanuba Ad Creative

Creative Direction

In addition to directly working on ad campaigns I was also Locket’s design point person. I helped other designers create their ads in house. I was available to discuss design guidelines, give feedback and helped create success ad units.

Pink Ad Creative
Pink Ad Creative
Bonobos Ad Creative
Bonobos Ad Creative

Awards & Mentions

Locket won first at GMIC's appAttack, was one of Google's Best Apps of 2014, Gizmodo's App of the Week, and featured on Business Insider's 30 Most Creative People In Advertising Under 30.

Locket had pretty amazing media coverage and the designs were featured in hundreds of articles.

Select publications that featured Locket

Locket was later acquired by Wish.

Conclusion & Takeaways

At Locket, I learned the foundations of how to be successful at a small, early stage startup. I learned how to wear many different hats. I learned a lot about ad campaigns, working with a sales team, and cooperation between companies.

The biggest thing I learned, however, was the importance of talking to your users.

When we launched, the team only consisted of 6 people. I spent that night and all throughout the next day replying to tweets, emails, article comments and direct messages. I found out that the insights gained from the users were invaluable. We learned quickly what wasn’t working. We learned what wasn’t okay to put on the lock screen and we learned what users liked and what ad campaigns they wanted to see. I even created house ads based off of comments on Reddit.

Barilla user tweet

Because I was part of the early “support team” I felt like I had a better pulse on the users. From this experience, I think it’s important for everyone (including the CEO) to read and reply to a few support tickets every week. Answering and interacting with support gave a lot better context about what user’s were going through. Reading between the lines, you can see pain points and confusion. You can see what’s working and you can use it to help build a better picture of the overall experience. At Locket, we didn’t have the luxury to bring users on site for user testing. Support was a great way to understand the users better.

Note: Around the time I left, Locket decided to pivot our FGA to be more of a “Twitter” for the lock screen. I handed off the design reigns to Lisa who created & worked on the new app direction.