From an idea to a tool that solves my everyday problems:
From an idea to a tool that solves my everyday problems:
HoverSpeed Chrome Extension
HoverSpeed Chrome Extension
It really annoys me
It really annoys me
When I can’t easily switch Youtube video speed.
When I can’t easily switch Youtube video speed.
What I Did:
What I Did:
UI/UX Design
Vibe Coding
Wireframe & Prototype
Fast Iteration
Usability Testing
UI/UX Design
Vibe Coding
Wireframe & Prototype
Fast Iteration
Usability Testing
Tools I used
Tools I used
Completed in
Completed in
1
1
Week
Week
Net Promoter Score
Net Promoter Score
8/10
8/10
People who’ve used it are happy to recommend it to others.
People who’ve used it are happy to recommend it to others.
Chrome Web Store
Chrome Web Store
5 ★
5 ★
The extension has earned a 5-star rating and positive reviews on the Chrome Web Store.
The extension has earned a 5-star rating and positive reviews on the Chrome Web Store.
The little problem has bothered me for a long time…
The little problem has bothered me for a long time…
The little problem has bothered me for a long time…
Because I’m busy with work and side projects, I don’t have time to watch full live NBA games. I watch a lot of highlights on YouTube, but I hate when they include non-game content.
Because I’m busy with work and side projects, I don’t have time to watch full live NBA games. I watch a lot of highlights on YouTube, but I hate when they include non-game content.
By non-game content, I mean team intros, stats, fan activities, and in-game interviews. When I watch highlights, I just want to see the game.
By non-game content, I mean team intros, stats, fan activities, and in-game interviews. When I watch highlights, I just want to see the game.
I have two ways to solve this problem, but each has its own disadvantages.
I have two ways to solve this problem, but each has its own disadvantages.
Progress Bar
I can use the progress bar to skip content, but it’s hard to do it precisely. Sometimes I overshoot and miss a few plays.
Progress Bar
I can use the progress bar to skip content, but it’s hard to do it precisely. Sometimes I overshoot and miss a few plays.
Adjust Video Speed
I can also adjust the video speed to skip parts I don’t want to watch. However, YouTube keeps the speed setting a bit hidden, and it’s hard to adjust quickly.
Adjust Video Speed
I can also adjust the video speed to skip parts I don’t want to watch. However, YouTube keeps the speed setting a bit hidden, and it’s hard to adjust quickly.
As a designer, I began thinking of a better solution.
As a designer, I began thinking of a better solution.
As a designer, I began thinking of a better solution.
For my first idea, I went wild. I thought about creating an AI tool that could review the whole video and skip all non-game content for me.
For my first idea, I went wild. I thought about creating an AI tool that could review the whole video and skip all non-game content for me.
But is it worth it?
But is it worth it?
But is it worth it?
While AI can help with many ideas today, not everything needs an AI solution. This is just a small daily issue, and it’s not worth the resources required to train an AI or analyze every highlight video I watch.
While AI can help with many ideas today, not everything needs an AI solution. This is just a small daily issue, and it’s not worth the resources required to train an AI or analyze every highlight video I watch.
I stepped back and thought about improving the current method: if adjusting the video speed takes a few clicks, how can I make it easier?
I stepped back and thought about improving the current method: if adjusting the video speed takes a few clicks, how can I make it easier?
I also looked into whether there were any tools to solve the problem, since I didn’t want to reinvent the wheel.
I also looked into whether there were any tools to solve the problem, since I didn’t want to reinvent the wheel.
I found many Chrome extensions that display speed controls in the video player, reducing the number of clicks.
I found many Chrome extensions that display speed controls in the video player, reducing the number of clicks.
I tried many of them, but I was still not satisfied. I don’t like having to click every time I need to change the speed, and it’s not smooth enough to switch between fast and normal speeds.
I tried many of them, but I was still not satisfied. I don’t like having to click every time I need to change the speed, and it’s not smooth enough to switch between fast and normal speeds.
That’s when I realized the key was ‘switching.’ I need something to help me quickly switch between speeds.
That’s when I realized the key was ‘switching.’ I need something to help me quickly switch between speeds.
My idea inspiration
My idea inspiration
My idea inspiration
I noticed the YouTube mobile app handles speed switching really well. You can press and hold to speed up playback, and it returns to normal as soon as you release.
I noticed the YouTube mobile app handles speed switching really well. You can press and hold to speed up playback, and it returns to normal as soon as you release.
I tried to think about how to replicate the same interaction in the browser.
I tried to think about how to replicate the same interaction in the browser.
I started from sketch:
Instead of clicking, hovering triggers the change, making switching faster and smoother.
I started from sketch:
Instead of clicking, hovering triggers the change, making switching faster and smoother.
With more details and color, I moved on to build the prototype by Cursor.
With more details and color, I moved on to build the prototype by Cursor.
From iteration to final launch
From iteration to final launch
From iteration to final launch
I conducted several rounds of usability testing and improved the prototype before launching it on the Chrome Web Store.
I conducted several rounds of usability testing and improved the prototype before launching it on the Chrome Web Store.
Issue
Issue
Improvements
Improvements
The position of the card blocks the video.
The position of the card blocks the video.
Made the card draggable so users can move it anywhere.
Made the card draggable so users can move it anywhere.
The CTA "Hover to speed up" was confusing since the extension also supports slowing down.
The CTA "Hover to speed up" was confusing since the extension also supports slowing down.
Changed the writing to "Hover to adjust speed".
Changed the writing to "Hover to adjust speed".
After enabling the extension, users can’t close the card.
After enabling the extension, users can’t close the card.
Added a close icon in the top-right corner.
Added a close icon in the top-right corner.
The card is too big for users.
The card is too big for users.
Added a minimize button to reduce the card size.
Added a minimize button to reduce the card size.
Users still want to use the feature in minimize mode.
Users still want to use the feature in minimize mode.
Added a hover control in minimized mode so users can still adjust speed.
Added a hover control in minimized mode so users can still adjust speed.
Let’s take a look at how the launched extension works:
Let’s take a look at how the launched extension works:
After launching the extension, I tested it with eight users.
After launching the extension, I tested it with eight users.
Net Promoter Score
8/10
8/10
Chrome Web Store
5 ★
5 ★
I’m glad I’m not just solving my own problem, but also creating a tool that makes other people’s lives more convenient.
I’m glad I’m not just solving my own problem, but also creating a tool that makes other people’s lives more convenient.
Reflection and what I've learned
Reflection and what I've learned
Reflection and what I've learned
I realized while building HoverSpeed that it can be used beyond non-game content, for example, helping users learn on YouTube by switching between normal speed and slow motion. It’s interesting how the same tool can solve different problems, and it encouraged me to design more solutions to support others’ daily life challenges.
I realized while building HoverSpeed that it can be used beyond non-game content, for example, helping users learn on YouTube by switching between normal speed and slow motion. It’s interesting how the same tool can solve different problems, and it encouraged me to design more solutions to support others’ daily life challenges.
When I first brainstormed solutions, I went too far and nearly lost sight of the original problem. Designers often get excited about new tech or trends, but it’s important to stay focused on the problem, the user, and whether the solution truly works.
When I first brainstormed solutions, I went too far and nearly lost sight of the original problem. Designers often get excited about new tech or trends, but it’s important to stay focused on the problem, the user, and whether the solution truly works.
It’s exciting to use vibe coding to turn ideas into reality and make them truly functional. I’m looking forward to seeing more creative products designers build in the future.
It’s exciting to use vibe coding to turn ideas into reality and make them truly functional. I’m looking forward to seeing more creative products designers build in the future.
More Projects
More Projects
More Projects
Ummi's Chef
Ummi's Chef
I redesigned a private chef website to improve information clarity and create a more engaging user experience.
I redesigned a private chef website to improve information clarity and create a more engaging user experience.
Dishionary
Dishionary
I created a mobile app that helps travelers understand foreign menus when literal translations of dish names are unclear.
I created a mobile app that helps travelers understand foreign menus when literal translations of dish names are unclear.
Let's connect 👋
chluan@iu.edu
CHIA LE LUAN
Let's connect 👋
chluan@iu.edu
CHIA LE LUAN