FULLSTORY

A summer of designing for a new way to look at customer experience.

"Magic Moments" and a redesigned onboarding emails flow
004-2

TLDR;

During the summer of 2015, I worked as a UX/UI intern for a wonderful Atlanta-based startup FullStory. During my time there, I worked on a variety of projects. From small icons for FullStory's "Magic Moments" to completely redesigning the new customer onboarding experience, my time at FullStory was invaluable. During the summer of 2015, I helped design Fullstory's popular "Magic Moments" and redesigned the new user onboarding emails, boosting trial to paid customer conversion by 23%.

Below is a sample of the work I did that I can show. To see it all, head on over to FullStory's website to check out everything I worked on in action! If you'd like to learn more about my design process at FullStory and how I got to final designs, feel free to ping me an email! Who know's maybe you'll really like FullStory and start seeing customer experiences in a new way too!

Project role

Product design
Marketing design

Date

May 2015 - August 2015

Medium

Web, email

Credits

Josh Teague - Design Lead

So what's Fullstory anyway?

FullStory is a customer experience data app that allows users to record, analyze, search, and play back all user experiences for their websites.

FS_timeline_003.2
PROJECT 1

Magic Moments

Understanding clicks, scrolling, and page transition, is great for understanding the basics. However there's one important realization missing from this: user experience services (aka Fullstory) should bring emotional experiences to light.

Fullstory users felt underwhelmed, bored, and inefficient without a tool to discover emotional insight.

"Fullstory’s timeline needs a set of moments that help users identify emotional pain points in customers while using a website."

animation002

Customer feedback

Before fully kicking off the fuel project from a design perspective, the design, customer happiness, and business operations teams created a new fuel policy to have something to compare to when doing researcha and design work. The new policy was based on the business challenges above. This new policy used a system of debits and credits to always make sure that renters only pay for used fuel and to discourage bad actors. The parts of the new fuel policy were as follows below:

01

Frustration with broken links.

02

Irritation with latency.

03

Confusion over where to go on page.

04

Poor performance due to JS errors.

Finding solutions in emotion

Emotion is expressed with “facial expression, behavioral response, and physical responses, which include physiological, postural, and vocal changes.”

- Charles Darwin

After taking a few days to consider the customer pain points above and how they might be represented visually, I realized that the most appropriate solution might come from a history book. As the quote by Charles Darwin above describes, emotions are most often expressed with facial expressions. So why not use facial emotions to an advantage in bringing customers' emotional frustrations to light?

Iterating for Magical Moments

Realization that a gradient of emotion over time is key to effectively displaying growing “rage” over latency issues.

faces001
faces002
faces003

Refining Magical Moments

More realizations that changes to both facial expression and color were superfluous...

faces004
magical_moments

Final Proposed Magical Moments

Rage clicks express a gradient of “rage” with site latency.
Mouse thrashing shows when users don’t know where to go.
Dead clicks convey frustration with broken links.
JS Errors show poor performance due to Javascript errors

Reflections on Magic Moments

Below are some key takeaways from this project, including what I'd might do if I were to pick back up on things today. There's no design that's ever truly 'done,' so taking time to reflect on my work has been invaluable for professional growth. 

Goals

Solves major design challenge by providing users an interaction and UI to identify UX pain points.

Outcomes

Magic Moments are a user favorite and spurred a competitor Mouseflow to create a “click rage” feature.

Future design

Explore further UI iterations and information design methods.

PART 1

Design Exercise 2: Pushing User Engagement

User engagement for growth is important, especially at a budding start-up like FullStory. With this is mind, there's three factors that help keep any user engagement efforts scoped and in context. 

First impressions are the only impressions. Express the what, how, and when of product. Email is a top resource to boost churn and new user conversion. 

Some emails are just...bad. 

New Fullstory users felt annoyed, confused, and disppointed by stale emails.

email_bad
paths

Onboarding Flows

When redesigning user onboarding flows, I mocked up two possible paths for users to take during onboarding. One, the "happy path" for positive user onboarding and two, a "sad path" to steer hesitant users to the "happy path." Below is a basic outline of the flows I ended with.

Onboarding Emails

Below are the final "happy path" emails after several rounds of iteration. These emails are still in use, standing the test of time in a fast-paced environment at FullStory were things are constantly evolving and changing.

happy001
happy002
happy003
happy004
happy005

"Sad path" emails.

sad001
sad002
sad003
sad004

Design exercise reflection

Below are some key takeaways from this project, including what I'd might do if I were to pick back up on things today. There's no design that's ever truly 'done,' so taking time to reflect on my work has been invaluable for professional growth. 

Goals

Solves major design challenge by improving first impressions and gradually exposing depth of FullStory product.

Outcomes

New user emails boosted trial to paid customer conversion by 23% 

Future design

Explore further iterations of information heirarchy, visuals, and UI patterns.

logo_white