In the proccess of developing heyme, an online platform that is designed to send a recording message to your future self, I encountered a significant challenge related to user conversion.
Specifically, I had embedded a video (default HTML element) into the landing page as a way to entice users on visiting the application and also to give them a feel of what the application is about. But quickly realized the video was looking unappealing.
Despite my initial assumption that the embedded video would enhance the user experience, I soon discovered that it was not displaying correctly across all devices. While the video looked great on IOS devices, it appeared distorted and unappealing on other platforms, particularly on Google Chrome browser.
After analizing the problem in greater depth, I had come accross a new package called react-html5video that would allow me create a more visually appealing video player that would work across all devices.
However, after checking the package size, I realized that it would add an additional 43.4KB to the minified code, based on bundlephobia, download time on slow 3G devices would be a staggering 239ms.
This presented a significant dilemma, as the package would ubdoubtedly enhance the user experience and help to increase engagement with the platform, but at the cost of significantly slowing down the load time for users on slow or unstable connections.
After much consideration , I ultimately decided to use the best solution that a frontend engineer has which is measurement.
Using measurement, I opted to include the package in my bundle, deploy the application, and run lighthouse test to evaluate the performance impact of the video player. To my relief, the user experience was exceptional, just as I had hoped, and lighthouse score remained at 100%.
I explored the lighthouse further more to be sure it wasn't because of my high internet speed (100mps which is not bad for lagos nigeria). The optimization techniques had helped to minimize any negative impact on the landing page's performance.
As discussed this dilemma with other senior frontend engineers, I learned that striking balance between user experience and performance is critical in software development.
As I began exploring new ways to improve the heyme platform, I considered implementing a testimonial slider to make the testimonial section more visually appealing. However, I discovered that the react-slick-dynamic was a hefty 60.1KB in size.
With the lessons learned from my previous experience in mind, I settled on using a grid layout for the testimonial section, which would still be visually pleasing and deliver a great user experience without compromising the performance of the landing page.
This experience thought me a valuable lesson in the importance of considering the tradeoffs between performance and user experience in software development.