Overlap
CLIENT
Studential Project
DESIGN FIELD
UI, UX (Web Design)
YEAR
2026
Explore Prototype
The Brief
Reimagine Shazam as a new product inspired by a chosen personality. I chose Benny Blanco, a Jewish-American record producer known for his colorful personal style and his philosophy that creativity is built on enjoyment, authenticity, and human connection. Those two things, his aesthetic and his process, became the foundation of this project
Benny Blanco
Deep Research
Benny Blanco is a jewish american record producer, one of the best producers in the world, until his 20's, he produced 29 songs that went on to become 1st place in the charts, only a few producers besides Blanco achieved that at this age. Blanco believes that true creativity comes for enjoyment, authenticity and not being afraid to fail from time to time. His humane approach to music and producing has led him to be happy, authentic and loved in the entertainment industry
Concept
The idea is to create a Shazam that can identify both songs and food recipes. From those two clips, I came to understand that the food plays a huge role in Blanco's process, therefore should be a main feature in my app aswell.
In addition, there's a twist in the identifying system. When trying to identify a song/recipe, you get a fitting option from the other feature, to resemble the concept that Blanco goes with, which is that food and music goes hand in hand.
from: "Behind The Wall", a podcast hosted by Daniel Wall
38:59 - Blanco talks about the first session with a new artist
50:03 - Blanco talks about why food matters
Market Analysis
Shazam, SoundHound, and MusicID are all built around the same core mechanic - Tap, Identify, Done.
Shazam leads in UX clarity, Everything is large, legible, and impossible to misread. But all three share the same weakness - no personality. They are transactional by design, and once the song is identified, the experience ends.
Shazam
SoundHound
MusicID
Userflow
Much like Shazam, the idea was to create an intuitive approach minimalistic approach to the flow.
Enter the app - press on a button and get results, immediately.
Wireframes
Home
Scanning
Song Match
Design System
Logo, Symbol and Name
Thinking
Overlap was designed to represent this constant intersection between food and music. The logo's visual language draws direct inspiration from this idea, featuring circles that are cut and reconnected, with all shapes overlapping one another.
Typography
Plus Jakarta Sans
WHAT IS THE REASON BEHIND THE DECISION?
Plus Jakarta Sans is a geometrical font where sharp lines are softened by subtle curves. These shape resemble the app’s core visual patterns. As a result, the typography never competes for the user's attention, but rather works in harmony to seamlessly complement the overall interface.
World Overlays
Headline I
Recia
Bold
24pt
Nickname
Plus Jakarta Sans
Regular
18pt
Labels
Recia
Regular
13pt
Content
Body
Plus Jakarta Sans
Regular
16pt
Body II
Plus Jakarta Sans
Regular
14pt
Micro Body
Plus Jakarta Sans
Regular
13pt
Iconography
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 22 24" xmlns="http://www.w3.org/2000/svg"><path d="M 2.459 0 L 2.459 24 L 0 24 L 0 0 Z" fill="rgb(0, 0, 0)" height="24px" id="UY2eSe2Dc" transform="translate(1.437 0)" width="2.4594894574860127px"/><path d="M 2.459 0 L 2.459 24 L 0 24 L 0 0 Z" fill="rgb(0, 0, 0)" height="24px" id="NdT7sxW46" transform="translate(10.103 0)" width="2.459499082347346px"/><path d="M 2.459 0 L 2.459 24 L 0 24 L 0 0 Z" fill="rgb(0, 0, 0)" height="24px" id="fCjPJlyCg" transform="translate(18.104 0)" width="2.459499082347346px"/><path d="M 0 0 L 5.333 0 L 5.333 5.26 L 0 5.26 Z" fill="rgb(0, 0, 0)" height="5.260255233505441px" id="ZmQxAldMy" transform="translate(0 5.918)" width="5.333314668999423px"/><path d="M 0 0 L 5.333 0 L 5.333 5.26 L 0 5.26 Z" fill="rgb(0, 0, 0)" height="5.260302404336574px" id="LkjYirhcc" transform="translate(8.667 15.123)" width="5.333314668999424px"/><path d="M 0 0 L 5.333 0 L 5.333 5.26 L 0 5.26 Z" fill="rgb(0, 0, 0)" height="5.260302404336569px" id="tGOWjiEXR" transform="translate(16.667 9.205)" width="5.333314668999424px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0 8.077 L 0 20 L 3.434 20 L 3.434 10 L 9.616 4.615 L 15.111 10 L 15.111 20 L 18.545 20 L 18.545 8.077 L 9.616 0 Z" fill="rgb(0, 0, 0)" height="20px" id="rQj8AHjuE" transform="translate(3 2)" width="18.54545454545456px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 17.006 0 L 17.006 3.209 L 5.126 3.209 L 17.896 17.895 L 15.475 20 L 3.209 5.894 L 3.209 19.316 L 0 19.316 L 0 0 Z" fill="rgb(0, 0, 0)" height="20px" id="DcRjoKbOm" transform="translate(3 2)" width="17.8957845613603px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 18.039 14.33 L 18.039 0 L 5.505 3.103 L 5.505 14.746 C 5.505 14.746 4.941 14.059 3.311 14.059 C 3.311 14.059 0 14.048 0 17.048 C 0 17.048 0.034 20 3.416 20 C 3.416 20 6.737 19.938 6.769 17.032 L 6.769 6.957 L 16.781 4.473 L 16.781 11.924 C 16.781 11.924 16.013 11.284 14.618 11.284 C 14.618 11.284 11.277 11.242 11.277 14.281 C 11.277 14.281 11.101 17.209 14.778 17.209 C 14.778 17.209 17.739 17.282 18.039 14.33 Z" fill="rgb(0, 0, 0)" height="20px" id="Mrp8FeHKK" transform="translate(3 2)" width="18.039215686274588px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 20 L 0 0 L 17.647 0 L 17.647 20 Z M 17.647 15.705 L 0 15.705 L 0 20 L 17.647 20 Z M 17.647 9.532 L 0 9.532 L 0 13.827 L 17.647 13.827 Z M 10.988 0 L 6.659 0 C 2.981 0 0 3.016 0 6.735 L 0 7.655 L 17.647 7.655 L 17.647 6.735 C 17.647 3.016 14.666 0 10.988 0 Z" fill="transparent" height="20px" id="GWo1JTRT7" transform="translate(3 2)" width="17.64705882352939px"><path d="M 0 20 L 0 0 L 17.647 0 L 17.647 20 Z" fill="transparent" height="20px" id="iXKr9ggIJ" width="17.64705882352939px"/><path d="M 17.647 0 L 0 0 L 0 4.295 L 17.647 4.295 Z" fill="rgb(0, 0, 0)" height="4.295333333333318px" id="cPI4BV3PH" transform="translate(0 15.705)" width="17.64705882352939px"/><path d="M 17.647 0 L 0 0 L 0 4.295 L 17.647 4.295 Z" fill="rgb(0, 0, 0)" height="4.2953725490196035px" id="aj2dOfNO7" transform="translate(0 9.532)" width="17.64705882352939px"/><path d="M 10.988 0 L 6.659 0 C 2.981 0 0 3.016 0 6.735 L 0 7.655 L 17.647 7.655 L 17.647 6.735 C 17.647 3.016 14.666 0 10.988 0 Z" fill="rgb(0, 0, 0)" height="7.654784313725486px" id="OIgsnwGCQ" width="17.64705882352939px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 20.001 L 0 0 L 20 0 L 20 20.001 Z M 1.59 10 C 1.59 14.645 5.355 18.411 10 18.411 C 14.645 18.411 18.41 14.645 18.41 10 C 18.41 5.356 14.645 1.59 10 1.59 L 10 0.064 C 15.488 0.064 19.937 4.513 19.937 10 C 19.937 15.488 15.488 19.937 10 19.937 C 4.512 19.937 0.063 15.488 0.063 10 Z M 9.993 0.064 C 10 0.064 10.006 0.064 10.011 0.064 C 10.013 0.064 10.015 0.064 10.016 0.064 C 10.017 0.064 10.018 0.064 10.019 0.064 L 10.019 0.064 C 10.02 0.067 10.019 0.108 10 0.827 C 9.981 1.549 9.98 1.588 9.98 1.59 L 9.934 1.59 C 9.898 1.59 9.842 1.59 9.768 1.593 C 9.619 1.598 9.4 1.61 9.13 1.64 C 8.588 1.699 7.85 1.828 7.066 2.1 C 5.499 2.644 3.801 3.736 3.01 5.97 L 1.572 5.461 C 2.567 2.65 4.723 1.298 6.565 0.659 C 7.484 0.34 8.339 0.192 8.963 0.123 C 9.276 0.089 9.534 0.074 9.716 0.067 C 9.807 0.064 9.88 0.063 9.931 0.063 C 9.957 0.063 9.978 0.063 9.993 0.064 Z M 2.004 1.2 L 2.004 5.367 L 6.212 5.367 L 6.212 6.893 L 0.478 6.893 L 0.478 1.2 Z M 10.216 4.475 L 10.216 10.649 L 14.297 10.649 L 14.297 12.175 L 8.69 12.175 L 8.69 4.475 Z" fill="transparent" height="20.000538461538497px" id="F5ddCAIu5" transform="translate(2 2)" width="20px"><path d="M 0 20.001 L 0 0 L 20 0 L 20 20.001 Z" fill="transparent" height="20.000538461538497px" id="XJmlUzahl" width="20px"/><path d="M 1.526 9.937 C 1.526 14.581 5.292 18.347 9.937 18.347 C 14.581 18.347 18.347 14.581 18.347 9.937 C 18.347 5.292 14.581 1.526 9.937 1.526 L 9.937 0 C 15.424 0 19.873 4.449 19.873 9.937 C 19.873 15.424 15.424 19.873 9.937 19.873 C 4.449 19.873 0 15.424 0 9.937 Z" fill="rgb(0, 0, 0)" height="19.873032307692384px" id="fAv52Cj6L" transform="translate(0.063 0.064)" width="19.873061923076875px"/><path d="M 8.421 0 C 8.428 0 8.434 0.001 8.439 0.001 C 8.441 0.001 8.443 0.001 8.445 0.001 C 8.445 0.001 8.446 0.001 8.447 0.001 L 8.448 0.001 C 8.448 0.003 8.447 0.045 8.428 0.764 C 8.409 1.486 8.408 1.524 8.409 1.526 L 8.363 1.526 C 8.327 1.527 8.27 1.527 8.196 1.529 C 8.047 1.534 7.828 1.547 7.558 1.576 C 7.016 1.636 6.278 1.765 5.494 2.037 C 3.928 2.581 2.229 3.673 1.439 5.907 L 0 5.398 C 0.995 2.587 3.152 1.235 4.993 0.595 C 5.913 0.276 6.767 0.128 7.391 0.06 C 7.704 0.025 7.962 0.01 8.145 0.004 C 8.236 0.001 8.308 0 8.36 0 C 8.385 0 8.406 0 8.421 0 Z" fill="rgb(0, 0, 0)" height="5.90709581431209px" id="dsG54M9PN" transform="translate(1.572 0.063)" width="8.447678178605562px"/><path d="M 1.526 0 L 1.526 4.167 L 5.735 4.167 L 5.735 5.693 L 0 5.693 L 0 0 Z" fill="rgb(0, 0, 0)" height="5.692996153846181px" id="i4ABe2_Sl" transform="translate(0.478 1.2)" width="5.734692307692399px"/><path d="M 1.526 0 L 1.526 6.174 L 5.607 6.174 L 5.607 7.7 L 0 7.7 L 0 0 Z" fill="rgb(0, 0, 0)" height="7.7001923076923475px" id="kzfpBwoFy" transform="translate(8.69 4.475)" width="5.607346153846038px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 8.539 3.3 C 8.539 2.848 8.355 2.411 8.024 2.087 C 7.693 1.762 7.24 1.576 6.765 1.576 C 6.29 1.576 5.837 1.762 5.506 2.087 C 5.175 2.411 4.992 2.848 4.992 3.3 L 4.992 10 C 4.992 10.452 5.175 10.889 5.506 11.214 C 5.837 11.539 6.29 11.724 6.765 11.724 C 7.24 11.724 7.693 11.539 8.024 11.214 C 8.355 10.889 8.539 10.452 8.539 10 Z M 10.115 10 C 10.115 10.88 9.758 11.721 9.129 12.339 C 8.499 12.956 7.649 13.3 6.765 13.3 C 5.882 13.3 5.031 12.956 4.402 12.339 C 3.772 11.721 3.415 10.88 3.415 10 L 3.415 3.3 C 3.415 2.42 3.772 1.579 4.402 0.961 C 5.031 0.344 5.882 0 6.765 0 C 7.649 0 8.499 0.344 9.129 0.961 C 9.758 1.579 10.115 2.42 10.115 3.3 Z M 0 10 L 0 8.325 C 0 7.89 0.353 7.537 0.788 7.537 C 1.223 7.537 1.576 7.89 1.576 8.325 L 1.576 10 C 1.576 11.341 2.119 12.63 3.091 13.583 C 4.063 14.536 5.384 15.074 6.765 15.074 C 8.146 15.074 9.468 14.536 10.439 13.583 C 11.411 12.63 11.954 11.341 11.954 10 L 11.954 8.325 C 11.954 7.89 12.307 7.537 12.742 7.537 C 13.177 7.537 13.53 7.89 13.53 8.325 L 13.53 10 C 13.53 11.769 12.814 13.462 11.544 14.708 C 10.274 15.953 8.555 16.65 6.765 16.65 C 4.976 16.65 3.257 15.953 1.987 14.708 C 0.717 13.462 0 11.769 0 10 Z M 5.977 19.212 L 5.977 15.862 C 5.977 15.427 6.33 15.074 6.765 15.074 C 7.2 15.074 7.553 15.427 7.553 15.862 L 7.553 19.212 C 7.553 19.647 7.2 20 6.765 20 C 6.33 20 5.977 19.647 5.977 19.212 Z M 10.18 18.424 C 10.616 18.424 10.969 18.777 10.969 19.212 C 10.969 19.647 10.616 20 10.18 20 L 3.35 20 C 2.914 20 2.562 19.647 2.562 19.212 C 2.562 18.777 2.914 18.424 3.35 18.424 Z" fill="transparent" height="20px" id="tSz1F7QXt" transform="translate(4.833 2.125)" width="13.530246305418743px"><path d="M 5.123 3.3 C 5.123 2.848 4.94 2.411 4.609 2.087 C 4.278 1.762 3.825 1.576 3.35 1.576 C 2.875 1.576 2.422 1.762 2.091 2.087 C 1.76 2.411 1.576 2.848 1.576 3.3 L 1.576 10 C 1.576 10.452 1.76 10.889 2.091 11.214 C 2.422 11.539 2.875 11.724 3.35 11.724 C 3.825 11.724 4.278 11.539 4.609 11.214 C 4.94 10.889 5.123 10.452 5.123 10 Z M 6.7 10 C 6.7 10.88 6.343 11.721 5.713 12.339 C 5.084 12.956 4.233 13.3 3.35 13.3 C 2.466 13.3 1.616 12.956 0.986 12.339 C 0.357 11.721 0 10.88 0 10 L 0 3.3 C 0 2.42 0.357 1.579 0.986 0.961 C 1.616 0.344 2.466 0 3.35 0 C 4.233 0 5.084 0.344 5.713 0.961 C 6.343 1.579 6.7 2.42 6.7 3.3 Z" fill="rgb(0, 0, 0)" height="13.300492610837438px" id="SXrYBExtb" transform="translate(3.415 0)" width="6.699507356277309px"/><path d="M 0 2.463 L 0 0.788 C 0 0.353 0.353 0 0.788 0 C 1.223 0 1.576 0.353 1.576 0.788 L 1.576 2.463 C 1.576 3.804 2.119 5.093 3.091 6.046 C 4.063 6.999 5.384 7.537 6.765 7.537 C 8.146 7.537 9.468 6.999 10.439 6.046 C 11.411 5.093 11.954 3.804 11.954 2.463 L 11.954 0.788 C 11.954 0.353 12.307 0 12.742 0 C 13.177 0 13.53 0.353 13.53 0.788 L 13.53 2.463 C 13.53 4.232 12.814 5.925 11.544 7.171 C 10.274 8.416 8.555 9.113 6.765 9.113 C 4.976 9.113 3.257 8.416 1.987 7.171 C 0.717 5.925 0 4.232 0 2.463 Z" fill="rgb(0, 0, 0)" height="9.113300492610836px" id="ObrVvnz3O" transform="translate(0 7.537)" width="13.5302463054187px"/><path d="M 0 4.138 L 0 0.788 C 0 0.353 0.353 0 0.788 0 C 1.223 0 1.576 0.353 1.576 0.788 L 1.576 4.138 C 1.576 4.573 1.223 4.926 0.788 4.926 C 0.353 4.926 0 4.573 0 4.138 Z" fill="rgb(0, 0, 0)" height="4.926108374384235px" id="HJKKM8mIv" transform="translate(5.977 15.074)" width="1.5763546798029893px"/><path d="M 7.619 0 C 8.054 0 8.407 0.353 8.407 0.788 C 8.407 1.223 8.054 1.576 7.619 1.576 L 0.788 1.576 C 0.353 1.576 0 1.223 0 0.788 C 0 0.353 0.353 0 0.788 0 Z" fill="rgb(0, 0, 0)" height="1.5763546798029573px" id="AcwNPprVj" transform="translate(2.562 18.424)" width="8.407093596059099px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0 0 L 14.233 9 L 0 18 Z" fill="rgb(0, 0, 0)" height="18px" id="HI3LO7zZV" transform="translate(5 3)" width="14.232558139534945px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 0 24 L 0 0 L 24 0 L 24 24 Z" fill="rgb(0, 0, 0)" height="24px" id="K49tUxi7i" width="24px"/><path d="M 6.284 0 L 6.284 10.355 L 0 6.568 L 0.752 5.272 L 4.807 7.715 L 4.807 0 Z" fill="rgb(245, 245, 245)" height="10.355247030774287px" id="w9Zq3BEMR" transform="translate(6.824 5.459)" width="6.283523113602854px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 6.031 0 L 6.031 24 L 0 24 L 0 0 Z" fill="rgb(0, 0, 0)" height="24px" id="VobLQCL_S" transform="translate(3 0)" width="6.031309923334504px"/><path d="M 6.031 0 L 6.031 24 L 0 24 L 0 0 Z" fill="rgb(0, 0, 0)" height="24px" id="g86Fe54uT" transform="translate(14.969 0)" width="6.031309914124016px"/></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 14.854 L 3.659 14.854 L 3.659 22.816 L 0 22.816 Z M 6.286 10.542 L 9.945 10.542 L 9.945 22.927 L 6.286 22.927 Z M 13.055 5.271 L 16.714 5.271 L 16.714 22.963 L 13.055 22.963 Z M 19.108 0 L 22.767 0 L 22.767 23 L 19.108 23 Z" fill="transparent" height="23px" id="zwgiRvovr" transform="translate(0.392 1.5)" width="22.767058611408117px"><path d="M 0 0 L 3.659 0 L 3.659 7.962 L 0 7.962 Z" fill="rgb(0, 0, 0)" height="7.961834257580774px" id="vQwHZjavc" transform="translate(0 14.854)" width="3.658723547760559px"/><path d="M 0 0 L 3.659 0 L 3.659 12.385 L 0 12.385 Z" fill="rgb(0, 0, 0)" height="12.384952647392602px" id="bCA2q1c0x" transform="translate(6.286 10.542)" width="3.658728838458842px"/><path d="M 0 0 L 3.659 0 L 3.659 17.692 L 0 17.692 Z" fill="rgb(0, 0, 0)" height="17.692473559247304px" id="rhVIFqKVH" transform="translate(13.055 5.271)" width="3.658728838458842px"/><path d="M 0 0 L 3.659 0 L 3.659 23 L 0 23 Z" fill="rgb(0, 0, 0)" height="23px" id="zF_Zhtt7E" transform="translate(19.108 0)" width="3.6587288384588987px"/></g></svg>)
![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M 18 1.972 L 11.171 9 L 18 16.028 L 15.575 18 L 9 11.234 L 2.425 18 L 0 16.028 L 6.829 9 L 0 1.972 L 2.425 0 L 9 6.766 L 15.575 0 Z" fill="rgb(0, 0, 0)" height="18px" id="uFgQX69FS" transform="translate(3 3)" width="18px"/></svg>)
Buttons
Home - Identify music
Song Match - Back
History - Sort Overlay
Colors
Inspired by Blanco’s iconic style and vibrant personality, the app features a vibrant, maximalist color system. To keep the interface feeling fresh and engaging, these bright colors are dynamically paired together on screen during every song or recipe identification.
Onboarding
Mockups
Create Image
Final UI Screens
Home
Scanning
recipe details
song match
recipe match
recent History
Check it out!
Explore Prototype
