Thunderclap

Lead Product Designer
2013 - 2017

UX, UI, Art Direction, iOS Design, Android Design, Web Design, Mobile Design, Design Systems, Front-end development

CASESTUDY

Building Beyond an MVP

Thunderclap is the first crowd-speaking platform that coordinates content shared on social media. My work established new design paradigms which enabled people to pledge their social reach to clients like The White House, L’Oréal, Disney, Planned Parenthood, and more.

As the Lead Product Designer, I shaped experiences and enabled users donating their social currency. As a small startup, each employee wore many hats. Besides leading UX, UI, and visuals, I also wrote pixel perfect front-end code. Our company ethos skewed toward action, so I worked fast to balance business goals with creative intuition.


GOAL #1

Transition an MVP into a Business

My first task was to create a new but consistent design system that could keep pace with our rapid growth. This design system is flexible and responsive to meet the demands of Thunderclap’s new paid functionality. My design system added visual unity across desktop, web, and mobile experiences.

The many specimen of Thunderclap campaign pages and lockups across desktop and mobile.

RESULTS

Customer support emails cut in half due to clearer design and communication.


Goal #2

Keep customers coming back

Our next step was to grow revenue by learning more about what our customers need. We began by examining our our website stats. We analyzed KPIs like returning customer frequency, popular categories, and customer geography.

From there, we sent email surveys and did one-on-one phone interviews with customers. We learned the needs between individuals versus agencies, customers’ day-to-day process at work, and how Thunderclap solved their problems. We also asked what else Thunderclap could do to make life easier. This was our start in building customer personas.

Patterns emerged from our surveys and interviews. Some of the data validated assumptions while a few took us by surprise.

Results

Our findings formed the basis of my upcoming designs for new product features, landing pages, and user experiences. We distilled them to a useful number:

  • Our Customers want to stay in touch with their amassed audience
  • A lot of audience engagement doesn’t t current Thunderclap product model
  • Facebook and Email are the best way to keep in touch with audience
  • Don’t like social media algorithm throttling their own audience
  • There was an interest in utilizing push notifications

GOAL #3

Create a new MVP that harnesses push-notifications

With our new customer insights, we started the process of creating tangible goals. After many whiteboard brainstorms, we realized we needed more than what the web based Thunderclap had to offer. We needed an app based product that utilized push notifications to create direct real-time interaction between a Thunderclap customer and their amassed audience. We named this app Crescendo.

My early sketches detailing the flow of push notification content.
Flow of the user journey of account creation and app download

Iteration

My broad design experience was a key factor in being able to move quickly from concept to execution. Being part of the full process, from user-research to front-end coding, ensured the integrity of our Crescendo. My output of sketches, comps, and wireframees established the end-to-end experience of our MVP. I closely guided engineering to build the iOS and Android apps, in tandem with each design iteration. We ironed out discrepancies and revised until design and tech met criteria.

My design process: sketches, prototypes, and usability
An early flow documenting the Crescendo push-notification 'share' card
A revision of our card template that's based on user feedback from our initial design


Adding Personality

Once we had a working end-to-end framework, I established a design system and UI patterns. This included consistent color schemes, typefaces, UI components, and rules on tone, behaviors, and user experience guidelines. This library is expected to grow and change within the scope of the product.

I made it a point to have this library within a separate scope from our MVP. This allowed our creative aspirations to not be compromised in the agile work flow. New ideas could see out completion, and be added to the MVP as needed, fleshing it out in an incremental evolution.

Testing and Revising

Once it came time for beta testing, we selected close partners that fit our personas. Generally, this meant that they needed direct and immediate connections with their audience. They experienced a vertical slice of publishing content within Crescendo. This included content creation, content analytics, and user engagement.

Afterwards, they told us what worked and what didn’t. They loved real-time stats and watching instant open rates. They didn’t like the confusion Crescendo’s branding presented to their audience. They wanted a personalized way to greet them. We took note and revised.

Our initial onboarding process with our default Crescendo visual style

With our testers' feedback, I designed a template that let publishers display their own background image when priming their followers for the first time. This branded experience added clear expectations for the user and gave publishers a bespoke first impression.

Comparison between my new default and branded designs for onboarding users to the app

Naturally, this feature lead to the challenge of building a clear and simple account creation process for the publisher. I made and tested new flows using Invision that aimed to make account creation easy. We held one-on-one user tests for each design. After each round we’d make improvements based on what wasn’t working or clear. I also took the opportunity to add in new design styles and interaction components with each iteration. Not only was the flow becoming more understandable, but it was looking more impressive.

The evolution of my design solutions for Crescendo account creation

The Crescendo beta aimed to explore what content is best suited for push notifications and how to empower users during the shared moment. We were fortunate to have Tribeca Film successfully beta test our new features to run contests for their audience. Another beta tester, Trap Karaoke, had massive success in ticket giveaways to loyal fans that opened notifications quickly enough. Both Tribeca Film and Trap Karaoke had phenomenal open rates of up to 70% on Crescendo, which is leaps and bounds better than 20% for email, and 2% for social media.

Each push notification touchpoint for Tribeca Film's ticket giveaway

Results

Through our Crescendo MVP we replied to customer needs and got a glimpse of what the future may hold for Thunderclap's features. We learned the challenges of utilizng push-notifications, but also the huge advantages it has for time-sensitive contests.