FAN SIGNALS – New Innovation


Could Fan Signals be an NPS-Killer and disrupt SaaS NPS industry?
The ROI from this unique data and from customer feedback proved to be more desirable and valuable (customer retention, LTV and churn prediction modeling) than Net Promotor Score (NPS).

Fan Signals — MVP

OVERVIEW
The Love Dialog started with a simple question “Do you love our brand?” – query that generated an 80% response rate. Based on how a consumer answers, they will redirect to another type of feedback interaction (survey, message center, ratings R&R, etc.), which captures even more VOC feedback.

1. THE PROBLEM
Customers wanted to see the volume of responses and were confused about how the Love Ratio was calculated since the chart represented a single bar. This is where my design journey begins –  working with Apptentive’s Love Dialog flagship product as the Lead UX Designer.

2. CUSTOMER INTERVIEW
I spearheaded the first POC customer interview to validate the design and gauge the customer interest. I conceptualized and iterated on a variety of histogram chart designs and landed on a Pos. / Neg. bar chart, which best represented a binary question. This design solution helped to visually solve the volume issue and showed how responses were trending. This was a pretty good improvement. I created an InVision prototype and shared the screen with our customers to discuss product value and if we should green light the feature.

3. THE DISCOVERY
Collaborating close with customers, data scientist, and dev we discovered how consumers answered the Love Dialog over time from mining the data deeper. The insights started show and classify consumers into cohort segments known as Fan Signals (New Fans, Switched Fans, and Repeat Fans). The dev was able to expose an API for redash.io, then I created a public view using real customer data for interviews.

4. PRODUCT VALIDATION
From inception to productization, the team was able to ship Fan Signals to all customers as a feature flipper. The POC from sales interviews received positive feedback as a new up-sell revenue stream.

FAN SIGNALS VISION DASHBOARDS

Fan Signals Dashboard
The vision dashboard represents a future where the summary cards and the line chart shows customer segments through the lens of loyalty and shifting loyalty broken down into sentiment segments known as Fan Signals.

Insights Dashboard
The vision was to augment Fan Signal data with other data to give customers insights into meaningful relationships from messages (open feedback) and surveys.

CUSTOMER DRIVEN INNOVATION (CDI)
PROBLEM — The analytics dashboards lacked all visual charts (cubed analysis) available due to budgeting constraints. Part of Customer Driven Innovation process is to get real customer validation before the team builds a slew of new chart analytics.

CHALLENGE — We needed the ability to show enterprise customers the deeper data insights, instead of sending a large JSON dump or excel file without any UI.

SOLUTION — I partnered with a data scientist in creating a flexible template that can be tailored for any customer. This unique solution was created in PowerPoint (instead of Excel or Word) then the document can be linked to an excel data connector while keeping the visualization.

EXECUTIVE REPORT — EXAMPLE
The tailored reports were designed to reveal deeper insights into how customers feel about the brand. Each Cohort segment can be easily swapped with another customer ID.

RESULTS — The reports received great praise as they made it to the C-Suite and with continuous improvements the 20+ page reports ended up closing 50K+ deals.

MOBILE WEB


NEW PRODUCT CHANNEL – (Mobile Web, Kiosks, API)
The challenge: 
Apptentive’s Mobile Web (WebSDK) lacked key product features compared to the Mobile SDKs (Apple/Android) that made the company successful. I took the role as product producer to update the WebSDK and create product parity with the mobile SDKs as another customer feedback channel.

HOW DOES A HYPOTHESIS BECOME A PRODUCT?
I participated in a Hackathon. My proposal was an IoT device with hardware buttons (GPIO ports) connected to a Raspberry Pie using the new API and WebSDK. To complete the project, I conceptualized, designed and built a responsive web app. I called it a progressive survey (skip logic) able to iterate through a variety modal windows that captured the binary Yes/True, No/False feedback questions.

PROOF OF CONCEPTCustomer Love Summit
To engage customers in Apptentive’s new products, the company created the Customer Love Summit. I was able to take this event to the next level by showcasing a variety of proof-of-concept feedback mechanisms in real time, all powered by attendee participation. The vision was by the end of the event the CEO on stage could switch to a monitor showing how many customers participated in a live demo dashboard featuring the new API in action. 

The Results – Customer participation and enthusiasm were at an all-time high. Everyone involved – from customers to CEO and the event coordinator – loved the feedback mechanism.

DEMO TABLE
I owned the Summit Demo Table, spearheading a variety of feedback devices that included hardware button, 3 kiosks, Table Tents (QRcode), LTE Demo and Geckoboard monitor. Besides doing all the visual graphics, I worked with the developers to make sure each feedback API functioned properly. Participants/Investors gave the Demo Table, and the ability to test out devices in person, high marks.

At the event the projector showcased a variety of customer examples on how the new API could capture a variety of different types of feedback.

DEMO SITE EXAMPLES
I took the initiative and coded a fictitious Demo Site to QA every product scenario. This sped up the development process by discovering issues through dogfooding the product faster. I built the site to have a global background image so it can be easily swapped for any customer interview or sales call.

Results – Sales was able to close deals before product features have been fully productized.

PRODUCT SCENARIOS
In addition to utilizing InVision prototypes, we found it helpful for the team to fully understand individual workflows. I created a series of diagrams, each of which represents a key product scenario and level of effort to implement the feature through the customer POV, edge cases, product bugs, and design polish. The results were instantaneous and ongoing – a better advised staff, who could respond to product needs.

LEVEL UP DESIGN
The original message center looked dated and was triggered by a small, fixed Contact Us button in the bottom right corner of browser windows that was not discoverable. My design solution was to elevate the visibility for the on-screen button and to incorporate additional feedback interactions into the design as a seamless experience.

Results – After updating the button customer feedback increased, enabling the company to be more responsive to customer feedback.

CUSTOMER FEEDBACK
Customers also wanted the ability to customize the look and feel of feedback interactions, since native dialog boxes (Apple/Android UI) lacked the ability to align with the App brand style.

THE SOLUTION
The innovation was to give customers the ability to fully customize feedback types together into one seamless experience. The wireframe shows how the Love Dialog, Notes, Surveys (skip-logic) and Message Center (open-ended) can be stitched together into one fluid experience. By removing checkboxes and radio buttons and use another binary control as an alternative really simplified the experience (NDA).

MARKETING SUPPORT
After successfully shipping the WebSDK, I transitioned to help support marketing efforts, since I was the most knowledge about the product and designed the product page (marketing website), one-pager, product capabilities brochure, and full e2e product video demo.

THE RESULTS — 6 months after launching the WebSDK sales were able to close significant new revenue deals.

Audience Engagement


OVERVIEW
The existing query builder performed well at soliciting and capturing a variety of feedback interactions (surveys, messages, ratings, NPS) – but only in a one-way communication. In their feedback, customers told us they wanted the ability to reconnect with their customers.

PRODUCT GOAL
The product goal is to help customers re-engage with their audience. Among other features, I mapped out the following epics:
1. Segment Builder — The ability to create a segment that can be used by other interactions.

2. Custom Targeting — Create bulk targeting based on custom values such as Key-values, Zip Codes, DMA locations, and Sentiment.

CRITERIA BUILDER
Holistic Journey Mapping 
– When it comes to epic feature development, it’s helpful for the team to understand a holistic map of all individual stories interacting with each other. The key is to show step-by-step each customer story with a workflow so stakeholders get on the same page quickly. This is where the tough questions around feasibility, practicality, cost, and resourcing sway the product decisions.

SEGMENT BUILDER
At a high-level the system is kind of like a Crud system + Query builder. The real power of the platform is to uploading a customer list or cloning a segment to allow customers to re-engage with their target audience. Another other words we call this closing the feedback loop.

SEGMENT BUILDER
In agile development mapping out individual UI stories showing how a customer can go down a rabbit hole and traverse to accomplish a task is crucial for sophisticated platform development.

UI FUNCTIONALITY SPEC
Part of my process is documenting a high-level UI functionality from a designer POV covering use cases, wishlists, and product requirements. The working doc covers a variety epics and product scenarios to help uncover or determine any unforeseen edge cases.

WIRING DIAGRAM -DESIGN POV
Part of my discovery process is do a quick rough wiring diagram in order to help visualize the user journey before the UX process begins.

DOMAIN DIAGRAM -DEVELOPER POV
I partnered with dev and created the Domain Diagram to validate targeting functionality.

COLLABORATION PROCESS
Finally in my process is to map individual user stories with visuals to better understand the big picture. At times, I found when it comes to complex user interactions teams get siloed and miss interpret product features. The printouts help the collaborative process and speeds up development. You know when you have a high performance team is when you get frontend and backend collaborating.

TIMELINE: Architecting a new platform


RESULTS
Designing a NEW platform from scratch in one year is hard work, but by driving design-level thinking methodologies, modern design principles, and guidelines, I was able to ship a platform that is modern, intuitive, and could be a game changer for the IT industry.

Dominic Pouzin – CTO
“Geoffrey is a very talented senior UX designer and would be a huge asset to any company, especially those with a focus on enterprise products. At BitTitan, Geoffrey helped our product UI evolve from “amateurish” to professional / on-par with top SaaS solutions. Geoffrey’s key strength is creation of new UX concepts and high-level look-and-feel experience for enterprise products.

THE CHALLENGE — OVERVIEW
The CEO made a business decision to leverage MigrationWiz (cash cow + huge consumer base) and pivot the company to managed services. A lot of research went into understanding the new business direction. The plan was to leverage 3rd party OEM SaaS platforms to enrich and supplement the current offerings to be an IT SaaS leader. BitTitan’s flagship product MigrationWiz had six-plus years of technology behind it, including multiple types of migrations. It would be too risky for the company to build on the current Migration platform (tech debt) to avoid any service disruptions. The decision was made to build a new platform using modern tech.

1. ROUGH WIREFRAME: 10/2015
After multiple requirement meetings, presentations, and wireframes, I designed the base platform UI model to support all of the features the Dev team was going to build using the new ember.js framework. The wireframe below shows the high-level breakdown on how two platforms could co-exist and needed to seamlessly scale. The Vision was to support 100’s 3rd party SaaS (API-First) services/partners integrated into the platform.

2. ALPHA PLATFORM: 1/2016
The system had to scale for new services while supporting hooks from MigrationWiz, DeploymentPro, Email Archive, and Data Encryption, Entity Management, plus additional features such as SSO (Rbac), App switching, Notifications, Task launcher, Purchasing, and most important onboard new 3rd party OEM SaaS solutions in a consistent intuitive way.

3. INTEGRATED FEATURES: 7/2016
Once the platform MVP framework was in place, it was time to start integrating services and alpha testing the platform.

5. SYSTEMS LIBRARY— INTEGRATION
One challenge was designing in an old UI kit. I knew I had to modernize the platform to help BitTitan serve as a trusting SaaS application.

It was time to start splitting up the workload, I owned 8 epic features. I interviewed and hired 2 designers to collaborate in a shared vision to digitally transform the platform into something much more contemporary. I made it a company commitment to drive a modern UI Kit–the existing dark grey nav and overall site felt like a typical Seattle day to me. I always knew the future of the site would need to be something a little more modern.

4. BETA LAUNCH:  10/2016
This screen shows the first private customer beta launch. The dashboard was still very rough around the edges. The plan was to ship fast / fail fast and start dog fooding to get real customer feedback while shipping in two week sprints. This was an exciting time for the company, throughout my career this is the only fast paced highly efficient team I’ve been part of. The team collaboration fostered solutions for the greater company interests. Their motto: “Get Shit Done!”

6. PUBLIC LAUNCH:  4/2017
Once the new UI kit was implemented the platform started to come to life. The kit helped to speed up delivery time, since common controls and UI elements were all components. Among the improvements were: Service center, Activity feed, Subscription billing, Delivery Center, Cost reporting and around 20 new service solutions were implemented. I also made layout changes to simplify the experience by introducing the detail panels for fly-outs and inline accordions.

Responsibility
As the lead designer, I owned key platform features an once the UI Models (MVP) were in place I started handing off the designs to my peers for further refinement and design polish. Then I turned my attention to polishing the Dashboard, Delivery center, Entity management, Activity feed, subscription billing, and 3rd party OEM task workflows.

DELIVERY CENTER – TASK AUTOMATION


OVERVIEW
The UI goal was to simplify complex SaaS workflow solutions into step-by-step individual tasks (40+) to eventually be reduced down through automated processes. 

PROBLEM
Enterprise solutions were often too complex and usually serviced by system integrators (SIs) through the command line. The challenge was working with devs to translate command line code into backend/frontend scripts (GUI) to be serviced through the platform.

1. SOLUTION CENTER – aka Marketplace
The platform had scale for 100+ service solutions was the vision. The UI had to provide clear descriptive guidance and give customers confidence to start a new task, show status, assign tasks, ,track tasks , tasks due, and the ability to notify customers when issues occur.

PERSONAS
Partner – AE
I need to quickly review task status, ensure customer confidence, pitch new customer services (SOW).

Partner – IT Pro / SI
I need to remediate platform services for customers, follow strict SOW workflows, and provide partners with task progress/status.

2. THE PLAYBOOK – TASK OVERVIEW
I added an overview section to let users know solution details before starting a service, as well as adding a right column to show average profit, number of tasks, days to complete, and technical skill level. Once the requirements were complete the user has the ability to close the modal window which takes them back to the delivery center.

UX SOLUTION
From my experience in designing complicated workflows I designed the feature to be a full-modal window (immersive experience) to keep the user focused on the left nav task bar. The logic and this simple solution allows the modal window to be launched from anywhere on site. The Activity feed (hub & spoke model) would be the primary way to get to 1:M tasks.

3. DELIVERY CENTER (MVP) – SOLUTION TRACKING
The initial MVP Delivery Center workflow was to get customer feedback and validate the UI model. Customer feedback confirmed this experience was superior to the command line. Following the MigrationWiz workflow model made it simple to integrate new services into the platform. The proof of concept (POC) paved the way as the most important feature for the platform.

COMPLEX TASK WORKFLOW EXAMPLES

Email Migrations – MigrationWiz
BitTitan flag-ship product MigrationWiz moved millions of emails to the cloud.

The problem
The original MigrationWiz functionality was a wizard type UI model (literally). The amount of customer confusion and support tickets was a real pain point for customer service. The platform served well (originally) as an email migration and was the companies cash cow. The UI model was never expected to scale for new types of services and this is where the UI started to break down. I was on point to rearchitect the UI.

SOLUTION — UI REDESIGN
The solution was to redesign the MigrationWiz workflow to be a vertical list in the left nav. The results were super successful due to reducing the volume of support tickets. This simple change to MigrationWiz provided the baseline for the future Delivery Center task flow automation.

CLOUD STORAGE SERVICE – OEM WORFLOW
Publicly traded companies required by law had to store seven years of email. This service would hook into MigrationWiz seamlessly.

Solution: The flow shows the connection with a mailbox migration as an up-sell during the migration process.

DATABASE MIGRATION SERVICE – WORKFLOW
Diagram below shows the migration workflow for SQL Server 2003+ the source to Azure SQL Database the destination.

Entity MANAGEMENT – DEVICES AND USERS


OVERVIEW
Lead designer on one of the most important features for managed services is the ability to add entity’s in order to take advantage of the platform’s full capabilities. Once you add an entity (user or computer) new services will appear based on the scanned data.

LANDING PAGE — EMPTY STATE
If no users have been added, this page explains the different ways to add users to the platform. The platform can add users through GPO, Connectors, download Device Agent or install from email.

TASK LAUNCHER — MODAL DIALOG
After the selected method the task launcher modal dialog opens on the overview task (step 1) with descriptive guidance / Video with the steps in order for the process to be successful.

USERS — LIST VIEW
Once the system has been populated the user (IT) can perform services on that entity. View user details, View alerts, redeploy agent (heartbeat), Group users, and Filter alert types.  To avoid having too many controls on the page, I added a contextual menu to do tertiary tasks to a profile.

USER DETAIL — PANEL
A user (IT) can quickly view hardware details and evaluate what actions to perform on a device, as well as see associated users assigned to that device. The customer feedback was great since they don’t have to drill down to another level to view all relevant data.

USER INSIGHTS — CHART VIEW
As a short-cut (Inventive), I added another chart panel to quickly see a how many consumers are running the heartbeat app (device agent), or other issues instead of drilling down to another page.

DEVICE AGENT — DEPLOYMENT
Device Management Agent (DMA) is the quickest and easiest way to automatically deploy and configure software applications on end users’ desktops and mobile devices without implementing complicated enterprise software. DMA helps companies of all sizes get up and running on new software applications quickly and makes it easy for an IT admin to remotely deploy and configure those applications without having to touch the device.

DEPLOYMENT PRO — BEFORE / AFTER
The original DeploymentPro agent looked like some type of malware, and the customer drop-off rate was high.

THE DESIGN CHALLENGE
DMA is a universal shell app (C++), I was tasked to redesign the client app and improve the user journey to be more intuitive and user friendly. Trying to push the design… but limited due to apps language created a lot of limitations when working with Dev 1:1.

EYE CANDY
I thought it would be a nice touch to add a little bit of eye-candy (.gif animation only supported) to let the user know the app is running during configuration process, since the process takes time to mirror the email profile on the cloud.

Results — The redesign improved customer satisfaction and the animation reduced the amount of users closing the app.

ACTIVITY FEED – Playbooks


PRODUCT GOALS
To build a notification engine that dynamically generates relative information about a customer’s service, computers, users, events, suggestions, and reminders.

THE RESULTS
This agile process from MVP through Vision was executed flawlessly. And by introducing the detail panel, I simplified the experience by eliminating the need for the user to drill down to another page. Press had early access to the platform. View

1. DIAGRAM FLOW
I created this high-level user flow to align the user journey and UI model with the product goals.

2. CONCEPT ITERATIONS
Through whiteboard sessions the team was able to understand a holistic view which helped synthesize the product features.

3. MVP — LEARNING LESSONS
My original feed design was rough by necessity but flexible, allowing the team to focus on more important features. We had to ship with an MVP product, which basically was an amalgam of all individual feed types and events. This is agile thinking — recognizing you can’t expect to build everything, or we would never ship.

4. CUSTOMER FLOW
My process was designed to maximize communications with developers. I printed out a UI site map on a large format printer, then got the developers in a room to walk them through the user journey. This approach helps to speed up the development process, so everyone is on the same page.

WINDOWS APP STORE DEV PORTAL


PROBLEM STATEMENT
The Windows store catalog lacks a broad range of quality apps, which hurts the Windows eco-system, app developers, and bottom-line.

OPPORTUNITY
Through consolidation, MS has the opportunity to greatly increase the One Store marketplace by supporting a variety cross platform technologies. The redesigned dev center would be able to on-board Windows XAML apps, Xbox, Win32, Android, and Services through a unified ingestion pipeline.

APP ONBOARDING PAGES
I designed the App on-boarding workflow pages throughout the platform. I went with an immersive experience than the typical non-immersive (left nav) UI model.

CUSTOMER FEEDBACK PROPOSAL
Problem Statement — Poor customer reviews hurts app install rates and monetization and pitched it to leadership.

Insights — From my own experience publishing Oscar’s Adventure as an early prototype app, I received a few negative comments and wished I was able to respond to customer feedback in order to:
· Reduce the amount of negative app feedback.
· Reduce the amount of feedback shown in the app store.
· Reduce the perception of poor Windows App Store apps instead of it becoming product bug triage location.

Proposal — From the App Store allow the ability to send a private message to the developer instead of public feedback regarding minor bug issues. To deter the volume of negative feedback through the ability of responding to customers concerns, this 1:1 personal feedback touch gives the user a validation that their message was heard and that the developer is working on a solution.

TAKING INITIATIVE
Since I was working on the Windows App Store I wanted to create my own app too. I reached out to a developer and we built “Oscar’s Adventure,” a children’s learning app for ages 3-6 years old which we designed and built in 3 weeks. We were able to successfully publish the app internally through the Windows app store which helped to validate UX decisions I made in the developer portal.

SOME OF THE GAMES

OSCAR SKETCHES
Some early concept sketches of Oscar the Otter to the final .svg variations.

BUSINESS PARTNERSHIP
Due to the amount of images and time I could spend on the application, I orchestrated an advertising partnership with dreamstime.com where I had full access to their entire illustration library. In exchange I gave them splash screen advertising throughout each game transition. This was a significant business deal and it was a win/win for both parties.

WINDOWS DEV PORTAL ANALYTICS


PRODUCT GOALS
App analytics is essential for companies to fully understand their app business. The initial product roadmap included ratings and reviews (R&R), quality, downloads, usage, purchases, conversions, in-app purchases, and financials.

ANALYTIC PAGES
I designed a variety of feature pages to be used throughout the platform.

INSIGHTS
Since App downloads can get initiated from a multitude of locations, it is important for marketers to know how users land on the Windows App Store. The incentive for companies to spend marketing dollars is knowing what referrers to spend those dollars on.

PRODUCT CONCEPT 1
Break down the conversions into much more granular information. This includes URL path tracking, Store listing pages, Store spot light page, Social references, and group similar referrers by the top locations.

PRODUCT CONCEPT 2
Windows applications run in a sandbox environment. My proposal is to enhance the platform to track click-thru’s to understand a real user product journey. This would give valuable insights to how users use the product and what forks they go down.

My proposals would give a complete e2e user journey so developers can make validated data product decisions.

RATINGS AND REVIEWS
Ratings and reviews went through a series of updates due to Windows OS updates. This page was the initial tracking page showing the reviews by different OS.

RE-SKINNING HIGH CHARTS
I created the style-guide for the initial charts which includes  line, bar, and pie charts to be used throughout the analytics pages based on the Windows brand colors. Also made sure the colors pass accessibility at the maximum threshold without compromising too much color.




WINDOWS SLIDESHOW


SOLUTION – A TIMELESS UI DESIGN
Sharing memories and photos was essential to the Windows suite of products.  This was the first responsive app (client/web/mobile) before responsive became a buzzword. My solution was a film-strip that also sampled a bit of ambient color from the image which was used in the iterator control.

CHALLENGE – The first slideshows were not intuitive and not a consistent UI experience across Microsoft properties. I was tasked to redesign the photo slideshow and create a consistent UI experience across multiple form factors and collaborate with different Orgs (teams).

THE SCOPE – The slideshow product adoption spanned across the Windows file client, Messenger (client), Live.com, 3rd party API (Facebook), and the Windows iPhone Messenger app. Also, the iPhone app was one of the first (tented) Apple apps developed by Microsoft that I spearheaded.

SHOWCASED – The product was showcased at the annual Microsoft company meeting.

PRESS – Publicity after the launch.

BING SEARCH ADOPTION – Soon after the slideshow launched, the Bing team also adopted this UI model.