I am a lifelong learner, creator, explorer, and tinkerer.
This is a collection of my experiences.
(References: Full Codebase, Live Website)
A solid website experience is the result of a joint effort between a designer and a frontend engineer. Each individual brings their own expertise to the table. Through collaboration, they build something better than either could have built in isolation. As frontend engineers, we are accustomed to taking designs, implementing them, and then moving on. However, there are skills that engineers possess, that designers don't, that can bring user experiences to the next level.
Designers operate in an artificial environment. There are no network requests. Screen sizes tend to be fixed. Performance is not a concern. This is not the fault of the designer. Figma is not Google Chrome. Figma is far removed from the real world of slow internet connections and devices with limited processing power.
Frontend engineers live the opposite experience. They are concerned with interactions within the browser. They contemplate network requests, latency, caching, memoizing, rendering, bundling, lazy loading, browser behavior, and so much more. While these terms are technically focused, their end goal is to improve the user experience.
Engineers are tackling the exact same problem as designers but from a different perspective. Engineers have the power to implement these techniques to improve the user experience.
The first step to improving the user experience is to decide what to work on.
Schooling teaches us to think of performance in abstract terms. Big O. Big Omega. Big Theta. Little o. All of these are very abstract methods of defining performance. They're far removed from the real world. They have their place, but it's not in this article.
Imagine you're looking for some improvements to make. You find some code in the frontend that theoretically has poor performance. It can be refactored to have better performance. In reality, its average run time is 50ms. Blinking takes roughly 100ms. [1] This is an improvement the user is not going to notice.
To figure out what to work on, look at real situations. Real devices. Real internet connections. Real complaints. Focus there.
(For technical details, check out the next section)
My photography portfolio is a great example to consider. User actions are quite limited. They can browse galleries and view full resolution photos. Think through the user journey. What actions might the user want to take? Knowing this, experiences can be built that prepare the website before users act so that interactions feels instantaneous.
A user want to see the content as quickly as possible.
As the page is loading, prioritize what the user can see within their viewport. Use placeholder images, such as blurhashes, to let the user know that things are loading. Put priority on the visible thumbnails and defer everything else for later. As the user scrolls the page, prioritize loading the thumbnails the user will see next.
A user want to browse a gallery.
Apply the techniques from the previous section.
In addition, now that the user is browsing a gallery, their next action will be to select a thumbnail and view it in full resolution. Once all thumbnails are loaded, begin loading full resolution photos of the thumbnails in the user's viewport.
A user want to browse full resolution photos.
Due to the previous step, the photo the user has selected has already loaded. Their next move is to either look at the previous or next full resolution image. Prioritize loading these images.
I originally had this and the previous section together. However, I realized that a deep technical dive is not the point of this article. Each situation requires vastly different technical solutions. I will leave this section should you wish to learn about specific technologies and techniques I used.
As engineers, we have more to contribute to great user experiences than we often realize. We understand the ins and outs of the applications we build - the user flows, the edge cases, and what happens after every click. By using that knowledge to complement and enhance what designers create, we can build experiences that go beyond what either could build alone.
[1] https://en.wikipedia.org/wiki/Blinking
Or