Golf Guru

Introduction

The Team

Timeframe

Tools

The Project

Design

Low-fidelity sketches and designs

Mid-fidelity prototype and A/B Tests

Usability Tests

Refining the design

Rewards Page

Development

Languages and Frameworks Used

Audio Preview Screen

  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.

Audio Player Screen

  • 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

Downloading Audios

Referral Screen

  • 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

Takeaways & Challenges

Cross-functional Teams

Applying Our Skills

Aligning Design/Development

Thank you!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store