Photo by Fernando Arcos from Pexels

Bridging The Gap

Reflections On My Practice As A Designer

Not too long ago I published an article on Medium about “The Gap” that new creatives encounter in their work. This gap represents the difference between your own expectations for your work and the outcome of it. For anyone who has ever finished a sketch, painting, poem, or term paper and thought to themselves “damn. this sort of … sucks” — you have experienced “The Gap” as well.

In this article, I shared my experience with “The Gap” in my own work as well as my reflections on a video in which Ira Glass shares the secret to bridging this gap: practice.

Practice, Practice, Practice

I’m currently reading Atomic Habits by James Clear. Early in the book, he makes an interesting argument: motivation is over-rated. Relying on motivation, he argues, is not enough for long term success because motivation, like all emotions, is fleeting. Instead, his take is that developing the proper systems in your daily life is the key to success, whether you want to improve your finances, physical and mental health, or to learn a new skill.

With my time as a student in the Ironhack UX/UI Bootcamp now over, I’ve been making it a priority to find time each day to practice design. Somedays this means finding a design challenge online, other days it means making a new avatar for myself using the Open Peeps Illustration Library or watching a YouTube tutorial on an animation/interaction technique I want to learn.

But for all of that, the frustration of trying and failing repeatedly during practice — or of looking at a project and knowing that it can be so much more and knowing that at present you are not capable of getting it there — stings. It can be downright disheartening.

I believe that the antidote to this is to celebrate progress.

By definition, progress is not something that can be completed. Progress is not an object. Progress is experienced, not created. But you can observe it, and it can be measured.

I believe the best way to measure progress is through comparison. And so I have revisited a project that I first created with 3 weeks of practice as a UI designer. At the time of the redesign, I possess slightly more than 3 months of experience.

3 Weeks of Practice

During my third week as a student in the Ironhack UX/UI Bootcamp, I completed a project to add a feature to an existing application. I chose to design within Netflix’s UI system as this meant getting to practice with some of the most readily recognizable UI patterns and components in the world — an opportunity I was eager to explore.

Side note: During User Experience research I learned that nearly 4 out of 5 users preferred to watch Netflix on desktop/laptop when not viewing from a TV, so my designs reflect that sizing.

3 weeks of practice

Home Screen

Admittedly, the home screen of my design does not look terrible. I consider the fact that is recognizably Netflix as a win in itself.

But there are some irregularities that are jumping off the screen to me. The text margins and alignment as well as the spacing between content cards are a few of the obvious ones.

It’s just so … Meh.

Feature Flow

Now for the feature flow that I designed. I referred to an older Netflix Design pattern while creating the pop-up modal that contained the feature concept I was creating. It felt off to me even at the time of creating it, but I couldn't fully place why.

Looking back now it’s pretty clear to me that relying on the older design pattern made the modal feel dated. On top of that, Netflix does not really rely on pop-up modals like this at any point in their flow. All in all, the whole experience feels out of place.

Ugh.

And then there’s this monstrosity.

Need I say more?

Takeaways

I recall having a hard time deciding when exactly to launch this feature’s onboarding within the user experience. Part of what made this so challenging is that unprompted pop-up experience just doesn’t really happen within the Netflix experience. After some more analysis of the Netflix UI, the only pop-up style pattern I could find occurred when the user expands the show/movie tile to see more information about that show/movie.

Everything in the Netflix UI puts the content (shows/movies) front and center — this pop-up/modal is no exception.

With some more practice under my belt, I was much better equipped to analyze the finer details within the Netflix UI. I focused on two observations to guide my redesign:

  • Everything in Netflix puts the content first. A pop-up/modal that completely covers content tiles without highlighting a specific show or movie has no place in the Netflix experience.
  • When Netflix makes a suggestion or nudges the user to take action, it is always done with subtlety. Auto-playing previews and slightly expanded hover states capture the user's attention while still giving the freedom to continue the scrolling experience. In the pop-up experience above the background is slightly faded. The result is that the user’s attention is subtly directed to the trailer and information about the show while additional content is still visible in the background.

3 Months of Practice

It feels a bit trite to say that practice is the way to get better at something — but damn it, it’s true! And practice can feel like a slog sometimes. Repeatedly failing and struggling to do things that I feel like I should know how to do already is an extremely frustrating experience.

But, it’s a necessary one.

This was the first project I revisited after completing the 9-week boot camp. It was the first project where I was asked to take my design process all the way through High-Fidelity prototyping, making it a great reference point to measure my progress as a designer.

The Home Screen

Much better

Subtle changes make all the difference in the updated home page. Text is cleanly aligned and the spacing between the show/movie tiles is much more consistent with the real deal.

I also played a bit with the font of the featured preview title for an extra layer of realism.

Feature Flow

This time the feature launches within the scrolling experience rather than interrupting it.

In the redesigned prototype, the feature onboarding now launches from within the scrolling experience that has come to define Netflix.

Instead of through a pop up that blocks content, a user encounters the feature onboarding as an expanding content card that pushes the other content aside but not fully off-screen. It’s a subtle animation that users should find much less jarring than a pop-up modal since expanding objects are commonplace throughout the Netflix UI.

A Little Extra Polish

It may be simple but I’m really pleased with this one!

It was my goal for this redesign to be close enough to Netflix that I could fool my friends with it. This meant that it had to go further than just looking pretty. I needed to provide an interactive experience that felt at home within the Netflix experience.

Getting the little animations and interactions right was an important part of getting the right feel for the experience.

As the user makes their selections within the feature, the content appears to “scroll” to the left.

Navigation

Since this type of question and answer experience does not currently exist anywhere within the Netflix experience, it was important to me that navigating the feature was reminiscent of navigating the Netflix UI in some way. I found inspiration for this challenge in the side-scrolling navigation of Netflix category rows.

So, What’s My Point?

Ira Glass says that the key to overcoming The Gap is to “create a large body of work.” The message is that with time and a lot of practice, you will one day close the gap between your own expectations and your creative ability.

I say that along the way, it feels pretty nice to take a look back and see how much of the gap you’ve crossed already.

Thank You For Reading

Shout out to Pablo Stanley for the Open Peeps Library

If this resonated with you at all, I’d love to hear about it!

If you’d like to connect or work with me, you can find me on LinkedIn.

Product Designer — Coffee Drinker. Let’s create together: https://www.linkedin.com/in/dostergren/

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store