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 trialDave McFarland
Treehouse TeacherForum 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:
- The App will be used by a Scorekeeper
- The App needs to run on a phone or tablet
- The Scorekeeper needs a way to highlight the player who is server and input the point.
- After the game the App needs to report the serving win percentage for each player.
Here are the design requirements:
- The design should make the App quick and easy to use
- Design the different screens for the App. For example, the Start Screen, Scoring and Serving Screen, Reporting Screen and so on.
- Submit the design as images -- PNG, TIFF, PSD, and so on.
- 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.
Jeannie Stevenson
11,171 PointsYeah, 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
Treehouse TeacherHi Jeannie Stevenson and Michael Hulet. Just design. No programming for this contest. Sorry for the confusion.
Jeannie Stevenson
11,171 PointsSweet, thanks, Dave!
31 Answers
Dave McFarland
Treehouse TeacherWell, 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
21,261 PointsAwesome work everyone, love all your designs. Congrats CJ!
Dave McFarland
Treehouse TeacherRoland Cedo Your design was ALSO very good. I especially liked your blog post on the process. Good stuff!
CJ Williams
34,372 PointsAwesome!!! 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
24,208 PointsGreat job everyone and congratulations to you CJ!
Jeannie Stevenson
11,171 PointsCongrats, CJ :)
This was really fun! Can't wait for the next one!
Jim McMillan
4,417 PointsCongrats 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.
toddschneider
4,795 PointsCongrats 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
1,514 PointsCongrats CJ, I especially enjoyed Bo Jackson as the Toughest Competitor image!
Ashley Ellis
474 PointsHi Dave,
Here is my submission.
All information regarding the apps instructions are within the design.
http://postimg.org/image/mvyvmmv53/
Thanks, Ashley Ellis
Dave McFarland
Treehouse TeacherLooks great Ashley.
Damon Johnson
Courses Plus Student 2,775 PointsGreat effort Ashley! Love the colours and typography!
Ashley Ellis
474 PointsThanks very much guys
Ryan Ackermann
14,665 PointsThis is fantastic!
CJ Williams
34,372 PointsHere 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!
Rhiannon Heeley
3,808 PointsHere'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:
- Enter names on the start screen - or continue without if you don't want to
- Use plus and minus buttons to add the score or take away if you made a mistake or something
- Press Button underneath score which fills the box with a colour to indicate who's serving
- Stats page - which is also accessible during the game with the link at the top
David Nielsen
4,923 PointsWay good! I love this design. i had many similar ideas.
Nick Ocampo
15,661 PointsThis is my favorite so far! Good job.
Jacob Miranda
19,392 PointsSuper 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
Treehouse TeacherYou don't have to come up with a name for the app, but if you want to, then go for it!
rosinapissaco
13,401 PointsHello 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
Dave McFarland
Treehouse TeacherThese look great Rosina!
Lemuel Ambie-Barango
31,559 PointsHere's my entry, I tried to make it as simple as possible and well adapted for a fast paced ping-pong game.
Dana Griffin
5,870 PointsI 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
Treehouse TeacherAwesome Dana! You're the first to submit a entry. Great job.
David Nielsen
4,923 PointsHaha, 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.
Francisco Barrento
8,117 PointsHi 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!
Nathan Newell
7,634 PointsThese entry's are ridiculously good. The Treehouse staff will have their work cut out for them this week! Good luck everyone :)
Alex Malan
5,281 PointsHello 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!
Damon Johnson
Courses Plus Student 2,775 PointsEvening 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
13,570 PointsHere 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.
Jesse MacLeod
1,896 PointsHere is my minimalistic entry with a big focus on readability and ease of use. First timer!
Jeff Waite
8,257 PointsJessie 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. =/
Jesse MacLeod
1,896 PointsThanks Jeff!
Jeannie Stevenson
11,171 Pointsrosinapissaco
13,401 PointsGreat work!
Dave McFarland
Treehouse TeacherHi 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).
Jeannie Stevenson
11,171 PointsHi 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
Treehouse TeacherOh, I get it! You're smart -- that's great stuff.
Jeannie Stevenson
11,171 PointsThanks, Dave :)
And thanks, Rosina :)
Jennifer Louie
198 PointsHere'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
Courses Plus Student 5,270 Pointshttp://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
Nick Del Negro
Courses Plus Student 5,270 Pointshttp://i.imgur.com/05PmPbJ.png
Horizontal screen shots.
Michael Flynn
3,084 PointsHere's my entry
First time designing an app, it was a fun challenge!
Walter Cordero
10,850 PointsIs 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
Treehouse TeacherHi Walter,
The more detailed your submission, the better.
Walter Cordero
10,850 PointsThanks Dave
Roland Cedo
21,261 PointsCan you guys post you house rules for ping pong? Might have some ideas depending on how you guys play :)
Dave McFarland
Treehouse TeacherHi Roland,
We play two different types of games at Treehouse:
- Game to 21 points
- Must win by 2 points
- Switch server every 5 points
The other way follows standard international table tennis rules:
- Best 3 out of 5 games
- Game goes to 11 points
- Must win by 2 points
- Switch server every 2 points
- If the game reaches 10 to 10, you switch server EVERY point.
Jeff Waite
8,257 PointsSo 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
474 PointsThanks very much Jeff!
Holt Hunter
4,629 PointsHere 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!
Walter Cordero
10,850 PointsHi everyone, here's my design hope to live up to everyone else who submitted, greetings from Guatemala.
Jim McMillan
4,417 PointsHi 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.
rosinapissaco
13,401 PointsWow! You create a great presentation, AWESOMENESS !
Dan Romero
749 PointsAwesome presentation dude! :D Good luck!
Jim McMillan
4,417 PointsThanks Dan and Rosina :)
kirkbyo
15,791 PointsAmazing entries everyone! Here is my version of the app App Design | Download
Ozzie
toddschneider
4,795 PointsHi 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) =)
Nick Ocampo
15,661 PointsHere's my entry. I did all of it using Sketch 3. Will happily share the original project file if needed.
Roland Cedo
21,261 PointsWow! 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!
Jeff Waite
8,257 PointsI love your design.
One of the more clean yet robust designs I've seen so far.
Michael Hicks
24,208 PointsHere 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.
rosinapissaco
13,401 PointsAlso, what size should I use for the app design? 480px width?
Dave McFarland
Treehouse TeacherDon't think it completely matters -- the app should run on a table or phone, so generally, a rectangular shape is fine.
Wendel Ferreira
4,258 PointsGreat 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
Treehouse TeacherGO for it Wendel! Looking forward to your entry.
Michael Hulet
47,913 PointsMichael Hulet
47,913 PointsAt 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?