VPAR is live-scoring service that allows golfers to track their performance over multiple golf outings and game formats. It allows golfers to connect, compete and share their activities with other players. The app is available for iOS, WatchOS and Android. Unlike the iOS version of the app, the Android version of the VPAR app did not have a Courses section. The brief was to create new Courses section that allowed users to discover golf clubs in order to before they book or play rounds.
Skills: Stakeholder Interviews, Interface Design, Usability Testing, Comparative Analysis, Heuristic Analysic, Wireframing, Rapid Prototyping, Visual Design
In the research phase I interviewed stakeholders and did usability testing of the existing of the Courses section of the iOS app.I conducted competitor analysis and heuristic analysis of the current iOS app. User testing and interviews with golfers was key factor in identifying users goals and needs.
Old Courses Pages
We kicked off the project by examining the existing iOS app and talking to users about their experience discovering golf courses and what they look for when search for a course to play. The were many areas of the existing iOS experience that we felt we could improve for the user. These were around navigating course scorecards, ratings and reviews. At the same time VPAR wanted to introduce a new feature for booking tee times which would work alongside the courses screen as a web view.
Lo-fi Wireframes 1
Mid-Fi Wireframes 2
After talking with users the product team decided we would focus on key areas for exploration course and contact information, displaying scorecards and leaderboards and, searching courses, ratings and reviews. Initial wireframes looked at the main areas of the course screens and just how much information we needed to display. Based on user feedback we created a wireframe which had everything users told us they wanted. We then went through many round rationalizing and prioritizing content. Ratings and reviews was significantly reduced following this review.
After testing the designs with users we used the MOSCOW (what this new feature the Must have, Should have, Could have, Won’t have). Some users told us they played golf because they liked being outdoors and enjoying the scenery. Introducing large photographs of golf courses was one way we explored breaking up the heavy text based design of the iOS app.
Design the scorecard
The design of the scorecard was an important area of focus courses Golfers always want to know the difficulty level of difficulty of the course they want to play. Users for the scorecard screens clutters and confusing. They felt that the scorecard summary was “quite bland” with no colours to distinguish tees. In order to make these screen clearer, we made changes to the designs and attempted reduce the number of taps for users to get to the scorecard. For the scorecard screen, the felt that having to scroll across to see the rest of the scorecard (makes it difficult to compare)
The course details screen had summary of all courses to give users a snapshot for the courses. Our for scorecards re-introduced existing design featured on iOS and introduced cards that users can swipe action. The feedback from users about this interaction was positive.
Our next iteration focussed on getting users to the scorecard quickly and making the navigation simpler for users. This iteration took ways the summary of course distances and created a tab for scorecards from a list view. For the scorecards we introduced a ribbon style navigation which signposted each scorecard, and allowed users to swipe between each scorecard.
The final visual designs for the courses leveraged the existing features of courses and simplified the designs. The introduction of large images to the main courses screen gave a more personalized view of each club. Sure are now able to search, play or book a course through the app.