Clay Nicolas

Portfolios today must be more than archives—they need to feel alive, intentional, and editorial by design.

Category:

Portfolio

Author:

Akihiko

Read:

10 Mins

Location:

Los Angeles

Date:

Jun 10, 2025

PROJECT OVERVIEW

This case study details the creation of LaneBreak, a gamified workout experience designed to increase user retention and engagement through music-driven immersion. By transforming traditional cardio into an interactive game, the project utilized
a "Habit Loop" psychology (Cue Routine Reward) to motivate users.

PROBLEM

How can Peloton design LaneBreak to enhance user engagement, maintain brand consistency, and ensure
seamless collaboration for a scalable, intuitive workout experience across platforms?

ROLE

Logic & Mechanics Design:

Situation: Standard leaderboards were insufficient for a gamified track where users played at varying difficulties (e.g., Beginner vs. Expert).

Task: Create a "Multiple Leaderboard" system that equitably ranks users based on their specific gameplay choices.

Action: Designed a segmented ranking logic that filtered users by difficulty level and "Moments" completed, ensuring users only competed against peers with similar handicaps.

Result: This fairness engine fostered healthier competition, directly contributing to a 15% increase in workout completion rates.

UI & Visual Feedback:

Situation: Users needed immediate, intuitive feedback on their performance relative to the pack without breaking their workout flow.

Action: Prototyped and finalized high-fidelity Figma UI for the "Post-Ride Leaderboard" and in-game scoring (0–3 star system), utilizing distinct visual cues for achievement tracking.

Result: The clear visual reward system drove repeated engagement, creating a "Habit Loop" that enhanced session duration by 20%.

Logic & Mechanics Design:

Situation: Standard leaderboards were insufficient for a gamified track where users played at varying difficulties (e.g., Beginner vs. Expert).

Task: Create a "Multiple Leaderboard" system that equitably ranks users based on their specific gameplay choices.

Action: Designed a segmented ranking logic that filtered users by difficulty level and "Moments" completed, ensuring users only competed against peers with similar handicaps.

Result: This fairness engine fostered healthier competition, directly contributing to a 15% increase in workout completion rates.

UI & Visual Feedback:

Situation: Users needed immediate, intuitive feedback on their performance relative to the pack without breaking their workout flow.

Action: Prototyped and finalized high-fidelity Figma UI for the "Post-Ride Leaderboard" and in-game scoring (0–3 star system), utilizing distinct visual cues for achievement tracking.

Result: The clear visual reward system drove repeated engagement, creating a "Habit Loop" that enhanced session duration by 20%.

Step 1

Research

Step 2

Ideate

Design

Step 3

Step 4

Prototype

Eyes
Triple Pose
Working Alone
Man Classic
Man Motion Blur

Making your portfolio a living system, not a final product:

Portfolios should evolve. They’re not static showcases—they’re design systems in motion. As your work grows, your site should adapt too. New sections, refined structure, bolder narratives. Every detail matters. From the opening headline to the spacing of a caption, every pixel has the opportunity to say something about you. A simple microinteraction can tell more about your care and thinking than a paragraph of explanation ever could. This is where presence lives—not in decoration, but in decision-making. And most importantly, a great portfolio feels unfinished in the best way possible—it leaves room for growth, for surprise, for evolution. Because portfolios should evolve as you do. They should adapt with your voice, shift with your interests, and expand with your ideas. Get more strategies on Akihiko Blogs.

© Visual Journal ジャーナル

(WDX® — 02)

Creative Notes

© Visual Journal ジャーナル

Creative Notes

© Visual Journal ジャーナル

Creative Notes

Who Am i?

Let's Find Out

Clarifications

Who Am i?

Clarifications

Who Am i?

Clarifications

FAQ.

Curiosity and Collaboration
is a lifestyle

01

What services do you offer?

02

What is your typical turnaround time?

03

Do you only work in Framer?

04

Can you handle both design and build?

05

Do you offer brand strategy too?

06

What’s your process like?

What services do you offer?

What is your typical turnaround time?

Do you only work in Framer?

Can you handle both design and build?

Do you offer brand strategy too?

What’s your process like?

What services do you offer?

What is your typical turnaround time?

Do you only work in Framer?

Can you handle both design and build?

Do you offer brand strategy too?

What’s your process like?