Golf Guru

Winter/Spring 22 Industry Project

Introduction

The blueprint to becoming a successful athlete is very straightforward: dedicate years toward improving one’s sports-specific physical skills. However, there is a popular question: what separates athletes such as Tiger Woods, LeBron James, Tom Brady — the greatest players to play their respective sport — from the rest of the group? In other words, what do they share in common? The answer is simple, yet more than 90% of athletes neglect this skill, which is why they are only successful but never are able to achieve the highest ranks of their sport.

This skill is the mental game, which is measured through an athlete’s mental approach to their sport and being able to deliver some of their career-best performances during the highest-pressure situations when their entire team and fanbase are relying on them. Only a handful of athletes are capable of this and those are the same athletes that are remembered, not only in their sport’s history books, but also in every fan’s heart. This is the problem Golf Guru is aiming to solve, in hopes of molding more Golfers into reaching the highest ranks of the Golf history books. Golf Guru is a mobile app, available on iOS and Android, targeted towards improving the mental aspect of golfers through audio guides, helping them to stay focused and calm in “clutch” moments. Our tasks predominately consisted of creating the “core” features of the product, audio preview screen, audio player screen, downloading audio, and the referral system to promote organic growth.

The Team

Srikar Yantra (Project Manager)
Caden Newton (Developer)
Samuel Li (Developer)
Zhongning (Tommy) Li (Developer)
Briana Lozano (Designer)
Cody Mak (Designer)

Timeframe

Jan–May 2021 | 15 weeks

Tools

Figma
Dart
Flutter
Go

The Project

Design

On the design end, our project was centered around reimagining parts of Golf Guru’s existing product. We were initially tasked with redesigning the application’s audio feature, so we wanted to focus on creating an intuitive and cohesive experience for the user to easily navigate and understand.

Low-fidelity sketches and designs

After being given the necessary information and content to include on the audio pages, we produced simple sketches to visualize our ideas. We initially included new concepts for a more personalized home page and onboarding flow, but with our time constraints, we were instructed to keep our focus on the audio pages.

Mid-fidelity prototype and A/B Tests

In order to give the developers on our team an initial structure to work with, we transitioned from our static designs to a functioning prototype fairly quickly. From there, we were tasked with implementing an updated design system that could bring the app closer to a more modern and clean look. In order to gauge how well they would be received, we conducted rounds of A/B tests with our new design system ideas as well as Golf Guru’s initial design system. From these tests, we found an overwhelming desire for dark UI with some of Golf Guru’s signature green colors.

Usability Tests

With our new design system implemented on our audio pages, we conducted usability tests in order to see if our design was intuitive and cohesive. We found that users could easily navigate through the prototype and understand the information that was presented to them, but noted two main areas of confusion: the progress circle and skill focus icons.

With the progress circle, we observed users’ confusion with its purpose and also instances where users would tap on the circles in an attempt to move onto the next screen. To address this, we turned the circle into a bar so that users could easily track their progress and session’s status of completion.

For the skill focus icons we implemented pop-ups to clarify what they meant, as we found that users tried to tap on the icons to learn more after not being able to identify their significance immediately.

Refining the design

After presenting our usability test findings and our ideas to our client, we received approval for our design and our proposed changes. From here, we handed off the refined prototype to our developers and waited for our next task.

Rewards Page

For our next and final task, our client presented us with the idea of creating a rewards page. This page would incentivize users to engage with the app and share it with their friends to earn prizes. As this was an entirely new concept for the Golf Guru application, we began by reviewing the required content and creating sketches to visualize our ideas.

With around two weeks left at this point, we needed to transition from sketches to a functioning high-fidelity prototype very quickly. After applying our updated design system, we conducted usability tests to gauge the intuitiveness of our designs and whether or not the concept shone through. While users could navigate through the design without issue, we noted their confusion around the personal code section as we initially did not provide adequate enough feedback that the code was successfully copied to their clipboard. With this insight, we iterated on the design to arrive at our final solution that we could pass on to our developers.

Development

Languages and Frameworks Used

Dart and Flutter: Dart and Flutter are used together to develop cross-platform mobile apps

Go: used to develop server back-ends

Audio Preview Screen

This screen allows the user to see a preview of the audio track they are about to listen to. It contains a short description of what this track is about, the length of the track, and which attributes it will help the user improve. They can also see if their favorite voice actor is voicing the track.

UI

The rendering logic is as follows:

1. In the build() method, call the API first.
2. Convert it into the view model with a helper function. Handle the api errors here if the API response code is not 200.
3. Pass the complete view model into a helper function called _inflatePageContent and let it render the full UI. It accepts the view model as its argument and renders the UI based on the data in it.
4. Check if the user is a member. If the user is not a member, lock the play button and show a hint at the end to prompt them to join.

This data flow ensures that there’s only a single source of truth and decouples the rendering logic from the API call. If the API call fails, the render method will render an error screen accordingly and throw an exception.

Navigation

After the user taps on the play button, the app will navigate to the audio player screen. The audio player requires the audio link to call the corresponding API, so we used Navigator.pushNamed to carry the data over as the screen switches.

Audio Player Screen

First, the front-end of this screen was developed. The image, title, and audio clip is data passed down to this screen from the previous screen. Some important widgets, or Flutter components that are used to create user interfaces, are explained below.

• Stack Widget: this widget was used to overlap the image with the buttons, title, and slider
• ImageFiltered and Image Widget: these widgets made the background image fit the full screen of the phone and blurred the image
• Animated Container Widget: this widget was used to animate the more button on the top right of the screen, making it smoothly expand when pressed

Audio playing logic

The Just Audio package was installed, providing an AudioPlayer class that allows the app to play, pause, and skip through audio clips. The progress bar that shows how far into the audio the user has been through is implemented by listening to the position property of the AudioPlayer class and updating accordingly. The progress bar and buttons can be interacted with, calling AudioPlayer class functions in order to manipulate the position and state of the audio.

Syncing audio with the audio bar

An audio bar showing the current audio that is playing is displayed at the bottom of the app when the user is not on the audio player screen. The audio from the audio player screen must be synced with this audio bar. To do that, a singleton was implemented. A singleton is a class that is only instantiated once. Both the audio player screen and the audio bar component references a singleton class that contains dynamic properties of the audio that is playing or most recently played. Since they both reference the same class, the position displayed on the audio bar and on the audio screen is the same at all times.

Downloading Audios

One of the features that needed to be created for the app was the audio download feature. This feature allows users to download audio to local storage so that it can be played offline. To do this the flutter downloader package was installed. This package allowed the app to download the audio and image files separately. The app then creates a json file that contains the local storage paths of the downloaded audio and image files as well as the title and description of the audio. The app uses this json file to recreate the audio player screen when playing audios offline.

Referral Screen

Winter/Spring 2022: Golf Guru Demo

The front-end of the referral screen was developed in the last 2 weeks of the Winter/Spring term. A few important widgets unique to this screen were used.

• Animated List Widget: this widget is used to animate the deletion of a reward from the list of rewards
• SvgPicture Widget: this widget allows the app to display a custom icon (stored locally as an svg file) which was used to show the wrapped present on the reward button

Referral Screen Back-end

The back-end of the referral screen was discussed in the last 2 weeks of the Winter/Spring term, but because of a few issues, this could not be completed. However, the overall data flow and general ideas were already formulated.

The back-end is run by GoLang and also the framework terraform. There, Go is able to manage a database and run “lambda” functions (not actual lambdas, just callbacks) that can then manage the database and respond to HTTP API calls. The data flow is relatively simple, as the User object is updated to reflect which users have been referred by a user and also which user another user was referred by. That way, whenever the rewards page requests the list of rewards, the system can update which rewards can be claimed/not claimed/already claimed.

Takeaways & Challenges

Cross-functional Teams

The biggest takeaway and learning experience gained through CodeLab and our work with Golf Guru was the opportunity to work with a cross-functional team of a Project Manager, Designers, and Developers. This helped replicate the real-world industry lifestyle as all three roles have to work in strong cohesion together, to ultimately produce the best possible work for the client.

Applying Our Skills

Another important takeaway from the Winter/Spring 2022 CodeLab cohort was the golden chance to apply the conceptual knowledge learned in classes into real-world applications. An apparent issue with school is that in every class, students are taught concepts extensively, but they aren’t given a proper chance to actually apply these concepts to the real world. However, with Golf Guru, all members were able to use their knowledge to help build an app that has immense real-world application and will serve to help many athletes around the world.

Aligning Design/Development

An important challenge our team faced during the beginning of the CodeLab cohort was finding a way to keep the developers occupied while the designers were working on the initial sketches. To combat this, instead of waiting on the designers to complete their Hi-Fi sketches and then pushing those designs for the developers to code, the developers were actively working with the designers from the start by implementing the Lo-Fi designs as a “skeleton structure” to allow them to build out the back-end for the specific features. From there, as the designers continued improving the designs, the developers updated the designs to the codebase, and the entire team was working together to help provide feedback in any way possible to improve the designs.

Thank you!

We would love to thank CodeLab and Golf Guru, specifically Andy Renton (co-founder of Golf Guru), for the golden opportunity they provided us and for allowing us to produce value in helping to create a real-world application!