(Click and Zoom)
Tara DeAngelis
Experience Designer / Art Director
Online
Psychotherapy
Summit
My Role: Utilize User Research, UX Best Practices,Creative Brief and Customer Journey Map to Create Brand, UI of Player Pages, and Visual Design of Marketing Funnels and Assets.
Background
I collaborated across departments to design a 10-day online educational summit with the goal of empowering yourself in relationships, heal the trauma of narcissistic abuse & shift our culture from me to we.
Discovery
I was briefed in Kickoff and Creative Direction with the research compiled by the Product Manager.
Creative Direction:
Friendly and fun design.
Overview of user flow
Overview of deliverables
We Will Know the Project is Successful If...
Key Performance Indicators
Meet or exceed checkout conversion goal
% Positive customer feedback vs. negative
Number of Social Shares
First-time customers to returning customers %
Revenue goals met
Net profit goals met
Definition
I Designed the User Persona & Traits
While there was no budget for user research, I was fortunate to live in a town that was fanatical about our products and was able to survey a few handfuls of healers about their needs, influencers, and experiences about the topic. Betty Johnson ended up being the main user.
User Problem Statement
Therapists and others need a way to easily consume the most up-to-date research in one place to help understand the Narcissism Spectrum to assist in healing themselves and others.
Ideation
I Explored different options for course branding.
Then I designed the style guide and supporting graphics and animations for a consistent look and feel across all marketing and product assets.
Prototyping
Wireframed Low-Fidelity Prototype
At the beginning of my design process, I created low-fidelity wireframes in Sketch from the general user flows supplied by the marketing team so I could make sure that this is what marketing really wanted to prevent rework. It was also useful so I could collaborate with the copywriter on visual and written content that worked well together.
User Flows Created by Marketing
Interactive Prototype I designed to illustrate the user journey from:
marketing funnel > free live summit > checkout > product player page > facebook group
High Fidelity Designs
Assets Designed
Logo
Style Guide
Funnel Pages
Quiz Lead Generation
Marketing Assets
Social Graphics
Social Ads
Retargeting Banners
Email Graphics
Animated GIFS
Video Graphics and Title Screens
Design Pain Point!
I had big design ideas for this project but had to let them go due to newly adopted design platform limitations. My designs had to be scaled back tremendously. With the new platform (Clickfunnels) I had very little control over spacing and optimizing designs. But, I learned how to not get too emotionally attached to my work (as if it were some artistic thing) and focus on the results..
Problems & Testing
I found color contrast issue in the logo that violated Web Content Accessibility (WCAG AA) Guidelines. The guidelines were pretty new at the time so we were not accustomed to checking contrast on everything.
There was some debate around whether or not the logo needed alt text or to be in live text format for to pass ADA. It turns out logos were exempt from color contrast standards that affect live text if not used in place of live text.
For future products, we started having Q&A, + UX Engineer present in design review meetings to flag anything that jumped out to them. This was especially helpful because sometimes marketers would change the designs and not know about accessibility rules.
For the calendar button, we had our developer add custom CSS to darken the background and pass.
PROBLEM: The mobile navigation didn't work properly.
Action:
Adding padding below the nav didn't bring the page title down as it should have. I was able to fix it with the help of our developer.
Many users didn't watch past "Day Two"
Our UX researcher conducted surveys, used analytics and employed heatmaps. People did not continue the course for a wide range or reasons: not feeling engaged, not resonating with the content, being too busy, having a grandfather event, and even having a gallbladder problem.
Solution Ideas for Next Phase: Create more engaging content. Give them a good reason to come back. Leave them on the edge of their seats dismayed that it's ending, just like Game of Thrones. Send email reminders. Give them points for finishing the course that they can use towards getting free access to another course. Send text reminders. Give them extra points for sharing their thoughts about each episode on social media.
Nearly 60% of users interact with product via mobile device.
Problem:
Clickfunnels allows for only basic responsiveness. We need a platform that can be customized to create a better mobile experience. It is responsible enough to pass ADA, but not enough to optimize for user experience on different screen sizes.
Question I had (and still have): What was the conversion rate of mobile users to desktop users? What was the average page view time for mobile devices and how did it differ from previous similar products that were designed with a more advanced design platform?
Next Steps Taken:
Try to make a business case for using Elementor which will provide a better user experience across all breakpoints while still allowing for on-the-fly changes after launch if necessary.
Accessibility Issue
All tasks could not be completed by a keyboard. Tabbing through content skips all portions of text. Only navigates to images and links.
This was not fixable with clickfunnels. So we pushed really hard to use a different platform that didn't violate ADA.
The majority of navigation clicks were on "Presenters"
Excluding the clicks on "Welcome" because it was included to act as a jump link back to the top of the page, the "Presenters" was the most clicked item. The assumption was made that the customers were most interested in who was presenting, and they were not at all interested in the video. However, if a user testing method like a cognitive walkthrough was used, we may have found that their reasons for clicking "presenters" first (while there were no clicks on the video player) were for example, that the video player was broken, or that the video placeholder image wasn't interesting enough to click on. This is why user testing is important! However, based on previous studies, it was shown that users clicked presenters most often, so it was pretty safe to make a generalization that users cared most about who was presenting.
Question I still have: Although there did not appear to be many (or any) "rage clicks", did the users think that clicking the logo would take them to the parent website?
Results
TEAM WORK + A TIMELY TOPIC = SUCCESS!
200.2%
Over Revenue Goal!
194%
Over Optin Goal!
58,130
First-Time Customers Added to Email List!
