Golf Buddy App (Layout Design Phase 1)

  • Post author:
  • Post category:Blog

App Initial Demonstration

Adobe Xd has a wonderful record feature. I’ve included my very first test phase of the third button “Shot Buddy.”

Screenshots

The first thing a user needs to do is to enter their zip code. That will tell the app to populate with necessary information which includes golf courses nearby and other app users in that area.

This takes you to a menu. The app is ready to go. Anything from here on out will pertain to approximate radius of the zip code entered. Probably 30-50 miles. I particularly found it fun creating the icons. Some of them such as Find a Course and Shot Buddy were a couple of “aha” moments that seemed to just fit!

home-menu

It’s unfortunate I haven’t completed Find a Course yet. The first working button is Find a Buddy. The zip code sent information to the Golf Buddy server and now populated users of the app in a 30-50 mile radius of 27513. You are given the opportunity to request buddies. Info such as handicap is vital to who you want to be your buddy. If you are a good player you probably don’t want to match up with higher handicaps and vice versa. This makes buddy pairing a little more even. So you will more than likely choose users based on their handicap that closely resembles yours.

findbuddy

Once you’ve gained “Buddies” they are stored in “Buddies.” You can message them anytime using the “Send Message” button. This is part of the social aspect of the “Golf Buddy” app. This is a great way to set up golf outings or just chat about your rounds.

buddies

“Shot Buddy” will be GPS-based and uses the zip code to locate your area’s golf courses. A golf course does not have to be a participating member. The developers play the courses, gather score cards with graphics of the holes and enter them into the database of the app. This is to ensure that as many golf courses are represented as possible.

As you walk or ride the course the GPS tracks your location and shows up on the graphic of the hole. From that point it estimates the remaining distance to the center of the green. This allows golfers a more accurate idea of what club to use. But not only that there is a “Buddy” button the you can turn on to see what your “Buddies” have said regarding the course. Those icons turn on when you click the “Golf Buddy” logo in the bottom left corner.

The HOME button takes you all the way back to the Zip Code screen and should be used when you want to change locations.

shotbuddy

A pop-up balloon opens to show what your buddy has said regarding the hole. You can leave your own comment by tapping the bottom right icon with the pencil. Your marker will appear on the hole graphic just as your buddies have.

buddycomments

This is the message center. It is pretty self-explanatory. You can send and receive messages here.

messages

The profile page lists your user name, area and handicap as the top 3 most important pieces of information. There’s also some fun facts added you can have fun with that also serves other users in determining if they are a good match before they request you as a buddy. You can edit your photo as well or if you don’t want a photo a generic “Golf Buddy” logo will be used instead.

profile

Workspace

I was having some frustration with how I laid out my pages in XD. I decided to rearrange them in a more structured layout. I lined up all the main pages into a column and had their respective pages laid out to the right of them. This made prototyping much easier since there’s a lot of buttons to navigate! This is pretty much my final page layout. I added many more pages especially the pages for “Find a Course.” I added functionality for making a phone call, linking to the website of the golf course and Google map. I actually took screenshots of my own phone (iPhone 6) and imported them and they fit perfect! I added a “selfie” in the “Profile” because I needed to add functionality to the “Edit” the profile picture.  I am considering tweaking the design some and then moving on to the presentation.

Layout

Prototyping

One of the great features of XD is being able to prototype and link pages with the buttons that you’ve created. I thought it would be fun to see the “road map” of my app in prototype mode! You can test all the buttons and links right from XD. I’m really finding this app very helpful and quite easy to learn!

Prototyping