Matthew Cunningham

Designing elegant solutions to complex problems

Integrated analytics and user research into a rapid cross-funtional development process
Planned and executed a new design utilizing Personas, Flows, and Wireframe Prototoypes
Led research, ideation and processes to define design strategy and illustrate a vision
Using lots of special tools and techniques

I'm all about designing software users love.

No matter how we do it, I always start by aligning on outcomes and planning my role.

My strengths and interests span user studies, design strategy, experience mapping, UI design, and leading teams.

I've worked in small startups and Fortune 100 companies. My title could be Head of Design, Product Design Manager, or UX Leader, but my role is always similar: I lead teams to ensure delivery of awesome experiences that exceed business goals.

A personal note
I've been lucky enough to travel the world and live in many beautiful places, but I'll always be Texan at heart.
In Austin I first discovered code and hacked on it for a while. In Houston, I got into the web, HTML and Visual Basic, and started making web apps for fun. I always loved inventing cool new things, and cared a lot about how intuitive and useful they were. This led me to Washington DC, where I began my UX career at a CRM agency.
Later, I worked for years in Silicon Valley and learned a lot about making products. I love to learn, build things, and play with other smarty pants people. I take my responsibility to users seriously, but I find a bit of silly fun helps keep everyone happy, healthy, creative, and inspired.
Case Study 1
QuickBooks Integration Strategy
Task 1: Align all designs for connecting an account
This case study will cover a year of related projects, several initiatives in service of a single mission: to elevate QuickBooks from “an app with features” to a platform that simplifies and automates work for small business owners, so they can focus on their passions and thrive.

My first initiative was to partner with a Product Manager and another Interaction Designer to analyze and converge all the different experiences in the product for connecting QuickBooks with different partners and 3rd-party developers. We reached out to all the designers who had worked on live experiences and performed an inventory of the various requirements and design approaches.
Business logic to accomodate all scenarios
Once we reviewed all of the different variations, I crafted a flow that would work for all types of connections, and reviewed and iterated on it with my team: another designer and a product manager.

I presented this flowchart to managers and design leaders and iterated again to incorporate their feedback.
Brainstorming the connected moment
For the final moment, when the user has successfully connected one account to another and data is flowing, we wanted to give them something special, both to encourage future connections, and to make sure they understood instantly what had happened, so they were prepared to move on into their first time use.

I organized and led a brainstorming session with over a dozen Product Managers, Designers, and Engineers that resulted in a bunch of interesting conversations and inspiring ideas. I cataloged the options we uncovered and outlined which could be combined, and ultimately I believe we got the best of all worlds.
A better first step to reduce fear
By testing our prototypes with customers, we learned why so many abandoned at the authorization page. They didn’t want to risk screwing up their finances for something that might not “work how they want.”

Our leaders were urging us to reduce the number of steps and clicks, and we did, but I had insights that led me to design and advocate for adding a step as well. One that could tell the user how this would work, in context of how they would benefit from it shortly. I got it approved and customers in the lab loved it. When launched, the authorization step conversion went from single-digits to up near 50%.
Adding animations to the final visual design
Since we had already discovered the authorization step was a bit intimidating, I got permission to hire a contact motion graphics animator, found and recruited one, and directed him as we turned an illustration I pieced together from other assets into a friendly, three-phase animation to further illustrate to users what was happening behind the scenes, and help them feel safe sharing their data and credentials.

Utilizing much of the existing design system and patterns, I was able to quickly pull together an Axure prototype with final design, complete with early animations that we could test in the lab with customers. You can view the prototoype here
Task 2: A framework for how all data integrations work
The next challenge was to create a framework and design strategy to manage how all integrations would be utilized and managed within the broader product experience. We had lots of ideas and wanted to converge on a general direction. We devised, planned, and executed an extended design jam with a dozen designers, managers and design leaders.

We divided everyone into three groups, gave them each a unique concept for how things might work, and had them each think through the same set of example users, situations, and data types, and evaluate whether their group’s framework would work for users.

Through discussions, the three groups aligned on some core principles for how data should come into QuickBooks, and how we could design the system for it.
Sharing the story, strategy, and requirements
Even though we had done the research, collaborated on the strategic directions, and understood the opportunity space, our work was not done. The entire department had to be caught up on our progress so they could provide their perspective and input.

I created several slide decks and process illustrations with dozens of custom charts and illustrations I crafted. I presented to leaders a vision of how our platform could work and the impact it could have on our business.
Task 3: Illustrate the ideal end-to-end experience
Once we had the general framework for how all kinds of integrations should work, we were ready to tell the story of a representative end-to-end experience, from the moment a user discovers the option to connect an account - to their very last use.

I provided two views. One: a six-slide comic-strip style transcript/chat between user and software (and accountant), and the other: a single slide that highlights the phases of the lifecycle and briefly describes the key value and design strategy for making each step a nice and easy transition to the next.

This enabled leaders to better plan, staff, and negotiate the various opportunities for our engagements with strategic partners like Google, PayPal, Amex, TSheets, etc.
Task 4: Apply strategy to a redesign of the key experiences
It was time to use our integration strategy (and other strategies evolving across the product) for a specific redesign, the most important data integration in QuickBooks: Connecting Banks and other Financial Institutions.

The existing bank connection experience as it existed was underperforming, and needed a change. I joined the QuickBooks Core design team, and along with two new designers, a new Product Manager, and a new Content Writer, was tasked with redesigning the Accounting and Banking experiences. I led brainstorms and whiteboarding sessions that led to us quickly illustrating UI concepts and workflows for desktop or mobile, before taking them to the computer.
Illustrating workflows with UI concept illustrations
I took my whiteboard sketches and turned them into UI concepts and prototypes that allowed stakeholders to visualize the new experience we were planning.

This was a Design-led project, and I was the leader of a highly dynamic process that included daily collaborative sessions with many talented writers and designer.

The engineering team was working on a huge, long-term enhancement to enable new experiences, and these designs were used to inform the requirements. This ensured the new data platform would power many years of great user experiences to come.
Task 5: Unlock Google partnership with a clear vision
There’s a much longer story to be told here, but ultimately my final integration project was leading an initiative with my PM to establish a strategy and vision for how Google and QuickBooks should work together. Through surveys and plenty of customer inerviews, we uncovered opportunities to give both QuickBooks and Google customers a new suite of features to help their business thrive (and help ensure long-term user retention for both platforms).

I presented both near and long-term concept prototypes to the GM of QuickBooks and Google VP Diane Greene, which unlocked several initiatives that were then staffed (and are still executing this vision).
Case Study 2
Full UX Design Process
The challenge
Within the next month or two, redesign a long-standing successful marketing website that had gone through many iterations to enhance and refine - and launch the new design without hurting the conversion rate.

The company had adjusted its business strategy, and wanted to speak more to C-suite level professionals.

Our Director of Marketing was ultimately responsible for this website and had to love the new design, and it also had to do better against the current site in usability tests. Then, it would go live as a full-site A/B test against the standing site.
Discovery and Synthesis of User Types
I did some secondary research, going through old documents and had several conversations with the Director of Marketing.

I organized what I learned into these cards that showed we were focusing on 2 primary user types, and 3 secondary types. I included 3 key insights for each:

their typical current situation, mindset regarding our company and product, and value propoisition that would be most compelling to them.

I went over these with the Director of Marketing and refined based on his feedback.
Aligning more teams and stakeholders
I designed these cards to communicate the strategy with stakeholders throughout the company. There were a few executives, and several team leads who were key stakeholders for the project, and I needed something they could quickly review and react to.

They were able to quickly confirm that these were a good reflection of the customers and prospects that they spoke to regularly, with only a few minor adjustments here and there.

Now, the teams were aligned, and I had validated our precise goals: to ensure these five were able to learn what they needed to know, and find their way to the appropriate value propisition for them.
Analysis of the current site analytics
I had access to Google Analytics, which had a wealth of data on how the current site was performing. No one had yet dedicated much time to understanding recent behavior on the site, so I dove in.

I looked at several things, but the significant numbers I found were around which pages were correlated with a higher or lower conversion rate.

It was clear that the pages with a cleaner, simple, more modern designs, fewer walls of text, more credibility indicators, and a focus on results (vs. features) were all correlated to higher conversion.
Extending personas into content strategy
I took the quotes reflecting the mindset of each mini-persona and outlined the “conversation” from there, outlining the back and forth interaction to capture an ideal, realistic experience for each user type.

For each thing they learned, they were likely to have follow up questions or concerns, and we neede dot ensure those would flow nicely into one another. For each key message the site would need to communicate, I noted a page or section title where this content would most likely be expected or discovered.

I presented these to the core teams throughout the company and they helped me refine them tomake them as realistic and efficient as possible.
Preliminary Site Map
I took all the likely page types for each piece of content required to enable the scenarios that we had all aligned on, and put them in a rough site map.

As the scenarios helped us visualize the flow of engagement through the site, we looked at other competitors and comparitors, and drafted an architecture and navigation system.
Blocking out pages with low-fi wireframes
I took related content pieces and dropped them into a simple page, organizing their importance (primary or secondary user type) through size, and placing them so everything would flow together nicely.
Medium fidelity wireframes
I gradually built out the rest of the site, constantly reviewing and iterating with key stakeholders.

For some pages, I grabbed existing content from the current site. For others, I grabbed draft designs I had explored for previous projects.

All together, these rough page outlines were strung together and did a great job of giving the Director of Marketing a feel for how the site would work, and elicited lots of feedback, and uncovered expectations and requirements that hadn’t been articulated yet.
Iterate on site map
After everyone got a feel for where the site was headed with the medium fidelity wireframes, we had a lot of new ideas about content, labeling, and more.

I incorporated all feedback and new requirements into an updated site map and navigation system, and moved on to high-fidelity wireframes / draft visual design.
Medium-fidelity wireframes
I filled in example images and pulled copy from all over to flesh out the wireframes, and give a sense of how the final design should feel. I also wrote a first draft of all the content, to give our marketing writers a sense of the length and message needed for each block of text.

I turned the entire thing into a click-prototype to test.
Validation and refinement, high-fidelity wireframes
I created a user testing plan, wrote the test scripts for remote unmoderated tests, and ran several rounds of testing, iterating on the prototype between each round.

The tests revealed a few remaining issues with the architecture and navigation labels, as well as some insights about how to make content more clear and compelling. By the final study, all the issues had been resolved, and things were looking great.
Final Design & Execution
I had recruited and hired our Visual Designer (whom I also managed) to apply our new style guide, and asked him to do a final round of visual design polish on the entire site, and work with the engineers to finalize design and start building.

From them on I acted more as Creative Director on the website project. I had also established and led regular Design Review session which supported designers around the company in their final design and execution.
The Director of Marketing and his boss (COO) loved the new design, and all stakeholders were happy to have been involved. The Director of Marketing took the design and did his own due diligence by running a Competative Usability Test against the old site. The new site was unanimously preferrred by the participants.

An A/B test was launched, and suffice to say the old site was replaced entirely shortly thereafter. The new IA, navigation and design were used for the next five years.
Case Study 3
Agile UX Research & Development
The challenge
Within the next 3 months, we needed to invent, design, and launch a fresh round of tools for the AddThis publisher user base. I was put on a three-person R&D team of with an amazing Visual Designer / Creative Director, a full stack Senior Engineer, and myself doing Research and Design Strategy.

First, we wanted to get a sense of what options were already out there, and how well they were doing. Which tools were on the most sites? Which were gaining traction rapidly? I used a severice called Built With to collect data about adoption. I pulled all the data points together into a single chart that showcased the entire landscape, and helped Directors establish an initial strategy and sharpen our focus on certain opportunities.
Using surveys to better understand our users
I had previously proposed and established a Beta User Group of about 200 passionate developers and publishers. I constructed a survey to get a sense of their priorities, goals, and interest in new plugins.

I also captured how they thought about website plugins in general, and how they evaluated whether or not their experience was successful by asking questions about the best and worst experiences they could recall.

I synthesized these results into handy slides that gave clear direction about where we could meet our users.
Building and iterating with guerilla usability testing
The three of us collaborated on an intial concept and designed the first prototype. While it was being built, I planned and recruited for our first usability test.

Our plugins had two audiences: those who we called users (site publishers and developers) who would put the plugins on their site, and then their users who would ultimately be interacting with those plugins.

Since the actual end-users varied widely, it really could be anyone, so we quickly pulled employees who were not involved in our teams or projects and scheduled sessions to try the prototype experience of our first new concept for a new suite of plugins.
Iterating on features, placement, and design
We learned quickly that some of ideas were too clever, and there were some standards of website behavior that we could utilize to improve discovery.

Through two more rounds of guerilla testing (with a new prototype, and new users each time). We learned more and more, and ultimately were able to get all key tasks completed with a very high completion rate, and low difficulty.

This gave us the confidence to move forward and craft the full design system and code to scale.
Launching and tracking usage
Now we had a functioning prototype for this new suite of plugins that worked for end users, but we still needed to try them out with our customers on real websites, to really put them to the test.

I reached out to several customers who had expressed interest in piloting new tools, and organized a Beta launch with a few of them to launch on their websites.

I then worked with our Tech Ops team to extract analytics from their home-grown, multi-headed key-value pair data storage systems. It was not easy. I then organized the live Beta usage stats into a spreadsheet to analyze.
Illustrating analytics to optimize design
In order to communicate the results of our Beta program, I illustrated the % rates in line with the design, so everyone could envision the users’ experiences, and speculate on reasons for drop off and conversion.

This led to further testing and iterations, and the confidence that we could finalize development and design and launch widely as the future of our platform. AddThis launched the suite as “Smart Layers,” which gained wide adoption and helped carry AddThis to an acquisition by Oracle for over $200 million.