Responsible for contributing to the FY21 platform strategy.
Mgr. Quote: Becky S “Geoff was the sole designer on a product that helped us manage our Vendor relationships. He was asked to deliver several features but also took ownership of user research and suggested additional user delight features. He was responsible for every aspect of the design and prototyping for testing and presented his work to leaders in design and products.”
Visionary Dashboards – Imagine AI/ML predictive analysis dashboards analyzing vendor relations for new customer potentials and opportunities to increase business efficiency. Experience improvements that keep the mothership fly-wheel offering increased transparency for customer (internal/external) relationships.
Customer interviews Responsible for conducting 1:1 interviews with vendor managers to validate the experience hypothesis. Customer feedback directly affected the product roadmap, and some features in the PRFAQ were challenged by customer feedback.
Customer Quotes from UX findings: Nine feature areas received positive feedback from customer interviews. • “Frequently amount of codes are created by a different team, and I had no idea.” • “Proactive suggestions would be great.” • “The chart would save me time than going to Excel.”
Customer Journeys – e2e Workflow Prototypes The trend line represents suggested business decisions and missed opportunities. The speed and pace are unlike any other product machine. I was shipping new feature improvements on a consistent cadence.
Customer Relations At scale, the knobs that control the underlying business algorithms that directly affect vendor-customer relations through multiple channels. Using AI/ML alerts to Vendors increases efficiency potential and new opportunities to increase sales.
Vision OP1: Retail Media (CO-OP Incentives) Design Presentation and contributed to OP1’s future innovation features. I was improving FCF from additional funding captured by lowering the number of tickets to decrease funding leakages. I presented a deck to leadership and a UX/UI spec outlining the proposed features.
Systems UI Kit (NEW) – Amazon was on a mission to transform internal platforms to reduce costs and increase efficiency digitally. I was on point to level up the platform and pressure-test the system library patterns/components designed to scale for the enterprise platforms.
Discovery – Beta Site UX Challenge: Hypothesis building from customer touch points, data, and interviews. The experience goal is to simplify the overly complex to decrease missed opportunities and increase future monetization opportunities.
The Beginning: The Plan (PRFAQ) Product Planning (The Amazon Way) – My journey starts with an Amazon PRFAQ, a descriptive doc describing the “What and Why” the business needs to invest in new feature improvements.
Digital Feedback – (Web Apps, Kiosks, QR codes, APIs) Apptentive’s Mobile Web (WebSDK) lacked critical features compared to the Mobile SDKs (Apple/Android) that made mobile feedback successful. I took the role of product producer to have feature product parity and extend the product offerings to more form factors beyond Mobile.
Mobile WEB SDK – Demo Examples A dev can install the Web SDK in under 5 mins. I worked with a dev 1:1 and modified the JavaScript source code to trigger the love dialog feedback from a QR code. The new monetary opportunity to use dynamic QR codes based on Fan Signals data could be a game changer.
Customer Love Summit The Customer Love Summit is a yearly conference showcasing Apptentive’s new products. I improved the event by showcasing further product feedback interaction features in real-time, all powered by attendee participation. The vision was that 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.
Demo Table I was responsible for the customer summit demo table, spearheading a variety of feedback devices, including my hackathon hardware project using a Raspberry Pie OS., iPad (Kiosks) Table Tents (QRcode), and an Amazon LTE Device.
The Results – Customer interactions, participation, and enthusiasm were high. Everyone involved loved the feedback mechanism, from customers to the CEO. Prospect customers (attendees) were sending feedback in real time. Participants and Investors gave the Demo Table high marks from the real-time data displayed from a Gecko Board Dashboard showcasing the public API.
Customer Love Summit I coded up the QRcode “Did you love lunch? Each lunch table at the event had a table tent QRcode. Using the platform’s Web SDK, I could customize the different feedback types once a participant triggers the love dialog from the QR code.
How does a hypothesis become a product? I participated in a company Hackathon. Using the new WEB SDK, I proposed an IoT device using hardware buttons (GPIO ports) connected to a Raspberry Pie OS. I conceptualized, designed, and built a responsive web app to complete the project. I called it a progressive survey using skip logic. A customer can iterate through various modal windows that capture the binary Yes/True, No/False feedback questions from the video game hardware buttons.
Customer Feedback After successfully shipping the WebSDK e2e experience, I transitioned to customer interviews to get honest customer opinions to validate the business value.
The Results — 6 months after launching the WebSDK, sales were able to close new revenue deals since the business could support Mobile, Web Apps, and other form factors completing the product suite across all form factors.
NEW PRODUCT CHANNEL – (Mobile Web, Kiosks, API) The business vision was to capture customer feedback from any form factor at scale. I was on point to design the first Web App SDK to influence the SaaS platform’s capabilities using the new APIs. As a product producer, I worked with the Devs 1:1 in the trenches to create product parity with the mobile SDKs. Then, I modernized the feedback interactions, updated the UI kit, and allowed customers to customize their interactions using CSS.
The UX Challenge: The original “Contact Us” feedback button looked amateur; it had a picture of the office and one contact form field and did not dog food their product. I proposed to the team to invest in the WebSDK to have feature parity with the MobileSDK.
The Beginning… When I joined the company, the original customer feedback system was hard-coded into Apptentive’s platform; no WebApp SDK was available. Until then, the business was focused on Mobile SDKs for Apple/Android.
Results – Sold for 16x Designing a new platform from the ground up in 1.5 years 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.
Public Launch (GTM): 4/2017 As the lead designer (manager) I was responsible for the entire experience, I owned key platform features and once the UI Models (MVP) were in place I interviewed and hired 3 UX designers to hand off new features to quickly scale the platform. Then I turned my attention to updating the Dashboard, Delivery center, Entity management, Activity feed, Subscription billing, and 3rd party OEM task workflows.
Beta Launch: 10/2016 Among the improvements adopting the new UI-Kit were the Dashboard, Service Center, Activity feed, Subscription billing, Delivery Center, and Cost Reporting, and around 20 new IT service solutions were implemented.
Systems Library – Integration Once a new UI kit was implemented the platform began to come to life. The new kit helped speed up design/development time since UI systems patterns and common controls were consistent across the platform. We made additional layout changes to simplify the experience by introducing detailed fly-out panels and inline accordions.
Systems Library – Redesign One challenge was designed in an old UI kit. I knew I had to modernize the platform to help BitTitan served as a trusting SaaS application. I made it a company commitment to drive a modern UI Kit–the existing grey navigation and the overall site felt like a typical Seattle day to me. I always knew the future of the site would need to be something much more modern.
Preview Launch: 7/2016 Once the platform MVP framework was in place, it was time to start integrating new feature services and onboarding new customers to the platform. The first step is to go external and start dog fooding the product to get real customer feedback. This was an exciting time for the company to be on a fast-paced high-performance phased agile development team. The culture/collaboration fostered solutions for the greater company interests. BitTitans’ motto was: “Get Shit Done!”
New Feature Development: 7/2016 Once the platform MVP framework was in place, it was time to start integrating new business service workflows into the platform. One challenge was designed in an old UI kit. I knew I had to modernize the platform to help BitTitan serve as a trusting SaaS application. I started visually exploring new designs and hired a few rock-star UX designers, while we also turned our attention to designing new features such as Dashboard, Service center, Device management, OEM services, and Activity center. The product machine was in high-performance mode using remote development shipping features in 2-3-week sprints.
Alpha Platform (Customer Onboarding): 1/2016 After multiple requirement meetings, presentations, and wireframes, I designed the base platform UI model with minimal feature requirements to meet an MVP; at the same time, I was supporting a host of new services being developed on the old platform. The system had to scale for new services while App Switching (drop-menu) into MigrationWiz, Sales Automation, Deployment Pro, Data Encryption, SSO/Registration, User Management, App launcher, Purchasing, and innovating new Cloud Services.
The Big Picture (Discovery): 10/2015 Managed Services was a new concept for the company. A lot of research went into understanding the new business direction. BitTitan’s flagship product MigrationWiz (MW) had six-plus years of technology behind it, including multiple types of Migration services, Shopping Cart, Licensing, Support, SSO/rBac, and Account Management. It would be too risky for the company to build on the current MW platform to avoid service disruptions. The decision was made to create a new platform. The wireframe below shows the initial breakdown of how the two platforms could co-exist as features get migrated or re-architected.
The Business Pivot The CEO made a business decision to leverage MigrationWiz (cash cow + partner base) and pivot the company to Managed Service Provider (MSP). This was perfect for enterprise customers needing a way to migrate to the cloud. The vision was to build a marketplace with no loyalty to any cloud environment AWS, Azure, Google, and On-Premise, which can be cross-platform migrated thus reducing service fees for large enterprise customers. 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.
MigrationWiz: UX/UI Refactor My solution is to redesign the task management workflow to be a vertical list on the left nav rail to track completed steps. The results were super successful by reducing the number of support tickets and increasing customer confidence to complete a migration. The introduction of the left nav for task management provided the baseline for future workflows for MSP Complete.
The Platform – Discovery The original MigrationWiz functionality was a wizard-type UI model. The amount of customer confusion and support tickets was a real pain point for customer support. The platform served well (originally) as an email migration service. The UI model was never expected to scale beyond 4 keys services. The UX started to break down when new features were starting to get bolted on. I was the Team of One (UX designer), employee #36 responsible for re-architecting and modernizing the migration workflow experiences.
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 dashboard and key app workflow publishing pages.
APP ONBOARDING PAGES I leveled up the App onboarding workflow pages throughout the platform through multiple product release cycles.
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, which 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, driving customers to write public feedback through 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 a win/win for both parties.
Taking Initiative While working on the App developer publishing platform, I was curious to publish my Windows App and better understand the customer pain points. I contacted a developer, and we agreed to build “Oscar’s Adventure,” a children’s learning app for ages 3-6. We successfully designed, created, 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.
MICROSOFTS DIGITAL TRANSFORMATION
WINDOWS – Metro Design Language When I was on the Windows Experience Design Research Team (XDR), the design team was on a mission to re-image 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, and I was able to leverage the UI Kit library elements for the Windows Developer Platform.
The Vision Through consolidation, MS has the opportunity to build an App Store marketplace by supporting various 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 is leading the industry with great design, and the Windows organization was pressured to capture back the cool kids to stay relevant. The chatter is if Apple allowed their OS system to be installed on any PC hardware (hypothetically), how detrimental could this be to Microsoft Windows OS cash machine?
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.
App Analytics – Dev Portal App Analytics is essential for any software application by showing insightful metrics for the business and customers. Windows Store apps can be downloaded from a variety of sources with a global market reach. The Windows software team wanted the App data to be transparent, so marketers knew how successful their application is performing.
RATINGS AND REVIEWS Ratings and reviews allow customers to share their opinions through the Windows App Store, and give the App an overall star rating. Shoppers rely on this content to make informed purchase decisions.
Windows Store App Analytics I was responsible for designing various key App analytics pages to be used throughout the platform, including Downloads, Usage, Purchases, Conversions, In-app Purchases, Financials, and App Quality. The data needed to show analysis/insights on a much more granular level, including source path tracking, store listing pages, Store spotlight pages, and Social references while aggregating the data from top locals.
Metro UI Kit – Loading Spinner My contribution to the Windows 8 Metro UI kit was the loading spinner. The original 8-24-bit (.gif) loading spinner animation was dated. There was a time when loading spinners didn’t even have a transparent background that was rampant across the Windows ecosystems. I partnered with a dev 1:1 to align with Windows 8 (OS) operating system. I could say millions of people at one time have seen the Windows 8 loading spinner for the web.
MICROSOFTS DIGITAL TRANSFORMATION
WINDOWS – METRO DESIGN LANGUAGE When I was on the Windows Experience Design Research Team (XDR) part of the team’s mission was to reimage every customer touchpoint digitally for the Windows OS and Web Apps to modernize those experiences. The entire Windows Design Org. was responsible for introducing the Windows 8 Design Principles and Metro Design Language as the foundational building blocks to modernize the Windows ecosystem.
App Analytics – The Beginning I transitioned to the App Analytics team after designing and shipping the App Developer Platform. I created the initial style guide for all types of histogram charts including Line, Area, Bar, and Pie charts to be used across the platform. I had to tweak the Windows brand colors to pass accessibility standards at the maximum threshold without compromising too much color.
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. Another challenge was redesigning a prebuilt .js chart library system (high-charts). At a high level, I needed to reskin the default library into something that fits the Windows Metro Design Language.
WINDOWS (XDR) RESEARCH CASE STUDY
Windows Apps API Documentation To personally tailor our documentation to the developers’ needs and requirements, thus improving app quality. Let developers set their preferences so the developer documentation can deliver an experience that meets their individual needs, regardless of whether they are first-time visitors or have been developing on Windows for 10+ years.
Re-architecting the navigation would increase productivity and reduce developer frustrations. Developers will have more time to focus on important tasks such as writing code, instead of spending extra time scouring search engines, hubs, blogs, and MSDN looking for software APIs.
Navigation starts with the Superset/Subset filter controls. A drop-down menu is used for the Platform, and the other is for the Presentation model. The initial version will include the Windows 8 App platform using the following presentation models JavaScript, HTML5, XAML, and DirectX.
Conceptual Overview My proposal is a complete redesign of the navigation and functionality based on filter controls (drop menu) + Subset controls + Hide/show disclosure triangles. The outcome is a complete overhaul to a dated tree model structure and the use of modern web controls. In a world of object-oriented programming, the tree navigation model (Parent/Child nesting) is unintuitive for development, especially when the associated (siblings) APIs drop out of context.
In the proposed new navigation tool, the APIs seamlessly bucket together and vertically grouped. A dev can expand and scroll through every level of the TOC without navigating up or back down – all while using fewer clicks and keeping corollary APIs visible and clickable. I built POC prototypes to present concepts to internal developers to validate the model UI model.
Concepts & Prototypes Supersets/Subsets: When a filter is selected, the navigation control loads associated namespaces (the primary subset). Then when a namespace is selected, the APIs within that (the secondary subset) are displayed, so that the secondary subset is based on the Primary selection:
Comparison with existing tree UI navigation model: The following diagram shows the current model and the new model side by side. In the current “tree” model, you have to expand parent nodes if you want to see neighboring (aka “corollary”) APIs. The expander must be clicked every time you load a new page. Many developers are unaware that the expander exists; without it, you must navigate up a level (reloading the page) every time you want to see APIs alongside the one you landed on.
Top Customer Pain Points The current reference section TOC frustrates developers and hinders the development process. As hundreds of APIs continue to come on board, the TOC will grow and the current tree UI model will continue to be cumbersome for developers trying to find specific APIs.
P1 – I need the Dev Center to retain basics about my dev environment P1 – Show me related classes, properties, and members without losing context P1 – Context is lost if levels are hidden and neighbors as reference P1 – I want to sort/filter APIs by language P2 – Currently fixed page width is restrictive due to lengthy documentation
Developer Feedback Research 1. I wish the Dev Center could retain basics about my dev environment and when I search for content the site should reflect the primary language I use.
2. Need the ability to filter on platform development – I want to see related classes, properties, and members without losing context. The TOC control takes a lot of time to load and find related APIs.
3. Search results are not what’s expected – Searching for an application programming interface (API) often doesn’t land within the top search results. There is a lack of trust due to cross-site navigation doesn’t behave as expected.
Field Research I was lucky enough to have a dedicated researcher assigned to understand the developer’s pain points. To begin, I outlined two likely scenarios in the ongoing hunt for the right API.
Developer 1 needs to identify and learn the right JavaScript API to use to accomplish a specific development task. He starts by investigating which API is right for his needs.
He’ll first search using keywords in Google until he finds an API that bears a strong resemblance to what he needs. He’ll then forage by browsing reference pages (and all related “See Also” pages) for sibling APIs, to build a mental map of the API surface. Ultimately, Dev 1 wants to be confident that he’s using the optimal, best-matched API for the task. For example, in implementing a flyout menu, Dev 1 reviewed related APIs to check whether the best solution may be a subclass of the API he was looking at.
Then, he’ll learn the API and follow the link from the API page to the applicable code samples, download them, and play with the samples to learn the API space – and confirm he’s indeed found the right API. About 80% of the time, he’ll find what needs to identify the right API and know how to use it, through this strategy.
Developer 2 starts by finding the right class/API. When he isn’t sure what JavaScript API or class to use, he’ll start by typing stuff into Visual Studio to see whether IntelliSense helps him find it. But often it just gives a list of every object available – this doesn’t help him.
If he can’t find the right API or class using IntelliSense, he’ll next search his browser bookmarks (via autocomplete), and then search MSDN via Google. He’ll pick the class or function that looks highest-level or most relevant, and browse through the QuickStart, Code Samples, and Guides to understand the API.
If it’s still not clear how the API works, Dev 2 looks harder for code samples. He’ll start with a Samples Gallery search, and if that doesn’t work, he’ll search through a downloaded .zip file of our code samples. If Dev 2 still isn’t sure how to use the API to implement his feature, he’ll try searching Google and/or Stack Overflow more broadly. If he still can’t figure it out, he’ll just abandon implementing the feature. Dev 2 has also abandoned features that are less important to him that would have added polish to his app – such as a neat visual effect or transition – when it’s not clear from the online docs what he needs to know to implement them.
Improve Search – MVP This section walks through a typical usage scenario for a developer arriving from a search landing (parachuting in) on a deep API reference page, and adding checkboxes to the navigation control to quickly and easily navigate to a different presentation API.
Overview & Scope Windows store APIs are the backbone of any app and for Windows apps to be successful developers must be able to quickly and easily find relevant APIs, thus improving the app quality and speeding up development time.
Conclusion: Devs are confused by the MS namespaces and finding the correct platform APIs. From developer feedback the AppBar API control uses similar namespaces for two different platforms; devs are frustrated by not being able to quickly pivot to their type of platform from so many languages (VB, XAML, HTML, JS, C, Win32 + DirectX, etc.) when searching. Problem Statement Developers have a hard time finding relevant code examples quickly, the dev content resources are spread over multiple sites which is virtually impossible to find. App quality suffers due to a lack of needed documentation.
