Overview
An exploration of understanding customer needs and increasing value for Spectrum Reach customers purchasing commercials and advertising campaigns on a self-service platform. Deliverables included:
• Persona creation
• Landing page updates (UX research & design consultation) - Increased sign up rate by 1.6%
• Accessible Design System (Sketch Library/Zeplin Style Guide)
• New UI screens implemented to production
• Increased System Usability Score (SUS)* by 7 points
• Persona creation
• Landing page updates (UX research & design consultation) - Increased sign up rate by 1.6%
• Accessible Design System (Sketch Library/Zeplin Style Guide)
• New UI screens implemented to production
• Increased System Usability Score (SUS)* by 7 points
ROLE
UX Researcher
UX/UI Designer
UX Researcher
UX/UI Designer
SCOPE
• 8-week timeframe
• Worked directly with another Spectrum Reach UX Designer –Maile Hiu – a marketing team, an accessibility team, business/data analysts, a product owner, and an external development team
• Worked directly with another Spectrum Reach UX Designer –Maile Hiu – a marketing team, an accessibility team, business/data analysts, a product owner, and an external development team
Platform
Responsive, customer-facing web application
Tools
Sketch, Axure, Tobii Eye Tracker
What is the Ad Portal?
The Ad Portal is a tool that allows small business owners to create and schedule television campaigns at an affordable price. Users can also create their own commercial in the web application or upload their own. By inputting some basic info about their business, users are presented with a TV schedule that includes shows and networks targeted to their ideal audience.
The challenge
Business stakeholders requested a sales revenue increase for the number of TV campaigns sold and my UX team proposed a research initiative to solve this by attempting to answer the question of "what is effective?" We knew that a previously low level of UX involvement led to a lack of user transparency around pricing and advertising terminology. We wanted to validate, dig even deeper and improve.
“Where is the cost for all of it?
What is the bottom line?"
- Ad Portal Usability Test Participant
- Ad Portal Usability Test Participant
Research
Past Usability testing & UI DEsign
For about a year prior to my involvement, a few usability studies had been conducted to determine a step-by-step campaign creation flow. Understanding past research and design decisions was an important place to start.
A few examples of previously existing UI screens
Usability testing & Eye Tracking Software
On-site testing with recruited small business owners – all screened to be potential users of the Ad Portal – provided some key insights.
A few previous examples of the landing page
Users were asked to walk through the landing page (designed and maintained by the Marketing team) as well as the Ad Portal flow to replicate a typical experience when using the product for the first time:
• The story being told did not convince participants to sign up and the cost was not clear
• The majority saw the use of advertising terminology and industry stats confusing
• A lack of understanding of what the "recommended budget" of $250 would include
• Uncertainty of the quality of advertising schedule and no clarity that a commercial was included in the cost of the schedule
• The story being told did not convince participants to sign up and the cost was not clear
• The majority saw the use of advertising terminology and industry stats confusing
• A lack of understanding of what the "recommended budget" of $250 would include
• Uncertainty of the quality of advertising schedule and no clarity that a commercial was included in the cost of the schedule
Who are the users?
Goals:
• To gain new customers and inform
• To gain new customers and inform
them about sales and events
• To engage current customers with reminders about sales and events
• To let more people know about her
business and what makes it unique
business and what makes it unique
Frustrations:
• Thinks TV advertising is expensive
• Thinks TV advertising is expensive
• Concerned younger people don't still have cable
• Believes customer is "everyone" and doesn't understand targeting
• Doesn't know what is “good”
• Doesn't know how to drive ROI
Goals:
• To gain new customers and inform
• To gain new customers and inform
them about service and what makes it unique
• To grow an email list, so those leads turn into new customers
• Build brand awareness and establish a reputation in her industry
Frustrations:
• No dedicated marketing budget
• No dedicated marketing budget
• Doesn't understand targeting or where to advertise
• Can’t afford to hire a professional to make a commercial but also don’t want something amateur
Goals:
• To compete against larger industry rivals
• To compete against larger industry rivals
• To engage current customers by about sales, events, and unique products.
Frustrations:
• Willing to pay for customers but doesn't understand targeting
• Willing to pay for customers but doesn't understand targeting
• What is “good” for his business?
• How to drive ROI while staying competitive?
User Drop Off Points
The mapped journey averaged three major drop-off points outlined in red
(Determined from analytics results from the Heap platform)
Proposed New Flow & More Research
Based on user needs and research above, my team proposed a "Packages" screen that will help both new and returning clients. This will be a set of three choices backed by viewership data, allowing for more informed decision-making.
More research was needed as solutions began
competitive analysis & design best practices
Searching for infographics and "Package" examples was crucial to understanding UI designs.
Wireframes/Early Iterations
User Feedback & UI Iteration
terminology
Most participants had difficulty interpreting campaign length as it relates to other parts of the package. Some did not understand the term "frequency" and how it related to the cost/length.
Content Overload & UI confusion
Some users had difficulty with the display, location, and amount of content on the custom budget page including "helpful tips".
Design System & Accessibility
By organizing and establishing a design system in Sketch, I am able to quickly iterate on new designs using existing icons, patterns, and spacing, etc. By integrating with Zeplin, developers are easily able to turn UI into code.
A large focus of this system was also accessibility, by working with resources such as https://accessible-colors.com and http://colorsafe.co – both of which follow WCAG standards. I also collaborated with an internal accessibility team that provided a report outlining best practices on labels, states, and error messages.
High Fidelity Mockups
Handed off to an external development team through Zeplin.
The landing page updates were designed by the Marketing team, guided by my UX research and UI direction
Packages screen with discounts applied – from upcoming Marketing promotions
Next Steps
• Continue to view analytics and sales reports
• Schedule follow up usability tests to see where the solutions may require more refinement
• Send out follow-up System Usability Score (SUS)* surveys
• Schedule follow up usability tests to see where the solutions may require more refinement
• Send out follow-up System Usability Score (SUS)* surveys
*SUS is a standardized framework for an experiences' usability and learnability.
68 is the average score according to usability.gov
68 is the average score according to usability.gov
