Attention to detail is of utmost importance when it comes to designing and building delightful user interfaces. At Zingle, we decided early in the web-app redesign process that thoughtful details and delightful experiences would be an integral part of our product moving forward. My job was to take that directive and build our UI components in a way that would easily support what I like to call “micro-experiences”; small bits of UI that make subtle, almost subconscious impressions in the mind of our users that increase their enjoyment and confidence in our product.

The most obvious low-hanging fruit in this realm of “micro-experiences” was the display of loading state. We felt it was important that every click or action taken in our product should feel responsive and alive. We did this by adding visual loading indicators wherever necessary and building that functionality into our React components. For example, clicking on a button anywhere in our app will provide a loading indicator if the action requires a request to the server:

Similarly, whenever a user navigates to a part of the app that requires more resources to be fetched from the server, we show a skeleton loader as a rough representation of what the loaded page will look like. This helps improve perceived performance.

These details, among many others (such as keyboard shortcuts, state persistence in LocalStorage, and smart truncation) leave the user feeling like they are standing on solid ground when using the product. These small micro-experiences build up in the subconcious of the user over time, leading not only to better impressions and more usage, but also stickyness, and ultimately, increased revenue.