Michael Bugarin Content Design // UX Writing
© Michael Bugarin Content Design // UX Writing

Skateboard UI/UX

Bold design for unapologetic allies

1. low-fidelity "Fibonacci" wireframe

2. low-fidelity UI wireframe

3. hi-fidelity mock-up #1

4. hi-fidelity mock-up #2

5. physical prototype #2

Project Title

Protect Trans Kids Griptape


Client

Wasted 20s


Role(s)

UX researcher

UX designer

UX writer


Relevant Skills

user research

persona building

fidelity wire frames & hi-fidelity

mock-ups

content design

user testing


Software

MS Office Suite

Figma






Challenge


Help users effortlessly orient foot positions on a skateboard.


Solution


Design an intuitive grip tape UI.


My Process


* Collaborated with shareholders to articulate product goals, identify brand voice, and align on key messages.


* Researched users, empathize with their needs, and generated personas.


* Designed fidelity wireframes, hi-fidelity mock-ups, and physical product mock-ups.


* Incorporated user testing data and feedback into re-iterated designs.


* Wrote and re-iterated copy for clarity and brand alignment.



…this isn’t UX writing.

Grip tape is the sole point of contact between a skater and their board. Just as a user taps icons on a delivery app UI to successfully order food, a skater shifts their feet and body weight on the grip tape to successfully manipulate the board.


If there's a UI, then the UX design process can be applied to provide additional meaning and value to the user experience.

Why grip tape?

UX design and UX writing are problem-solving processes rooted in user empathy and advocacy. I am a cis male and will never truly understand what it means to be transexual. Unfortunately, the data speaks volumes to their experience. At the very least, I wanted to create a physical product that validates trans lives in a bold, unapologetic way.


I designed a grip tape UI because skateboards empower users to engage with their physical environment and those around them. Bystanders stop and stare. Security guards block off stair sets. Cops issue tickets. A skater doesn’t just exist in an environment, but fundamentally alters it. Trans advocacy messaging designed on grip tape communicates the user's core beliefs through action.

…but on a UX writing portfolio?

UX writing is a specialization of UX design. UX design doesn't necessarily need to be a good writer, but a content designer absolutely does.


Anybody can use a lot of words. This design has three. The challenge is choosing words that tell a story.

Discovery

A trans advocacy message is worthless if users don’t use it, so I began by learning more about the user and their needs.


I conducted in-person interviews at my local skatepark. I interviewed six voluntary participants aged 5-49, with three of the six participants aged 18-24. 


First, I asked participants a series of questions, including:


Have you created or purchased graphic grip tape before? Why or why not?


Do graphics play a role in your decision to purchase grip tape? Why or why not?


Does the layout of the graphic grip tape matter to you? Why or why not?


Next, I asked participants to rank the Wasted 20s design prototypes below and explain why.



1. Spooky Queen prototype

2. ACAB prototype

3. WGA ON STRIKE! prototype

(cont'd)

User interviews revealed the following:


4 out of 6 participants had created or purchased graphic grip tape before. 2 participants had drawn designs on their grip tape; 1 had purchased graphic grip tape; 1 had both purchased graphic grip tape and created their own grip tape using a felt marker.


0 out of 6 participants reported graphics played a role when purchasing grip tape. However, 3 out of 6 would consider purchasing graphic grip tape if they liked the design.


4 out of 6 participants reported grip tape layout mattered; 1 participant said they would never buy graphic grip tape because they found it “disorienting.”


When asked to rank their favorite prototype:


3 out of 6 participants chose ACAB as their favorite design prototype, citing the diagonal cut, “energy," and "strong message.”


2 out of 6 participants chose WGA ON STRIKE! as their favorite design prototype, citing the circle cut and “relevant” microcopy.


1 out of 6 participants chose SPOOKY QUEEN as their favorite design, citing the “cute” ghosts.


Define

A few behavioral patterns emerged from the user interviews:


- Younger participants expressed more interest in graphic grip tape than older participants.


- A majority of participants believed graphic grip tape could psychologically affect their skating.


- A majority of participants preferred designs with strong messaging.


Based on the interview data and behavioral patterns, I created two user profiles: Sara, 16, and Jose, 25.


Left: user persona #1 (photo credit: Cottonbro Studios – Prexels)

Right: user persona #2 (photo credit: Wendelin Jacober – Prexels)

(cont'd)

Next, I defined what made a layout "disorienting." I conceptualized this by breaking the word down.


Dis-orientating.


Orientation.


Skaters learn where to place their feet and shift their weight by referencing specific touch points on the grip tape. As with any UI, if a touchpoint is inconsistent or easily recognizable, the product will require greater cognitive burden and produce a less enjoyable experience.


I explored various foot positions for different tricks and looked for patterns. Based on my observations, I defined the UI touch points as the bolts, nose, and tail.

Touch points


Bolts: Besides being the most stable point on the board, the upper and lower bolt lines are where the board’s concave shape angles upward.


If the grip tape UI distorts the bolt line or distracts users from quickly identifying the bolts, the user could become frustrated or incorrectly set up for a trick and injure themselves.


Nose and Tail: On a typical popsicle shape deck, the nose is roughly half an inch longer than the tail. A poor UI that doesn’t effortlessly differentiate nose and tail may disorient users.

These orientation points may seem functionally negligible, but as one interview participant commented:


"Skaters will argue for hours over a quarter inch of wood."




(cont'd)

Finally, I defined my challenge statement:


Users want a grip tape UI that is intuitive, appropriate for all ages, and reflects skate culture.


Ideate

I ideated solutions by breaking down the challenge statement and revisiting the project goal.


Users want an intuitive UI.


Solution: Design a UI layout that emphasizes the bolts and differentiates the nose and tail.


Users want a UI appropriate for all ages and reflective of skate culture.


Solution: Create accessible yet impactful visual elements to delight users.


Microcopy must be visible from five feet away.


Solution: Choose concise words with as few characters as possible.

UI Layout


I ideated various UI layouts by re-examining my qualitative user research data. Specifically, participants enjoyed the respective diagonal and circle grip cuts of the ACAB and WGA ON STRIKE! designs, so I chose to utilize those elements.


I placed the diagonal line between the upper and lower bolt lines so the bolts were still instantly recognizable.


To differentiate nose and tail, I lowered the diagonal line 1.0" from the bolt line to give the nose greater visual weight. Since the distance between bolts is approximately 2.25," I achieved this while respecting the bolt line.


Since the circle cut would contain the microcopy, I placed the circle cut in the top half of the board. When standing upright, the microcopy would be oriented correctly now.


To determine the precise location of the circle cut, I wire framed the UI using the Fibonacci sequence, or “golden ratio,” as a reference. I chose the golden ratio because it’s a timeless, intuitive design pattern well suited to the asymmetrical diagonal cut.


Finally, I placed the graphics on the tail to complete the golden ratio pattern.



Imagery


I decided to limit imagery to a single graphic, the Wasted 20s logo, and a background fill to avoid cluttering the UI.


I chose the iconic “clenched fist” graphic because while the image is easily recognizable and appropriate for all ages, its history as a resistance symbol could provide knowledgeable users with additional value.


I also inverted the fist and Wasted 20s logo on tail to create a responsive UI. For example, if a user performs a trick that rotates the board 180 degrees, the visible UI will still appear oriented correctly. I incorporated this “hidden interaction" to improve the UX by rewarding users for challenging themselves.


Microcopy


I ideated several trans advocacy messages, including "Trans Rights are Human Rights," "Trans Rights Now," and "Save Trans Lives," but I felt these phrases were too long and did not connotate a specific action.


I decided on Protect Trans Kids. I chose this phrase because it is relatively short: fifteen characters. "Protect" versus "save" connotates strength, moral authority, and specific user action.


"Kids" versus "youth" or "children" is more casual, and user research suggested even older, intimidating skaters felt protective of children.


Finally, like the closed-fist image, Protect Trans Kids is a well-established, instantly recognizable phrase.



Prototype #1

I assembled the prototype by layering a combination of hand-cut black and transparent grip tape laid over vinyl stickers on an 8.5" x 32" popsicle shape deck.


Left: Hi-fidelity mock-up #1

Right: Physical prototype #1

Testing

I returned to the skatepark to test to determine the visual fidelity of the microcopy and whether the UI design was distracting. Over two days, I conducted five tests with five participants.


First, I asked participants to read the microcopy from five feet away. Then, I asked participants to use the board. Finally, I asked participants for general feedback and whether they found the design distracting.


Only 1 participant out of 5 could correctly identify the microcopy from five feet away. Additionally, this participant admitted it was an educated guess.


5 out 5 participants found the UI intuitive, but 2 out of 5 felt the image proportions were off. One participant commented the clenched fist and logo appeared “thrown on.”

Iteration

Based off the testing data, there were two problems to solve for the redesign.


Microcopy has low visual fidelity.


Solution: Create a increase the size of the microcopy container, increase the size of the font, and increase the spacing between letters.


Images lack cohesion.


Solution: Re-proportion the images and alter the color scheme.

Microcopy

I ideated several solutions to improve the microcopy's visual fidelity, including changing the font, font size, orientation, and letter spacing. Since testing data suggested the visual fidelity problem was due to how the content was designed rather than the copy, I kept the phrase Protect Trans Kids.


I changed the font from Acme, a sans serif font, to Bahloo Bhai, a sans font, for easier readability. I also increased font size by 60% and letter spacing by 15% for each character to improve readability.





Intentional UI “mistake”


Increasing the font size and letter spacing meant I needed to increase the container size. However, this presented additional challenges.


The right container border was already 0.5" from the left UI boundary, and reducing the surface area of the black grip tape by decreasing the margins would risk the grip tape’s structural integrity. To further complicate matters, shifting the container to the left meant the container would fully cover the bolts and risk disorienting the user.


To solve this, I chose to increase the container diameter from 3" to 5" and intentionally clip 0.5" from the right-side container boundary. Incorporating this intentional “mistake” not only allowed me to increase the container size without entirely obscuring the bolts, but it would elevate the asymmetrical design and draw the users eye to the clipped container.



Visual Hierarchy


To improve the cohesiveness of the images, I chose to emphasize the weight of the fist by incorporating visual hierarchy into the design. I increased the size of the clenched fist by 50% and decreased the size of the Wasted 20s logo by 30%.


Additionally, I changed the logo's color scheme from black, white, and red to black, white, and pink so the logo would blend into the background.


Finally, I shifted the logo's position to the bottom base of the fist. Combining the images eliminated the distracting negative space between the images for a more cohesive design.




Prototype #2

After re-iterating my wireframes, I assembled the 2nd physical prototype.

Left: Hi-fidelity mock-up #2

Right: Physical prototype #2

Testing #2

I returned to the skatepark for a 2nd round of testing to determine whether the re-design improved the design’s visual fidelity. I tested four new participants using the same methodology as my first round of testing.


- 4 out of 4 participants successfully identified the microcopy from five feet away.


- 4 out of 4 participants enjoyed the design. One participant said they felt the message was "important."

Conclusion & Next Steps

By applying the UX design process to skateboard grip tape, I successfully created a product that added value to the user experience and communicated trans ally-ship to the user's environment through action.


I would conduct additional rounds of user research and testing to continue re-iterating and improving on the design.


Admittedly, interviewer bias may have affected user research and testing data. Since most participants previously recognized me at the park, it's possible participants withheld valid criticisms to avoid hurting my feelings. To solve this, I would conduct further research and testing at a different skatepark and attract a larger user pool with nominal incentives like gift cards.



1. low-fidelity "Fibonacci" wireframe

2. low-fidelity UI wireframe

3. hi-fidelity mock-up #1

4. hi-fidelity mock-up #2

5. physical prototype #2

Thanks for reading!

Want to see more UX grip tape designs? Follow me @wasted.20s.