Thunderclap

Lead Product Designer
2013 - 2017 User Interface User Experience Art Direction Mobile Design Responsive Web Design Systems Front-end Development

Thunderclap

Lead Product Designer
2013 - 2017 User Interface User Experience Art Direction Mobile Design Responsive Web Design Systems Front-end Development

Building Beyond an MVP

Thunderclap was 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.

Selected Projects

Project

Transition an MVP into a Business

Situation

The Thunderclap platform needed to transition from an MVP showcase to a service that can sustain growth and monetization.


As Thunderclap spun out as an independent company, the web based platform needed a design framework that could accommodate rapid design revisions across desktop and mobile experiences. The initial web platform was built as a static proof of concept and there was minimal extendability an extended user journey, consistent styling, or mobile usage.

Goal

Create a robust design system that handles rapid product evolution across web and mobile platforms.


Based on our tight budget and timeline I chose to extend Zurb Foundation as the backbone of a visual design system. Foundation’s responsive behavior and grid system saved time and energy so I could focus on iterating design elements across different user journeys & platforms and Thunderclap’s new paid functionality.

Results

This design system allowed us to be flexible and responsive in our scaling, cut development time to days instead of weeks, reduced customer support emails due to efficiency, and ensured consistency across mobile and desktop.


Project

Defining the Next Phase

Situation

Many customer requests and features were not possible to achieve in the current iteration of Thunderclap. We needed to figure exactly what was crucial to them in order to build the next phase.


The Thunderclap platform proved a need to connect and coordinate followers, but it was limited by the scope and whims of Facebook and Twitter’s API. We knew that in order to continue as a company our next phase was to build a new platform that was fully under our control.

Goal

Research our customers’ needs utilizing surveys and interviews to establish core features and themes for our next product.


We needed to take a look and review our growing user base and relearn who they were and what interested them. We started by examining our website stats, and followed by analyzing 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.

Results

Our findings gave us a clear basis of what's important on what to build next.


Project

Harnessing Push-Notifications with Crescendo

Situation

The ground work for a new product that harnessed push-notifications was established for Thunderclap’s next product. We needed a full end-to-end design for this MVP.

Goal

Establish the complete app experience from end user onboarding to primary usage flow.


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.

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

Bringing it to Life
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

Testing with Tribeca Film Fest
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

Result

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.