Mattthew

Product design
consultant for
your full stack .

Product Strategy
UX Research
Interaction Design
Visual & Motion
Prototypes & Code
Personal Artwork
Siempo
Cardpool
CouchSurfing
Rotten Tomatoes
Font Finder
Tactile Synthesizr

Siempo Logo Siempo
Launcher


View it
Tools to fight compulsive use
of devices & apps

Cardpool
Giftcards


View it
eCommerce for native mobile & responsive web

CouchSurfing Logo Couch
Surfing


View it
AirBnb forerunner, worldwide sharing economy pioneer

Rotten Tomatoes Logo Rotten
Tomatoes


View it
Data-mining to hyper-personalize movie reviews

Font Finder Logo Font
Finder


View it
Award winning
tool for choosing type faces

Tactile Synthesizr Logo Tactile
Synthesizr


View it
Tool for synthesizing custom phone vibration patterns

Introduction

I joined Siempo in late 2017 just as it was making a major pivot away from creating a hardware phone and towards building software solutions for screen addiction. As Lead Product Designer, I was responsible for the full product stack. The Siempo Beta app for Android that I designed launched in April 2018.

Product Strategy

Usability personas

Because of the pivot, the future of the product was wide open when I joined. My first priority was to understand our potential users. I knew that Siempo could be useful to and needed to reach a wider range of users than just those who would describe themselves as “addicts”. After conducting several interviews with the founders and alpha testers, I identified three usability personas that each had very different needs from the product.

As the venn diagram shows, users have many reasons for reducing their phone usage, or simply for using their phones more mindfully. These range from a desire for a healthier lifestyle to a desire for focus and productivity to a desire for support during moments of temptation.

Key performance indicators

I also identified the top-level KPI for measuring the success of all of the products to be built: time spent in apps that users have flagged as problematic for them. This single metric would drive consensus within the team as well as provide powerful proof of Siempo's value to its users.

UX Research

Validating the usability personas

While the personas resonated intuitively with all of the founders, I knew it was necessary to validate them quantitatively, given their long-term implications for the product road-map and the business priorities.

To do so, I designed a quantitative survey which I launched to a representative sample of the US adult population. The survey asked respondents several multiple-choice questions about their phone habits and their feelings about their phone use that could be used to bucket them into one or more of the usability personas. At the end of the survey, I also described the personas, plus a fourth persona as a control, and asked them to self-identify as one of the four.

Results

The survey results strongly validated the personas as distinct and showed that all of the personas (except the control group) had some desire for Siempo's feature set. That information gave Siempo an accurate prediction of its serviceable available market size. Additionally, by dissecting the data I found a strong correlation between a respondent's self-reported persona and the frequency of their feelings of guilt about their phone use as shown in the chart.

Interaction Design

I designed an end-to-end prototype of the mobile app that I could place in people's hands for usability interviews. I conducted several interviews, giving each participant tasks to validate if our features were discoverable, accessible, and effective for all three usability personas. These interviews revealed many improvements that I was able to implement into the design before the start of engineering. Play the video for a 38 second overview of the beta app's feature set.

Siempo is the first app of its kind that helps curb unwanted phone habits from the moment of unlock. I researched other habit-breaking apps, addiction literature, and inverted the theories of behavior that are typically by product designers to keep users glued to their screens. I helped ideate features that eschew cold-turkey for gentle nudging while reducing the behavioral triggers that encourage unconscious app usage.

Visual & Motion

Siempo is a home app or launcher that replaces the default method of paging through third-party apps in order to launch them. Because Siempo's purpose is to help users reduce their screen time, my visual design of the app needed to walk a tightrope between appealing and distancing. My style for that app is spartan yet buoyant and generic yet accessible.

The alpha app was entirely shades of gray because research shows that removing colors helps reduce phone use. However, I introduced one accent color to indicate tappable and important screen elements.

Website Marketing

I designed Siempo's marketing website for emotional impact by visually representing the feelings of being overwhelmed & constricted that users reported before using Siempo. I then used an animated transition to the idyllic landscape to represent the feelings of freedom & health that Siempo offers.

Prototypes & Code

Prototyping doesn't always need to be digital! Siempo considered a feature to deter overuse of apps by blocking a small portion of the user's screen after a period of time. To test this idea, I could have created a software prototype, but I wanted to see test users respond in a real-world scenario such as browsing through one of their actual social-media accounts.

I crafted this physical prototype in just a few hours, and made it able to stretch to fit any device. With "Siempo Cardboard" I was able to swap in different sizes of screen blocking and to get user feedback faster and more accurately than with a digital mockup.

Of course, when appropriate, I have also created high-fidelity prototypes. You can tap on this example prototype of Siempo's feature that allows users to type a personal "intention" for themselves. Here, it was important to prototype the full visual experience including animations because the UX design of saving an intention needed to have emotional impact. I watched test users interact with the prototype and asked them if they felt that impact.

Despite being an MVP, Siempo Beta debuted in the Google Play Store to strongly positive reviews: “I have tried tons of ‘minimalist’ launchers, this is the only one that has lived up to it's claim.”

👉

venn diagram of Siempo's personas
chart of quantitative survey results
screenshot of website
screenshots of mobile app
photo of cardboard prototype
high-fidelity prototype of Siempo's intentions feature

Introduction

Cardpool is a dual-sided consumer market place where customers can sell unwanted plastic gift cards for cash and purchase pre-owned gift cards at a discount. As the sole UX designer, I created its first Cardpool mobile app, moving from sketchpad to app store in 7 months. The app earned a 4.5 star rating in the app store, was an Appy Awards finalist, and won PayBefore's "Best Mobile App" in the payments technology category.

I also designed the complete overhaul of the Cardpool.com website, making it responsive to mobile devices, and I designed the interface of Cardpool's kiosks, in-store stand-alone machines that allow customers to exchange plastic gift cards for cash vouchers.

Product Strategy

Opportunities for users on-the-go

My assignment was to increase sales and revenue by making Cardpool services available on mobile phones via native app and responsive web. I not only optimized and modernized the existing features for mobile-sized screens, I also created new features for mobile consumers that could deliver discounted gift cards, ready for immediate use, while they were waiting in the checkout line.

My first step to guide internal stakeholders was a thorough competitive analysis of the gift card space as well as an analysis of best practices from ecommerce apps. Cardpool’s top competitor had the advantage of being first to market with their mobile app. However, that gave me the advantage of being able to dissected their app for ideas and flaws, and to read through public reviews to avoid pitfalls.

Unique security needs

My research surfaced the fact that the competitor had a strong checkout flow but lacked the strong security features that users required. Gift cards are inherently insecure and prone to fraud (you can think of them as "branded cash"). Protecting users and the company required guiding buyers and sellers through several security hurdles including an SMS verified phone number. This led to researching the UX of banking and online wallet apps for approaches that made these hurdles more palatable, including a progress meter.

UX Research

Before engineering began, I personally devised and conducted a week-long set of 90 minute usability interviews with 10 live subjects. I repeated this process for the redesign of the website. I modeled the entire mobile app and website as fully interactive prototypes that contained real inventory data with branding and prices. While we used a testing firm to provide facilities and moderation, I developed the tasks for the testing subjects, observed the interviews on-site, and wrote the report of findings. I conducted interviews by day, and by night I iterated the prototypes based on the feedback I observed.

Taking the time to use high-fidelity prototypes and real inventory data proved to be worth the expense. I discovered crucial insights such as how to better handle out-of-stock brands and the need to improve readability & accessibility with higher color-contrast.

Interaction Design

Introducing the pricing slider

One of my most effective UX innovations was introducing a slider tool that allowed users to select a total purchase amount. The slider was a brave choice because it was not used by specific competitors, nor is it common in ecommerce. But thorough usability testing proved that it would be popular. While its lack of accuracy as compared to typing in an amount generated some friction, it was successful because it gamified price selection and loosened users' preconceptions about their desired price.

When I moved to the website redesign project, I knew that the needs of desktop users at home or work were different from mobile users on-the-go. I prototyped a website version using slider as well as several other UX methods for filtering gift card inventory. The website usability testing revealed that, unlike mobile users, desktop users preferred to manually scroll though a long list of options than to use filters. Operating the slider with a mouse and track-pad didn't feel as fun as using their fingers, and desktop users found the inaccuracy unacceptable. Physical keyboards made typing a price easier, and our users at home were psychologically less flexible on price than our users in-store.

Optimizing the checkout funnel

My review of our internal metrics for the original website revealed that although many customers accessed the website from mobile devices, those devices had poor conversion to sales during the checkout funnel. I found specific pain-points in the funnel, which allowed me to make the case to the stakeholders for the need to budget for overhauling and standardizing our form fields and form validation.

I devised and documented a detailed interaction model to handle form presentation that served to reduce the user error rate, boost user retries, and ultimately increase conversion to sales during checkout. Using the new "float label" standard employed by Material Design, these best-in-class form elements feature unique color states and animated transitions for hover, focus, valid, and error states. I also re-wrote micro-copy such as for errors to sound friendlier and provide more detail.

Visual & Motion

The launch of the mobile app and website coincided with a new visual design tailored to attract a wider audience. My design process began with the creation of marketing personas. These personas helped achieve consensus with stakeholders and allowed me to proceed with creating the visual style guide.

An internal marketing demographic survey revealed that 50% of the legacy user base was 45 and older, revealing the need to attracting younger consumers. I made recommendations for the use of lifestyle photography that exhibited a diverse set of models, use of currently fashionable website design elements, and moving away from the old-fashioned skeuomorphic design.

Because we used an off-shore engineering team, I also delivered pixel-perfect mockups and extensive UX documentation including the details of micro-interactions, transitions & animations, error states, and micro-copy. The complete style guide also included typography, color, and layout details.

Where budget allowed, I argued for the live site to incorporate transitions & animations to add to user delight. Even subtle animations such as 50 millisecond hover effects produce the unconscious sensation of polish and modernity. I also created more dramatic transitions, such as with the presentation of the gift card inventory list. The cards slide from off-screen to their resting position using a staggered animation effect, and in usability testing of this effect, users reported excitement and increased attention.

👉

how Cardpool appears within a mobile phone and a laptop computer
feature comparision table of Cardpool and its competitors
screenshot of security steps progress meter
UX app flow chart
screenshot of Cardpool mobile app slider
screenshot of Cardpool forms
examples of marketing personas
screenshot of Cardpool website inventory list page
screenshot of Cardpool app inventory list screen

Introduction

CouchSurfing.com was one of the pioneer “sharing economy” services. It preceded AirBnb, TaskRabbit, and Lyft, and it has sometimes been called "the free AirBnb" or "the platonic dating site". I helped create many of the tools for rating the trust between sharing-community members, and those tools were later duplicated and improved by those websites.

I joined CouchSurfing three years after its public launch in 2004 and was hired by its founder as the 2nd full-time employee. I helped select and hire almost every employee who followed me, growing the company by 45 more people, and building the product department from the ground up as its Head of Product Design. I co-designed the first CouchSurfing mobile app, and my product initiatives helped the company acquire $21 million in venture capital funding.

Product Strategy

In collaboration with my talented team members, I product managed and launched CouchSurfing's first iOS mobile app, optimized the purchase funnel to greatly increase revenue, created the product design and UX for the casual mobile meet-ups tool, created new strategies for our user matching algorithm, oversaw our first re-branding effort, and designed internal tools for user safety and customer support.

Creating a matching algorithm

CouchSurfing is a dual sided "marketplace", with times of unequal supply and demand in different parts of the world and in different seasons. I studied multiple solutions to improve our matching algorithm taking into account these market dynamics and user behavior. Unlike AirBnb, a host's location and amenities were not driving factors for matching. Also, unlike romantic dating sites which are optimized for worse matches due to the fact the successful matches lead to lower revenue, successful matches on CouchSurfing led to higher revenue. CouchSurfing was, and still is, a one-of-a-kind laboratory for quantifying human interaction.

Expanding the product suite

The "couch" was just one of the potential venues for face-to-face experiences between to members. CouchSuring.com initially launched with only this one venue, which was also its name-sake. It then expanded to organized formal events. I led the creation of our third venue: our casual mobile meet-ups product suite. This expansion allowed any number of members to spontaneously gather around any place of interest or any activity. It has yet to be duplicated successfully on any other website.

I helped optimize CouchSurfing for the greatest number of face-to-face meetings between members. By expanding the venues for such meetings beyond the "couch" and from 2-people to groups, I increased active users, user retention, and the network effect that those create in turn.

UX Research

One of the many initiatives I led over the years was the overhaul of the search results list that members used to search for other members to meet. This page represented the start of the funnel that led to a face-to-face interaction. In order to improve this page, I conducted several individual user interviews, analyzed the page's heat-map for thousands of users, and conducted quantitative research.

Discovering the right KPI

I conducted quantitative research continuously to optimize product funnels and measure the success of each iteration. By wading through vast amounts of data, I discovered that the greatest driver of active users and therefore the most vital KPI for generating network-effect was when a member met another member face-to-face for the first time.

That first face-to-face interaction predicted a valuable member who would go on to propagate many further face-to-face interactions with other members via hosting or staying with them. With this knowledge, I was able to evaluate the success of every product iteration by its impact on that single KPI or by a faster proxy for that KPI.

Dissecting user behavior

Through interviews and heat-map analysis, I uncovered the criteria that traveling members used to narrow down the search results before clicking through to view an individual host's profile. I used that research to visual restructure the information within each search result.

The most important factor was a host's availability & likelihood to host. We used this primary factor to sort the search results, placing our prediction for most-likely-to-host at the top. The 2nd-most important factor for narrowing the results was basic identity as determined by the host's as age, gender, and photo. The 3rd ranking factor was reputation rating, and the final factor was personality details including common interests. We designed the new visual layout of search results to accommodate this ranking.

Implementing the results

Knowing that travelers essentially used a three-step process to select one host to to view in more detail, I reorganized the information for each search result into three columns. I conducted further usability tests with this prototype layout, which confirmed that members could easily visually scan the left and right columns for the information they most valued in order to narrow down the results.

The restructuring and new information architecture allowed travelers to move from the search results list to the host's profile pages with greater speed and accuracy. This in turn resulted in travelers sending messages to members who were more likely to host, which in turn led to an increase in our primary KPI: a successful face-to-face meeting between members. I was able to track results across this funnel via A/B testing the product roll-out.

👉

diagram of algorithm for matching CouchSurfing members
portion of flow chart of the mobile casual meetups product suite
diagram of CouchSurfing search results
diagram of the three step process members used to analyse search resutls
mockup of the redesigned search results taking that implemented the UX research

Introduction

Rotten Tomatoes is a well known yet untapped treasure chest of data about movies. My project began with a desire to explore that data in an open-ended fashion to see where it could lead. This exploration eventually evolved into an extension for Chrome that creates for its users bespoke rating prediction for each movie. It's a personal project that is not solicited nor endorsed by Rotten Tomatoes.

Try it yourself! Download the Rotten Tomatoes Extension at the Chrome Web Store.

Product Strategy

While I hoped that to eventually discover a marketable product, this project began as open-ended research to explore movie ratings data and determine which professional film critic most closely shared my own taste in movies. I wrote a script to screen-scrape the star-ratings of each critic who had rated a list of films that I had also rated. This allowed me to give each critic a similarity score.

Analysis

I then tried comparing every film critic to every other film critic to find out who had the most and least similar tastes, based on 150 films in a range of genres. I compiled the raw data into a scatter-plot in which each dot represents a vector between a pair of unique film critics. The pair's similarity score is an average of - for each film that both in the pair rated - the distance between their two ratings of that film.

Findings

If both critics in a pair gave a random rating for each film, their similarity would be 50%. The plot shows that around 50 films in common are needed to narrow similarity down to an accuracy range of 15%. Also, as the count of films in common grows, similarity trends toward ~65%. It would be better for a taste-prediction product if the findings showed much higher levels of similarity overall. On the other hand, each critic might enjoy knowing that the are a likely a unique snowflake in terms of movie taste.

UX Research

I knew there was much more that I could do with this kind of data, so I set out to create a purely functional MVP that I could share with the public to generate feedback and new ideas. I asked a few friends to install my MVP prototype, and I interviewed them about their experiences.

I discovered that people who aren’t as obsessed with film as I am wanted something more practical that would improve the Rotten Tomatoes website whenever they visited. These open-ended conversations surfaced the ideas of personalizing the Tomatometer, adding a histogram of critic ratings, and ranking the critic review-blurbs based on each critic’s similarity to the user. As I added these new features, I also tackled the app’s UX, providing an interface that seamlessly blends into the existing Rotten Tomatoes website.

Prototypes & Code

I used this early feedback to code and publish the working app to the Chrome Web Store. Over several months, I iterated on the UX & visual design, while fixing bugs in the Javascript code.

Ongoing development

The app has a small base of around 500 users who all found it only via organic searching. These users occasionally send me bug reports and suggestions. The app is still in development, and the code is open source. Most recently, I created on on-boarding experience for new users including a tool for importing existing star-ratings saved to their Rotten Tomatoes accounts.

Further research

I eventually developed and tested a hypothesis for how user rating systems such as those used by Rotten Tomatoes, Yelp, and Amazon could be improved with bespoke predictions using similar techniques to my app. I've written a short essay about online ratings systems that describes their flaws and my hypothesis for how they can be improved.

👉

scatter-plot graph
screen shot of Rotten Tomatoes with the extention installed

Introduction

My Font Finder website allows people explore, filter, and select fee Google Fonts based on the visual attributes of the fonts. I conceived, designed, and coded this tool as a passion project.

The app was included in Product Hunt's Best Products of 2017 book, I got a shout-out from Google's design team.

Interaction Design

I created a user interface that doesn't include any font terminology or jargon. It uses icons to encourage a visual exploration of the typography. By tapping on the various “I” and “O” icons, the font set is filtered to show fonts that match the selected shapes.

I designed it in part to help non-designers understand the sometimes subtle differences between various fonts, but it's also a powerful tool for designers to select a great font for any project because it allows the sorted fonts to be compared at a fixed width.

Visual & Motion

Font Finder is a companion to the Google Fonts website, so I designed its visual style and color scheme to match.

This personal project also served as an opportunity for me to express my passion for website motion design. Every interactive element has a subtle transition during hover and after tap. Filtering the fonts causes an elegant cascading animation.

Prototypes & Code

Font Finder was coded entirely by me. It utilizes Google Font's free font hosting, Javascript, and is open sourced.

👉

upvotes for Font Finder scored on Producthunt.com
screenshot of the Font Finder web app

Introduction

My Tactile Synthesizr web app for mobile allows product designers and developers to create complex custom vibration patterns and to discover how the patterns actually feel in their hands. The tool allows precise control of vibration, much like a sound-wave synthesizer. I conceived, designed, and coded this tool as a passion project.

The Tactile Synthesizr works on the browser you are using right now, but requires an mobile device. does not work on the browser you are using right now. As of 2017, you'll need Chrome browser on an Android device to feel the good vibration.

Interaction Design

Tactile or “haptic” feedback is used by mobile phones, gaming controllers, Apple track-pads, and many other devices. While it's typically used to signal a warning or alert, more subtle vibrations can be used to provide many other signals and emotions.

The only tool of its kind

Chrome for Android gives websites access to the device's vibration motor. This means that product designers are free to utilize haptic feedback to communicate to users in creative new ways, however, the vibrations must be coded numerically. My web app is the only tool I know of that allows tactile patterns to be graphically synthesized.

Prototypes & Code

I wanted to explore when and what type of haptic feedback is appropriate within the browser setting. The challenge was that, unlike audible sounds, the vibration API can't directly control the frequency nor “volume” of the device's vibration motor. It only allows the motor to be turned on at full strength for a specified duration.

However, I discovered that nuanced vibrations – such as fading in and out – could be created by very rapidly cycling the vibration motor on & off. By changing the duration of the on & off periods in a similar way to Morse code, I could control the vibration in the same way that a synthesizer would control the “attack” & “decay” of a very low frequency sound wave.

Tactile Synthesizr is the result of my experimentation. It was coded entirely by me and is open sourced.

👉

screenshot of the Tactile Synthesizr mobile web app
example of output code produced by Tactile Synthesizr

Hire Mattthew

checkmark
checkmark

About Mattthew

That's right, three t's! I've been designing and building software products and leading design teams since 2007. I continue to study and create across the full stack of product design, from strategy & leadership to pixel-pushing & debugging code. I'm also an artist & storyteller happily based in San Francisco. If you have any questions, send me a message!
Please rotate  🙈