Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Design

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Forum Contest: Design the User Interface for a Ping-Pong Scoring App

UPDATE: This contest has ended.

After you've watched the video, please read the details below carefully. I'm looking forward to your entries!

How to Enter: Create the user interface design for a ping-pong scoring app. You need only create the visual design using a graphics program like PhotoShop, Illustrator, or even pen and paper. Post your designs to a site we can download them from like Drop-Box, Imgur.com, or even Github. Here's what the app will do:

  1. The App will be used by a Scorekeeper
  2. The App needs to run on a phone or tablet
  3. The Scorekeeper needs a way to highlight the player who is server and input the point.
  4. After the game the App needs to report the serving win percentage for each player.

Here are the design requirements:

  1. The design should make the App quick and easy to use
  2. Design the different screens for the App. For example, the Start Screen, Scoring and Serving Screen, Reporting Screen and so on.
  3. Submit the design as images -- PNG, TIFF, PSD, and so on.
  4. Link to your image in this forum thread with a description of how your design works.

Due Date: All entries must be submitted by September 7th at 11:45pm EST. Here's a timezone chart so you can see what time that is for your locale.

Prize: One winner will receive a free month of Treehouse Pro on us! :) We'll announce the winner on September 8th and reveal the next contest.

Michael Hulet
Michael Hulet
47,913 Points

At the bottom, the article says "The entries will be judged by Treehouse teachers based on design and code". Does this mean that we can code the app and submit it, either by itself or alongside the mockup?

Yeah, I'm a little confused too. Is it this...

Submit the design as images -- PNG, TIFF, PSD, and so on.

or this?

The entries will be judged by Treehouse teachers based on design and code.

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Jeannie Stevenson and Michael Hulet. Just design. No programming for this contest. Sorry for the confusion.

Sweet, thanks, Dave!

31 Answers

Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher

Well, this was a very tough contest to judge. Every entry was worthy of consideration, and many of them were complete enough to make it as full-featured apps in an App Store. Great job EVERYONE

I can only pick one winner, but I do want to highlight some entrees that were exceptional:

  • Cheers to Jim McMillan for creating a complete website to market his design for the Ping Pong Umpire. Great work Jim!
  • Shout out to Nick Ocampo and toddschneider for creating horizontal layouts. Personally, I think this is the best design for this app, because scoring would be most intuitive -- tap on the left side of the screen to award a point to the player on the left of the scorer, tap the right to give a point to the player on the right.
  • Great job Jeannie Stevenson for creating a very well thought-out design for her Match Point app.
  • I really liked the clear, intuitive and simple design of Jennifer Louie's design
  • Also, congrats to Dana Griffin for being the first person to submit an entry!

OK, for the moment of truth...like I said this was a VERY tough call, but I liked most of all CJ Williams's Team Treehouse Ping-Pong Scorekeeper. The design is very simple, elegant and intuitive and his use of multiple mobile gestures really highlights the advantages of mobile touchscreens. Great job CJ.

Roland Cedo
Roland Cedo
21,261 Points

Awesome work everyone, love all your designs. Congrats CJ!

Dave McFarland
Dave McFarland
Treehouse Teacher

Roland Cedo Your design was ALSO very good. I especially liked your blog post on the process. Good stuff!

CJ Williams
CJ Williams
34,372 Points

Awesome!!! Thanks a lot guys. This just made my day. I had a lot of fun with this, and it's been really inspiring to see everyone's work. Good job everyone. High fives all around.

Michael Hicks
Michael Hicks
24,205 Points

Great job everyone and congratulations to you CJ!

Congrats, CJ :)

This was really fun! Can't wait for the next one!

Jim McMillan
Jim McMillan
4,417 Points

Congrats CJ, A really excellent design. I am looking forward to trying to code your app.

There was some really outstanding designs here. A lot of fun.

Congrats Cj, Wonderful design. Wow what a week, I had allot of fun competing with all of you guys, there was a tremendous amount of talent in this weeks competition. Can't wait till we all get to do it again. Thanks go's out to the treehouse staff for all their help this week, and the awesome competition kudos guys. I already have Photoshop and a hot cup of coffee warmed up for the next Design Challenge woohoo.

Todd Schneider (aka the Fox)

Bryan Sweeney
Bryan Sweeney
1,514 Points

Congrats CJ, I especially enjoyed Bo Jackson as the Toughest Competitor image!

Ashley Ellis
Ashley Ellis
474 Points

Hi Dave,

Here is my submission.

All information regarding the apps instructions are within the design.

http://postimg.org/image/mvyvmmv53/

Thanks, Ashley Ellis

Great effort Ashley! Love the colours and typography!

Ashley Ellis
Ashley Ellis
474 Points

Thanks very much guys

This is fantastic!

CJ Williams
CJ Williams
34,372 Points

Here we go! Even made a fun logo for this guy. I designed this entirely in Illustrator, but can create a PSD if needed. Hope y'all enjoy it! Cheers!

Ping-Pong Scorekeeper by CJ Williams

Rhiannon Heeley
Rhiannon Heeley
3,808 Points

Here's my entry :) http://imgur.com/pVvPchT And a link to the individual screens not on a mockup page https://www.dropbox.com/sh/oivmj84wcdlka5h/AACU6L-X-whudF1vpnML4ilOa?dl=0

I wanted it to hopefully seem simple to use and to have a focus on the score number

to use:

  1. Enter names on the start screen - or continue without if you don't want to
  2. Use plus and minus buttons to add the score or take away if you made a mistake or something
  3. Press Button underneath score which fills the box with a colour to indicate who's serving
  4. Stats page - which is also accessible during the game with the link at the top
David Nielsen
David Nielsen
4,923 Points

Way good! I love this design. i had many similar ideas.

This is my favorite so far! Good job.

Jacob Miranda
Jacob Miranda
19,392 Points

Super excited for this one! Already started sketching (But its bedtime), so I'll post sometime tomorrow or wednesday.

Should we or can we name the app or should it just be "Scorekeeper" to level the playing field for everyone?

Dave McFarland
Dave McFarland
Treehouse Teacher

Jacob Miranda

You don't have to come up with a name for the app, but if you want to, then go for it!

Hello everybody, I only have the icon and its not even ready lol. What do you think about it? What colors are the best? Comments are more than welcome :) https://dribbble.com/shots/1712534-Ping-Pong-versions?list=users&offset=0 https://dribbble.com/shots/1712528-Ping-Pong-icon-for-App?list=users&offset=1

Lemuel Ambie-Barango
Lemuel Ambie-Barango
31,559 Points

Here's my entry, I tried to make it as simple as possible and well adapted for a fast paced ping-pong game.

http://i.imgur.com/87Y59F4.png

Dana Griffin
Dana Griffin
5,870 Points

I saw this contest in my alerts and figured that I would try my hand at it. I have never done a contest on Treehouse before, so any feedback is appreciated...

Demonstration: https://vid.me/sVy

Screenshot: http://imgur.com/vKtA90m

How it works:

1.You can edit the player's name with the green X next to player 1 and 2.

2.You can selected who is serving via the checkbox

3.To submit a score simply click on the players side. (players must win by 2)

4.When a winner is determined, serving win percentages are displayed as bars.

5.Click anywhere on the screen to reset.

Dave McFarland
Dave McFarland
Treehouse Teacher

Awesome Dana! You're the first to submit a entry. Great job.

David Nielsen
David Nielsen
4,923 Points

Haha, this made me not even want to make one now! So good! Nice work. The only thing I saw was it'd be much better if selecting the opposite checkbox auto-deselected the current one, so you're only tapping once instead of twice each time theres a change in serves.

Hi Everyone,

Here is my entry. Let the Ping Pong Mania be with you and let's challenge the most ranked players. Firts timer!

Hope you enjoy it!

Ping Pong Mania

Nathan Newell
Nathan Newell
7,634 Points

These entry's are ridiculously good. The Treehouse staff will have their work cut out for them this week! Good luck everyone :)

Alex Malan
Alex Malan
5,281 Points

Hello everyone,

So glad I've finished it. Hope you'll love my TREESCORE app design, which is all based on sliding and easy to use, also.

This is the link:

https://www.dropbox.com/s/nftppk9yn5h2qnw/TREESCORE.pdf?dl=0

Thank you!

Evening everyone,

Here's my effort. I'm not a designer by any stretch of the imagination but thought this sounded fun. As you can see, it's more of a concept wire frame to show how I would build my app

http://i.imgur.com/t5PyH44.png

Would love to hear any feedback! =)

robertm
robertm
13,570 Points

Here is my entry

I have explained how app works is in the design images. There is a good amount of zoom available to see the images more clearer.

This has been my first time doing something like this and I really enjoyed it.

Here is my minimalistic entry with a big focus on readability and ease of use. First timer!

Jessie I love it! It's almost exactly what I envisioned for my design except I couldn't execute on it! Fantastic design!

Dang, I'm glad I still have a day job-- design clearly isn't my thing. =/

Thanks Jeff!

Great work!

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Jeannie,

This looks great. I'm not sure how to switch the server once the match begins. In ping-pong, you switch servers DURING a match either after every 5 points or after every 2nd point (depending on the rules).

Hi Dave,

Yeah, it is probably more complex than was asked for, but that would get programmed into my version of the app. That's why there's a "Game Style" selection on the "New Match" screen and then an "Options" section on the Home screen.

Game Style is for choosing House Rules or the ITT rules. The app can then determine when service changes freeing the user to simply keep track of the score.

Options is so you can change House Rules according to basic Ping-Pong parameters.

I think the .png file is too small. Here's the PDF link: https://www.dropbox.com/s/uyvr34he76byszz/app-sketch-01.pdf?dl=0

Here's a link to the doc I built to keep track of all the info: https://docs.google.com/document/d/15XlUrnl_ypIVP-ZFG4U9LtM23ZSwOR6GExXxrKUATWg/edit?usp=sharing

Dave McFarland
Dave McFarland
Treehouse Teacher

Oh, I get it! You're smart -- that's great stuff.

Thanks, Dave :)

And thanks, Rosina :)

Here's my entry: http://imgur.com/XLUaJdh

The above is a compilation of all the screens along with some brief description to explain how the app works.

PSD here: https://www.dropbox.com/sh/6uytkscc1fkhgj0/AABVcOCCccUUkNwJJFOqHmdda?dl=0

Nick Del Negro
PLUS
Nick Del Negro
Courses Plus Student 5,270 Points

http://i.imgur.com/4B5szOL.gif

main menu:

-resume

-new game

-settings (change rules)

score keeping:

-choose which player serves by swiping Mike to that side of the table

-award points by tapping on that player's side of the table

-If a point is accidentally awarded simply swipe right to left to remove it

stat screen:

-review serves won after the game using the graph

-for an exact percentage press and hold graph

-press treehouse logo to exit to main menu

Michael Flynn
Michael Flynn
3,084 Points

Here's my entry

First time designing an app, it was a fun challenge!

Is it necessary to do all the views of the app ?, I mean if need be presented like on a tablet and like on a smartphone. Thanks.

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Walter,

The more detailed your submission, the better.

Thanks Dave

Roland Cedo
Roland Cedo
21,261 Points

Can you guys post you house rules for ping pong? Might have some ideas depending on how you guys play :)

Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Roland,

We play two different types of games at Treehouse:

  1. Game to 21 points
  2. Must win by 2 points
  3. Switch server every 5 points

The other way follows standard international table tennis rules:

  1. Best 3 out of 5 games
  2. Game goes to 11 points
  3. Must win by 2 points
  4. Switch server every 2 points
  5. If the game reaches 10 to 10, you switch server EVERY point.

So I've never really designed anything before, but thought this sounded fun so I gave it a shot.

I realized about half way through that I suck and it wasn't going to get any better, but I like the function even though I think the esthetic is weak. http://i.imgur.com/p8iSMFp.png

I feel like a vertically split design is easier for the scorekeeper.

Ashley, I love the look of your design! I would love to be able to mimic your esthetic, but even if I wanted to, I don't have the talent. Great Job!

Ashley Ellis
Ashley Ellis
474 Points

Thanks very much Jeff!

Holt Hunter
Holt Hunter
4,629 Points

Here is my entry postimg.org/image/4fn4o2rzr/. The Scoring App for Ping-Pong. All the information you need should be on the picture, but if there is anything else you need to know feel free to ask, Thanks!

Hi everyone, here's my design hope to live up to everyone else who submitted, greetings from Guatemala.

Jim McMillan
Jim McMillan
4,417 Points

Hi Folks, There is some really impressive designs here. I found so much inspiration from them that I thought I would have a go myself. I'd love to hear your thoughts.

P I N G P☺NG umpire

Wow! You create a great presentation, AWESOMENESS !

Dan Romero
Dan Romero
749 Points

Awesome presentation dude! :D Good luck!

Jim McMillan
Jim McMillan
4,417 Points

Thanks Dan and Rosina :)

kirkbyo
kirkbyo
15,791 Points

Amazing entries everyone! Here is my version of the app App Design | Download

Ozzie

Hi all Just finished my entry Treepong. I have really enjoyed working on this project this week. Its been so much fun watching all the submissions come in, and I just want to wish a HARDY Good luck to all =). I would also like to throw out a Thank you to the Treehouse team for all the hard work and support they continuously provide.

Todd (aka the Fox) =)

Here's my entry. I did all of it using Sketch 3. Will happily share the original project file if needed.

Roland Cedo
Roland Cedo
21,261 Points

Wow! So many awesome entries here. You guys are ninjas! Here's my entry, Pinghouse.

Competition aside, I would LOVE some feedback from anyone here! It's my first time designing anything in Illustrator outside of the courses here on Treehouse and I'm open to any critique :)

Go Team Treehouse! Good luck all!

I love your design.

One of the more clean yet robust designs I've seen so far.

Michael Hicks
Michael Hicks
24,205 Points

Here is my entry. Trippy Pong Scorekeeper I look forward to discovering and commenting on everyone's awesome work. Just a little winded at the moment. Thanks for the opportunity Team.

Also, what size should I use for the app design? 480px width?

Dave McFarland
Dave McFarland
Treehouse Teacher

Don't think it completely matters -- the app should run on a table or phone, so generally, a rectangular shape is fine.

Great entries here, real pro stuff. But I think I'm going to try to design something of my own and post here anyway!

Dave McFarland
Dave McFarland
Treehouse Teacher

GO for it Wendel! Looking forward to your entry.