All posts by symphonyux_jfcorb

APPTENTIVE

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 CONCEPT – Customer 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.

Example Use Cases: 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. Some closed new customers.

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

APPTENTIVE

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 — DESIGN/DEV POV
I worked closely with a system architect to visualize how the data would closely mirror how the UX/UI would interpret the customer journey.

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.

BITTITAN

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 + partner 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 cloud 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. DISCOVERY: 10/2015 – BIG PICTURE WIREFRAME
After multiple discovery meetings, presentations, and feature requests, I designed the base platform UX/UI model 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 until the legacy platform was phased out. The Vision was to support 100’s 3rd party SaaS (API-First) services/partners/webhooks integrated into a managed service platform.

2. ALPHA PLATFORM: 3/2016 – SSO/rBac
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. This was the first proof of concept platform shipped with minimal features and to start collecting customer requests/feedback.

3. INTEGRATED FEATURES: 7/2016
Once the platform MVP framework was in place, it was time to start integrating services and onboarding new customer to the platform. The first step to getting external customer feedback.

4. NEW FEATURE — 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. collaborate in a shared vision to digitally transform the platform into something much more contemporary.

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

5. 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.

MICROSOFT

WINDOWS APP STORE DEV PORTAL

Windows Store App Publishing Platform
Lead UX designer for the first public release of the Windows 8 App Store publishing platform. Responsible for re-architecting the App onboarding process and key app workflow publishing pages.

 

APP ONBOARDING PAGES
Through multiple product release cycles, I successfully leveled up the App onboarding workflow pages throughout the platform.

 

The Solution — From the App Store portal a developer could communicate with the customer by allowing a customer to send a private message to the customer would reduce the poor reviews and increase app quality from customer feedback.

 

The Insights
From my own experience publishing Oscar’s Adventure as an early prototype app, I received a few negative comments and would have liked to be able to respond to customer feedback.

· Reduce the amount of negative app feedback shown in the app store.
· Reduce the perception of poor Windows App Store becoming a bug triage location.

The concept
Ratings and reviews allow the customer the ability to communicate directly with the developer and get real-time customer feedback.

 

Problem Statement — The Windows App shell/SDK (tech stack) was still in early development causing Apps to crash which wasn’t necessarily the developer’s fault. App crashes were hard to test in the production world which started to cause customers to write public feedback through the ratings and reviews.

 

BUSINESS PARTNERSHIP
Due to the number 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.

 

TAKING INITIATIVE
While working on the App developer publishing platform, I was curious to publish my own Windows App and better understand the customer pain points. I reached out to a developer and we agreed to build “Oscar’s Adventure,” a children’s learning app for ages 3-6 years old. We successfully designed, built, and published the app in less than a month. Going through the process helped me to understand the customer journey to help influence product decisions since I was a customer too.

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

 

METRO DESIGN LANGUAGE
When I was on the Windows Experience Design Research Team (XDR) the design team was on a mission to reimage every customer touchpoint digitally for the Windows OS and Web Apps. Part of the team’s responsibility was to introduce the Windows 8 Design Principles and Metro Design Language as the foundational building blocks to modernize the system patterns which I was able to leverage the UI Kit library elements for the Windows Developer Platform.

   

The Beginning – Design Challenge
When I joined the Windows Store Dev Portal I was presented with a PowerPoint concept deck from a product manager from the India Development Center (IDC) showing the dashboard. I spent the next few years art directing and influencing product decisions while working remotely.

   

The Vision
Through consolidation, MS has the opportunity to greatly increase the One Store marketplace by supporting a variety of technology platforms. A newly re-imaged App dev center could onboard Windows XAML Apps, Xbox, Win32, Web Apps, and Android through a unified ingestion pipeline.

The Insights
Apple was leading by great design and the Windows organization was feeling the pressure to capture back the cool kids.

MICROSOFT

WINDOWS PHOTO VIEWER

SOLUTION – A TIMELESS UI DESIGN
Sharing memories and photos was essential to the Windows 8 suite of products.  This was the first responsive app that spanned across the OS client, Web Apps, and Mobile before responsive became a buzzword. My solution was a film-strip using the glass UI framework which sampled a bit of the image for the ambient background color.

THE OPPORTUNITY – I was tasked to redesign the Windows 7/8 photo viewer (seen below) and create a consistent UI experience across multiple product form factors. The client UI controls didn’t make it clear to users how the UI controls functioned. If a user clicks the photo icon it would start an image slideshow.


THE SCOPE – To design a consistent photo viewing experience across the Windows file client, Messenger (client), Live.com, 3rd party API (Facebook), and the iPhone Messenger app. 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.


BING SEARCH ADOPTION – Soon after the slideshow launched, the Bing team adopted this UI model using limited feature set.


PRESS – Publicity after the launch.