Here’s An Inside Look at Groove’s Website Redesign
An interview with web design studio Self Aware
We’ve got a new home on the internet -> groove.ooo.
We paired up with Philadelphia design and technology studio Self Aware to bring the magic of our app to life on our website, the first place many people learn more about Groove and sign up for our waitlist.
We knew we wanted something more playful and interactive, so Self Aware was the perfect partner to help us design and build it. We talked to Jennifer Heintz and Mike Wagz for an inside look at how they went about designing the site.
Also: read our interview with designer Emunah Winer about Groove’s brand identity.
What was the inspiration behind Groove’s site design?
The brand identity by Nihilo provided a solid foundation. The brand was just asking to be brought to life with motion. The Groove team came to us looking for a site that didn’t feel like every other app marketing site, so we really leaned into color, scale, and playfulness. Our aim was to evoke a sort of retro/analog feel (i.e. a ball rolling down a hill, like pinball!).
A lot of your work has previously been for things in the physical realm: food, real estate, consumer packaged goods. Was it any different designing for an exclusively digital product (i.e. an app)?
While our work spans a variety of industries, our process remains constant, so in many ways this project was no different. With that said, we definitely had to get creative in the absence of physical product or lifestyle photography and video. We wanted to avoid a series of static app screenshots or stock photography that doesn’t add to the narrative. Instead we crafted a scrolling interaction that illustrates the Groove experience utilizing the brilliant graphic language created by Nihilo.
Did you face any fun challenges in this project?
The pink ball rolling down the hill on the screen was quite the technical challenge to build. Particularly, positioning the ball perfectly upon the hill at any given point across the screen. After much trial and error, we discovered that we could use a mathematical concept called a Scalar Projection to calculate the ball’s position as it rolls down the hill. Math rules!
What are the things you’re most happy about in the way the website turned out?
It bears repeating, but that ball rolling down the hill is just so fun. Also, there’s an easter egg on the site that involves confetti and it’s incredibly satisfying (can you find it?). Overall, the site is super playful while still accessible and performant which is always a win in our book.
We hope you love our new site as much as we do!
About Self Aware 👇
Self Aware is a design and technology studio that brings brands to life on the web. Based in Philadelphia, they design and build beautiful, performant websites for a wide range of individuals and organizations near and far.
Keep in touch 👇
Looking for more Groovy content? Check these out:
- A Groovy Glossary
- 1,000 Grooves Later
- If you’re a solopreneur looking to make working solo -> social, cruise onto our waitlist: groove.ooo
