On The Green

A social network for golfers.

Overview

Context

On The Green is a responsive web application that allows users to track their golf games, connect with friends and join virtual communities of golfers. This is a hypothetical project created for my college course.

Problem

People who want to track their golf game often find it frustrating to carry a pencil and scorecard around with them. Additionally, after playing the scoresheet is frequently discarded and never seen again.

Goal

Create a responsive web application that allows users to track their golf game, allowing them to improve their game and share their progress and score with their friends.

Role

UX/UI Design

Competitor Analysis

I started this analysis with two main goals:

Examine what golf apps have to offer in terms of features and general user experience.
Identify what users like about these apps and what problems they encounter while using these products.

I focused on the below applications that were highly ranked and kept showing up in my research: Golfshot, Gramin Golf

After personally using these apps for a few days and looking at how these apps were marketed, ranked, and reviewed by users, I summarised my findings and defined what useful strategies and patterns could inform my design and where I could leverage missed opportunities.

DEFINING POV

User Persona

Before moving on to the ideation phase, I used my research findings to craft two user personas that would capture the essence of my target audience.

Cliodhna and Gemma acted as a touchstone during the following stages of the design process meaning that any design decision I took has been considered and evaluated from the perspective of these personas.

User Journey Maps

To further empathise with my potential users and shed light on real user experiences, I also mapped out some user journeys. Visualising the process my users would go through to accomplish a certain task (i.e. playing a round and posting the results) helped me better understand their motivations, thought processes, and the feelings they might experience as they move towards their goal.

Creating user journeys also helped me reflect on how my application could fit in within this behavioural and emotional context and identify opportunities for my product.

Ideate

Now that I had humanised my potential users through the creation of personas and user journeys, I started writing down user stories based on their real needs, aspirations, and mental models. This approach helped me define how to translate human necessities into functional requirements and ideate an app that would help users achieve their goals.

User Flows Diagram

With persona and user stories in hand, I started brainstorming ideas for the key functionality of my app. After all, features only matter if they solve a problem for our users, right?

As I was translating needs into functional requirements, I mapped out a user flow diagram to illustrate the primary actions that users could take within the app to complete their key objectives.

Reflecting on the different pathways that our users could explore through the app helped me not only visualise the step-by-step user interactions with my product but also structure the content of this experience. After considering various options for the information architecture, I defined the key screens and related content that I would need to include in my product.

Low-Fidelity Sketches

Using the user flow structure and paper prototyping techniques, I created some paper sketches for my app’s main screens. This helped me illustrate my high-level ideas, map out the layout of the pages and further define the features needed.

To design a responsive product, I adopted a mobile-first approach with progressive enhancement. Designing for mobile screen first, helped me focus on the core of the user experience and prioritize content before moving on to larger breakpoints.

Mid-Fidelity Wireframes

To flesh out my ideas a bit more, I transferred my sketches into a digital format and created mid-fidelity wireframes using Figma.

After choosing a layout grid to better organise my content, I started applying principles of visual hierarchy and spacing to my design. Gradually, I also started incorporating basic UI elements and patterns.

These mid-fidelity wires, which you can be seen below, provided the foundation to move on to the UI-focused stage of the project and thus start working on the graphic interface design.

Design

Typography

In line with the iOS and Material guidelines, I decided to stick to the default typography, San Francisco Pro and San Francisco Display for the iOS screens and Material’s Roboto for Android.

Colour Palette

I wanted to have a modern feel to the app. There is a prominent colour of blue used throughout most of the app. The background is in a shade of white to allow the images and card displays to pop out more and appear more eye-catching.