Ironhack
Published in

Ironhack

Pong Spot — A Ping Pong Map App

PONG SPOT — A Ping Pong Map App

Final Project for UX/UI Bootcamp Ironhack Berlin

Intro

Fact: “Table Tennis is the world’s best brain sport.” (Dr. Daniel Amen (Member of the American Board of Psychiatry and Neurology)

“Table tennis is the sport that makes you use your brain the most. Fact. It is proven to make you more productive in the workplace. According to Dr. Daniel Amen, a renowned member of the American Board of Psychiatry and Neurology, “table tennis is the world’s best brain sport.” Dr. Amen’s studies have concluded that ping pong activates various portions of the brain simultaneously (so great for kids who need to develop motor skills). During a game, an overall state of awareness is stimulated — requiring both thought and physical alertness at the same time. On the other end of the scale, the game is now being recommended as a method of warding off Alzheimer’s and for assisting in the treatment of dementia. Dr. Amen specifically points out that table tennis:

a). Increases concentration and alertness

b). Stimulates brain function

c). Develops tactical thinking skills

d). Develops hand/eye coordination

e). Provides aerobic exercise

f). Provides social and recreational interaction”

(source: http://blog.uberpong.com)

I didn’t choose that topic only for health-reasons but also I like playing Ping Pong myself AND there’s a massive Ping Pong Scene in Berlin. There’s about 800 tables all across the city but usually you won’t see them from the subway being on your way to work, right?!

User Persona

Niklas is working full time for the first time in his life, that’s why he can not stay out too long during the week. Still he likes to meet his friends after work to play Ping Pong. He knows a few tables in his area but it’s always annoying when those are occupied already. So usually it’s getting late and dark while the friends are strolling around to find another spot.

So HOW MIGHT WE help Niklas to find another table close by, quickly?

Competitors

There is a Ping Pong Map by Peter Ulrich (big picture), it has most of the tables, locations (but no directions), sometimes photos and descriptions, even a filter — it’s an open source — so every user can add tables which are not listed yet and upload photos and comment. So far so good — unfortunately it’s only for desktop but usually you don’t take your computer to play outside, right?! And it’s terrible to use on a mobile phone btw (top right)…

Doing some research I found an app which is basically a copy of the desktop map, created by Thorsten Buechner — but it’s not available anymore (bottom).

The only thing you can have is an app created by Mathias Villaverde…a very poor version of the other two. It has a map and tables, even directions (in a very rough style!) but that’s it — all happening on 1 screen (center right).

Research

So I was wondering if people are satisfied with that or maybe would want more. Assumption: Since Ping Pong is considered to provide social interaction and you can not play alone, it might be nice to have some community features which connect players (known/unknown). Also keeping information about the spots updated could be useful, as I ended up in front of fenced tables or construction areas every now and then. Which other ideas might potential users have besides that? I was curious and did a survey.

User Research/Features

It revealed that there’s a need actually! I reached 35 people and they had all sorts of ideas about additional features like:
-more filter options
-meeting new opponents
-have a chat included in the app
-a Highscore list
-a photo album etc.

Lean UX Canvas

Empathy Map

Empathy Map — Ping Pong Map App

The Solution

So I decided to create an app which combines the main functions and more features. The app should support social interaction and provide a more convenient usability to submit better playing conditions!

It should include:

  • A map that works offline
  • Find ping pong tables that are close to you
  • Get directions
  • Share the location with friends
  • Chat with friends
  • Invite other players you might not know yet
  • Add locations if you find an unlisted table
  • Upload photos and write descriptions
  • Rate tables and leave comments
  • Information about the area by filter preferences

Card Sorting

Card Sorting — Ping Pong Map App
Sitemap — Ping Pong Map App
Userflow Ping Pong Map App

Low-Fi Prototype

That’s the first prototype, I tested it, iterated, tested it again…and yes, sometimes I turn the templates upside down (I blame it on binge watching Stranger Things)…my TA said: “You always do that!”…but its not true! ;-)

Lo-Fi Prototype — Ping Pong Map App

Mid-Fi Prototype

Mid-Fi Prototype — Ping Pong Map App

Moodboard

To find some inspiration I created this moodboard which compares Ping Pong on the internet and Ping Pong in real life — which is basically colour vs. grey.

I wanted to avoid the traditional green, black, red colour-scheme most people would expect. This is Berlin and people’s lifestyle should be met by the design. Also the target group is people who like to play in their freetime, outside, casually — not too much professionals, as they are usually very picky and serious about tables and environmental conditions and only play indoors in their sportsclub: “The sport I do is called table tennis. It’s not called Ping Pong or Hardbat etc. I think that such an app is absolutely superfluous and out of place for table tennis players who do their sport “seriously”. Table tennis is known to be operated in the hall and not outdoors…”. (Bernd on https://www.mytischtennis.de)

Design Tile — Ping Pong Map App

Design Tile

The Logo Font is Aquino, which comes in round shaped letters refering to the Ping Pong ball. Also it gives the impression of community and transports a warm, convenient impact.

For the body text I used DM Sans which has a clear typeface to provide an optimal readability. The combination of both fonts visualizes a contemporary style for an urban and casual free time activity. To stick with that, blue tones dominate, as a reference to the sky and outdoors.

Brand Attributes: urban, unconventional, casual, open, contemporary

Hi-Fi Prototype, interactive

So after finding his favorite table occupied, Niklas would open the app (being registered/signed up already), set his preferences, check a table (-card) and share this with his friends. Also he is open to play with other players which might look for company and find Niklas’ chosen spot/pin being coloured on the main map.

So Niklas can also message his friends and get directions without switching to another app. Ready to play! Yay!

Pong Spot — A Ping Pong Map App (animated prototype) Final Project for UX/UI bootcamp @Iron Hack, Berlin; (created in 10 days)

Next Steps

There’s a bunch of community-features that need to be created and animated, also a dark-mode (switching automatically at sunset!) would be nice — depending on users pre-settings of course. Also I can imagine to ask local businesses for collaboration and do some merch to make this service a brand.

Aaaaand of course, I would need a Web-Dev who’d code all that! Are you in?

Now: go out and play!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store