Building Matchup.io
--
UX, wireframes, UI, animation, identity, icons, badges
Matchup.io is a platform where people with fitness trackers can challenge each other, compete head-to-head, collect achievements, win prizes and make friends.
Matchup harnesses the power of positive peer pressure, helping people maximize their daily physical activity through interactive competitions and challenges.
Only a year ago Matchup was a nameless side project that 3binary principals Greg Williams and John Contreras were playing around with. Today it’s a full-fledged company with it’s own employees, a growing number of clients in the corporate wellness sphere, and currently in the process of closing a round of seed funding.
I was the lead product designer for Matchup between January and March of 2013, during a major push to launch the beta. I learned a lot about myself as a designer throughout this project. I clarified my own UX and UI design process. Working in close collaboration with developers also led me to improve my leadership skills.
“Ana was instrumental in the successful launch of Matchup, owning the overall user experience. She instituted a practical design approach that helped us focus on our core business and experience goals. We will continue to seek Ana’s expertise, particularly in areas of complexity, where her ability to design simple and elegant solutions are invaluable to our team.”
— John Contreras, Co-founder and CEO of Matchup
Breaking Rules
3binary still had a full roster of consultancy clients when we began working on Matchup during evenings and weekends. Winter holidays of 2013–2014 were the critical opportunity window to get the initial version of Matchup out the door.
We decided to break some rules and push off serious user research and testing until after the app went live. Getting the first iteration done in the available window of time was our top priority. We planned to begin deeper research and testing retroactively, once we had a small live audience of beta users. We would use Intercom to gather qualitative feedback and keep an eye on user activation and engagement metrics through Mixpanel.
It felt like the right thing for the project to “get our thoughts out on paper” without thinking too hard about it at first.
We needed something out there, available to a live audience to start interacting with. Observing the interaction would lead us towards better informed decisions on everything: the concept, the features, the business model.
The technical muscle on the 3binary team allowed us to pull this all off in an efficient and controlled manner.
We brainstormed and went with some educated guesses, followed by wireframe validation, UI production, and beta rollout.
Here’s an example of the conception of a feature, next to the more or less final UI.
Outside of wireframing and UI prototyping, I did a lot of reasoning through features. I shared my thoughts with the team in a format like the example below, as well as a few friends we were using for super basic validation. This process helped us solidify all of our nebulous ideas regarding features and get on the same page.
The Identity Scaffold
Breaking the rules often leads to interesting things. In the process of trying to speed through everything with Matchup I developed an experiment in startup branding which I’ve called “the identity scaffold.”
The purpose of an identity scaffold is to give the initial version of a product a visual identity that feels real enough, but remains lightweight and flexible.
No more than a few hours should be invested in the production of an identity scaffold. Its purpose is to set a possible visual tone without investing heavily in time and resources for developing it in-depth.
When dealing with a completely new product that’s highly interactive, the beta-testing process almost always leads to major product strategy changes and as a result an overhaul of brand strategy as well. As such, in my opinion it is most efficient to save visual design heavy-lifting for later — especially when bootstrapping and dealing with aggressive timelines. The identity scaffold that way is a bit of a bang for the buck.
The current landing page was designed by the awesome Kuu Hubbard, who is currently designing at Matchup full-time.
I am very proud to have helped create this product from nothing and it’s been awesome to watch it’s progress and successes. Witnessing the journey an idea takes from the abstract to the real, and being an agent of this transformation, is why I do what I do. It is the biggest thrill I know.
I can’t wait to see where things go next with Matchup.
Press for Matchup
Matchup’s Tasty Trade Interview
10 Best in Wearable Tech Chicago
2016 Update
Matchup has transformed into Stridekick! Same great community fitness app, different look and name. The Matchup team asked me to come back to rebrand them, after learning over the course of 2 years that the name “Matchup” made too many users think this was a dating app.
Check out the PDF files below to get a sense of the new identity evolution:
Icon & Brand Illustration Intermediate Concepts
Final Brand Guide for Stridekick — I gave the Stridekick design team an editable Keynote and PDF file, so that they may amend and add to the guide as needed
