Arjun

Rangi

Home

Profile

Branding Studies

EA - PGA 23

Overview

Swing-card Interface

Score-card Interface

EA PGA 2023

In this case study, I redesigned the swing card by refining alignment, spacing, font consistency, and emphasis on key elements to create a more cohesive, balanced, and visually engaging interface.

Timeline

October 2024

Tools

Figma, Framer

Disciplines

Human Interface Design

Interaction Design

Visual Design

UX Design

Score-card Interface

In reviewing the score card, I identified areas where visual consistency could improve readability and flow. For example, I noticed inconsistent fonts across the hole number, yard count, and shot count, which disrupted the card’s harmony. To fix this, I applied a single, uniform font to create a cohesive look.

Additionally, the shot count’s double-bordered, high-contrast design felt too bold, so I opted for a single, thinner border and a softer background colour for a more refined emphasis. These design decisions enhance the card’s readability and provide a balanced, polished appearance.

original

designed

Problems - Current Design

[ 1 ]

Redundancy Issues

The shot count is highlighted with a white background and a double-bordered circle. While emphasizing the shot count is important, it could be done in a more subtle and refined manner.

There are minor spacing inconsistencies with the numbers, which I aim to address in my new design.

[ 2 ]

Inconsistent Fonts

The fonts for the hole number "4th," yard count "475," and shot count "1, 2, 3, 4" were previously inconsistent. By using a uniform font across these elements, I’ve created a sense of harmony and cohesion throughout the card. This consistency enhances readability and gives the design a more polished, balanced look.

Solutions - New Design

[ 1 ]

Redundancy Issues

To create a more subtle emphasis on the shot count, I adjusted the design by removing the circular border, and opting for a white background instead. This approach maintains focus on the shot count while blending it more harmoniously with the rest of the card's design.

[ 2 ]

Inconsistent Fonts

To address the font inconsistency, I applied a single, uniform font style across the hole number, yard count, and shot count. Choosing a font that is both clear and visually compatible with the overall design creates a cohesive look and enhance readability.

Designed Card in Gameplay

32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
475
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
200
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
25
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
5
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
475
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
200
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
25
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
5
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
475
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
200
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
25
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
5
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
475
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
200
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
25
Y
1
2
3
4
32
ND
PLACE
4
HOLES
LEFT
OPEN
WOODS
E
4
TH
5
Y
1
2
3
4

Swing-card Interface

To identify areas for improvement, I analyzed the existing interface, focusing on alignment, spacing, and consistency. I pinpointed misalignments, inconsistent sizing, and uneven spacing, asking targeted questions to guide my critique. In exploring a new interface, I experimented with centering, resizing icons, and adjusting text styles for balance.

Each design decision was made to enhance clarity, improve symmetry, and create a more cohesive look. By iteratively testing these adjustments, I arrived at a refined layout that feels both functional and visually harmonious.

original

designed

Tee

Box

405

DRIVER

normal

Problems - Current Design

[ 1 ]

Alignment Issues

The alignment of the text "Driver" and "Normal" relative to "Tee Box" is off. creating misbalance

The icon for "Driver" also doesn’t align perfectly with the "Tee Box" icon beneath it, which creates a slight misbalance.

[ 4 ]

Icon Uniformity

The row of icons across the center appear uneven in spacing and size. Consistent spacing between each icon and ensuring they’re of uniform size would create a cleaner and more professional look.

[ 2 ]

Icon Size & Spacing

The "Driver" icon seems to be relatively small, leaving unused space below it, which could be put to good use.

[ 5 ]

Padding & Spacing

The distance between the "Driver" text and the icon row is different from the spacing between the icon row and the "Tee Box" section. Consistent vertical padding would improve the structure.

The right side is also misaligned with the left when borders are added.

[ 3 ]

Readability of Symbols

Some of the icons in the row (especially the thin-lined ones) may not be easily recognizable, especially if the card is viewed from a distance. Slightly thickening the lines or adding subtle backgrounds could enhance clarity.

[ 6 ]

[ 1 ]
Alignment Issues
The alignment of the text "Driver" and "Normal" relative to "Tee Box" is off. creating misbalance

The icon for "Driver" also doesn’t align perfectly with the "Tee Box" icon beneath it, which creates a slight misbalance.
[ 2 ]
Icon Size & Spacing
The "Driver" icon seems to be relatively small, leaving unused space below it, which could be put to good use.
[ 3 ]
Readability of Symbols
Some of the icons in the row (especially the thin-lined ones) may not be easily recognizable, especially if the card is viewed from a distance. Slightly thickening the lines or adding subtle backgrounds could enhance clarity.
[ 4 ]
Icon Uniformity
The row of icons across the center appear uneven in spacing and size. Consistent spacing between each icon and ensuring they’re of uniform size would create a cleaner and more professional look.
[ 5 ]
Padding & Spacing
The distance between the "Driver" text and the icon row is different from the spacing between the icon row and the "Tee Box" section. Consistent vertical padding would improve the structure.

The right side is also misaligned with the left when borders are added.
[ 6 ]
Font Size
There seems to be a disparity in font sizes between different parts of the card. Consistent font sizes, or at least a clear hierarchy, could make the text easier to read and visually harmonious.

Solutions - New Design

[ 1 ]

Alignment Issues

I ensured "Driver" and "Normal" are vertically aligned with "Tee Box," creating a unified and harmonious look. This adjustment improves the card’s symmetry.

The "Driver" icon and the "Tee Box" icon are now aligned vertically, making the layout cleaner and more structured.

[ 4 ]

Icon Uniformity

I reorganized the "Tee Box" label, yardage, and distance in a symmetric layout. Placing them on a horizontal line with connecting elements enhances the flow and visually ties the elements together.

[ 2 ]

Icon Size & Spacing

I increased the size of the "Driver" icon, making it more prominent in the available space. This larger icon commands attention as a primary element, indicating the current club in use.

[ 5 ]

Padding & Spacing

I placed the "Tee Box" label and distance to hole on opposite sides of the line to create a clear, balanced layout. This makes the information easy to read at a glance, reinforcing the purpose of each element.

The right side is now perfectly aligned with the left.

[ 3 ]

Readability of Symbols

I aligned the 7 shot icons horizontally with even spacing to provide a clean look and optimize space. This arrangement ensures each icon is easy to distinguish while maintaining visual balance with the "Driver" club display.

The right side is also now perfectly aligned with the left. Same with the top to bottom.

[ 6 ]

[ 1 ]
Alignment Issues
I ensured "Driver" and "Normal" are vertically aligned with "Tee Box," creating a unified and harmonious look. This adjustment improves the card’s symmetry.

The "Driver" icon and the "Tee Box" icon are now aligned vertically, making the layout cleaner and more structured.
[ 2 ]
Icon Size & Spacing
I increased the size of the "Driver" icon, making it more prominent in the available space. This larger icon commands attention as a primary element, indicating the current club in use.
[ 3 ]
Readability of Symbols
I aligned the 7 shot icons horizontally with even spacing to provide a clean look and optimize space. This arrangement ensures each icon is easy to distinguish while maintaining visual balance with the "Driver" club display.

The right side is also now perfectly aligned with the left. Same with the top to bottom.
[ 4 ]
Icon Uniformity
I reorganized the "Tee Box" label, yardage, and distance in a symmetric layout. Placing them on a horizontal line with connecting elements enhances the flow and visually ties the elements together.
[ 5 ]
Padding & Spacing
I placed the "Tee Box" label and distance to hole on opposite sides of the line to create a clear, balanced layout. This makes the information easy to read at a glance, reinforcing the purpose of each element.

The right side is now perfectly aligned with the left.
[ 6 ]
Font Size
I added consistent font sizes to all words and numbers, illustrating a clear hierarchy, making text easier to read and visually harmonious.