Mattr — The app that does good

So, about a year ago I started a journey I never knew would be quite as challenging as it had been — an Interaction Design specialization course with University of California San Diego, the 14th largest research facility in the world and one of the few ivy public universities in the United States.

With this specialization came many rigorous lessons which included observational user research, information architecture, statistics, social computing and lastly a capstone project to put it all together.

I chose a design theme for something close to me — changing one’s behavior in order to help others. It began with an idea a friend of mine had that I hoped to bring into fruition: an app which allows for others to search for socially conscious businesses. With this, people can feel empowered to look up a restaurant which donates to charity or an auto repair shop which has staff members donate their time to food shelters or even barbershop that happily shaves heads for charity rallies!

For the capstone, I had to narrow my scope to prove the concept first, slimming my idea to just restaurants (the most frequented type of business I could think of). It started with storyboards to prove the concept could map to a real user need and task.

With the storyboard fleshed out and a clear direction forward, I evaluated the task that users could accomplish with this application. I had to change directions a bit as I initially believed the app could order food to your door — something I found confused the ultimate message and use of the app. Through this exercise I had realized the most important part of Mattr was that it was a search engine, not a purchasing application.

After storyboarding was finished, I was able to start on my first paper prototypes. I then set up heuristic evaluations with design partners to evaluate my concept, asking them to walk through a task that a typical user would accomplish as they pinned the interface against a set of usability principles. One of the largest findings was that it was confusing why users had to decide how much they’d like to donate to a charity up front versus finding a charity first before donating. I was able to marry this with the refined concept of 1) finding a business 2) reading about supported non profits 3) visiting and checking into a business. Along with this came obvious insights: ensure that every dialog has a clear exit, every screen had a clear purpose and every title was in user-centric language.

Afterward, I would start creating my final prototype screens to eventually be tested with users to ensure their validity. I used Axure to create detailed wireframes and iterated on them in increase utility within the application. I brought these screens into InVision to create a fully functional prototype for testing.

After working out some bugs and kinks in the prototype itself, it was off to the races! I had in-person usability tests to validate the tasks within the application, noting all issues that users had within the app and areas to improve upon. Wielding these insights, I altered a few screens and tossed a few features — polishing things up for a final A/B test using Usertesting.com. The primary task users were charged with during this A/B test was to check into a business location. The design variants included A) a check-in button comprised of only an icon within a circle at the bottom of the screen and B) a check-in button with a clear “check in!” text full width of the screen.

After compiling the results of this A/B test, I had a clear direction: users intuitively understood option B (the one with the big-ass button!) much quicker than option A. I assumed this would be the case given that it aligns with many generic usability principles found on the web today (Fitt’s Law, Gestalt, Attenuation Blindness, among others).

I polished up my prototype with the button version to create my final prototype, which I intend to test further before fleshing out all the small details of visual design and branding. You can see the final prototype here.

Over all, this product is unique in the market place because it allows you to easily and quickly find businesses which align with your values, unadulterated with other business objectives like sales or attribution (unlike apps like Yelp! or GrubHub). Because of this, you can really focus on what mattrs most: helping others.

Please see the following video for a quick introduction to the app! Thanks for reading and I hope you enjoy this post.