Carefully navigating the redesign of Screenity, without losing its essence

"Redesign once more, this time with feeling!"

Issue #34

Hey! I’m Alyssa X, a serial entrepreneur building 12+ products by myself. This email is part of my maker journey, which you’re subscribed to. Feel free to forward it to others if you find it interesting! You can support me through GitHub Sponsors, I’d really appreciate it! ❤️

Hey all,

In my last issue I shared how I settled on the direction for my product, from a market perspective. In this one, I want to talk about a different kind of direction, the visual kind.

---

But, why?

The first thing I should explain is why I am focusing so much on the design, for a product I’m intending to ship relatively quickly. Why not just reuse the existing design, and improve it as I go along, with incremental updates?

Well, I’m a designer, that’s just not going to happen. But also, given that I am rebuilding the product from zero completely, I have the opportunity to change its look and feel. It’s very hard to do incrementally (at least in a significant way), since users need to be educated, and brand recognition will be affected.

Cornerstones

Nonetheless, I decided to not stray too far from the current design, and strive for some level of continuity in terms of look and experience in the new version. So I dissected the existing design to extract its essence, and used that as the foundation for the next iteration:

• The logo. Probably the most vital part, as the logo acts as the button to open up the extension to record.

• Color scheme. Easier to associate the app if the colors are the same, so I wanted to retain blue and the light mode as default.

• The recording flow. To avoid confusion and frustration, I wanted to keep the basic flow of the app. Have the logo in the address bar trigger a popup with recording options, a button to start recording, and a floating toolbar to stop it.

With that in mind, I set out to explore a few ideas. I considered just playing it safe, looking at the browser extension / screen recorder landscape and adopting a similar style. But then, something happened.

Design is all-encompassing

I must have tried a hundred different extensions, each with their own slightly different UI, flow, and feature offering. One after the other, they were converging in a blur, like copies of each other, all the while I was battling through dark patterns, endless onboarding flows, and frustrating interfaces. It was exhausting, I couldn’t take it any longer.

That’s when I thought, do I really want Screenity to be like that? An unremarkable, forgettable app, that you constantly have to fight against to do anything?

All my exasperation suddenly fueled my creativity, and I had an “aha!” moment. What if I designed my product around that struggle, making it feel welcoming, calm, understanding, tranquil…? Maybe Screenity could be, in essence, the combination of a mindfulness app like Headspace or Calm, with a screen recorder.

Screenity? Serenity

The framework was set. Now I just had to start building.

To help architecture my design, I followed a set of principles:

• Pace. If you’ve used Loom before, you might feel like it’s rushing you through. The big red button gets your attention, eager to get you started. You get thrown to the wolves, with no preparation, and the clock is already ticking. Just 5 minutes left to finish your recording, unless you want to pay. I want Screenity to be more chilled out, giving you more preparation and planning, and allowing you to take your time.

• Calmness. It plays into my strength that Screenity already has the blue color scheme, which happens to evoke feelings of tranquility and relaxation, as opposed to a more aggressive red in Loom. I could design it against anxiety and stress, which can break havoc when presenting and recording yourself. Maybe it could even incorporate mindfulness features, why not “take a deep breath” before starting, and some way to decompress afterward?

• Playfulness, novelty. Users should be encouraged to experiment, use tools while recording, and enjoy the process. The product also shouldn’t be boring, it should be memorable, instantly recognizable when compared against other tools. If it looks fun, and feels great to use, it’s much easier for users to recommend it to others.

Walk the talk

I skipped a lot of the thinking I did - I might share more at a later time. But I just can’t wait to show you what I ended up designing.

For the popup, I came up with this:

A playful, simple design, but without sacrificing features. Big chunky elements, rounded corners, gradients, and an “orb”, which I’ve created for the logo, by taking the original one and applying a gradient with a glow. Just the perfect blend of playfulness with usability, all together in an almost therapeutic UI.

I also introduced a bit of a special design element to make it more memorable, and create some sort of brand mark, by cutting out a bit of the container at the top. Here’s how I use it in the “Your videos” section, as a way to hold the user’s profile settings:

I decided to include the video section within the popup so it’s easier to find videos you’ve created, or that have been shared with you (in the premium plan). Having the user type in an address, or find a button that opens a new tab feels a bit frustrating and annoying, that’s one of the things I don’t like about Loom. Plus I also decided to surface actions to share and manage the videos, without having them on right click or having to access the video itself first.

For the toolbar while recording, I also made sure to keep the principles front and center.

It has the same rounded corners of the popup, and if you look closely, you’ll notice the circle cut out design element is used here once again as a way to connect between the primary and secondary toolbar, showing the origin. I kept the same tools as Screenity has right now (I might tweak / add more) for continuity, but I made it all more compact, as a single “puck” and visually grouped the recording controls so the user wouldn’t be overwhelmed with too many actions, separating them from drawing / comments, and other preferences.

I also made it so that the toolbar can be moved around, to avoid it obscuring parts of what you want to record. One thing I wanted to ensure while doing so was that it could not possibly get off-screen and “lost”, as that can be immensely irritating for the user. So I came up with a fun animation, and an elastic return.

Closing notes

Thanks for sticking through! I think for the next one I want to share how I reimagined the color picker, with some experimental interactions, and ways to make it more efficient, simple, yet fully customizable. If you are on Bluesky I shared a sneak peek already, you can follow me there to see it (trying to re-connect with all of you, say hi! 👋).

See you,

Alyssa X