InRhythm

Your partners in accelerated digital transformation

ux

How To Effectively Measure The Direct Impact Of Your Design Language System

Author: Ashton Coghlan, Senior Product Manager and Oleg Ivanov, Design Tech Architect @ InRhythm

Overview

The work of your designers has a substantial impact on your business, despite it sometimes being a challenging, tangible KPI to measure. Showing the value of your designers’ work, can result in a positive focus on business goals around the needs of your users. You can start driving value around the infrastructure of a Design Language System so that your designers can focus on higher value problems, moments of delight in your customers’ experiences, and your overall product quality. A Design Language System can help refine the quality of your product by making the experience more consistent, predictable, and accessible. 

In order to understand the lasting impact of a Design Language System in your organization, we’ll be prioritizing some high-level subject areas:

  • Overview
  • What Is A Design Language System?
  • How Do We Measure The Business Impact Of A Design Language System?
  • What Are The Leading Indicators To Measure Impact?
  • Design Efficiency
  • Developer Efficiency 
  • Closing Thoughts

What Is A Design Language System?

A Design Language System is a collection of reusable design components, guidelines, and standards that are used to create a consistent and cohesive user experience across an organization’s products and services. It is a set of rules and principles that guide the design and development process, ensuring consistency and coherence in the design of digital products.

A Design Language System includes not only visual elements like typography, color palettes, and iconography, but also components like buttons, forms, and navigation menus, as well as guidelines for interaction design, accessibility, and branding. The purpose of a Design Language System is to streamline the design and development process, reduce inconsistencies, and improve the efficiency and effectiveness of design teams. It also ensures a better user experience, making it easier for users to interact with and navigate through digital products.

How Do We Measure The Business Impact Of A Design Language System?

Measuring business impact is important because it helps organizations understand the value that their Design Language System is providing to the business. By tracking key metrics, organizations can identify areas where the Design Language System is driving business outcomes, as well as areas where it may need to be improved.

Here are some key metrics to measure business impact:

  • Return On Investment (ROI): This metric measures the financial impact of the Design Language System on the organization. It helps to determine whether the investment in the Design Language System is paying off in terms of increased revenue, cost savings, or other financial benefits.
  • Time To Market: This metric measures the speed at which new products or features can be launched to the market using the Design Language System. It helps to determine whether the Design Language System is enabling the organization to be more agile and responsive to market changes.
  • Customer Satisfaction: This metric measures how satisfied customers are with the products or services that are built using the Design Language System. It helps to ensure that the Design Language System is meeting the needs and expectations of customers, and can also provide insights into areas where improvements may be needed.
  • Employee Productivity: This metric measures the efficiency and effectiveness of the design and development teams that are using the Design Language System. It helps to determine whether the Design Language System is improving productivity, reducing errors, and enabling teams to work more collaboratively and efficiently.

What Are The Leading Indicators To Measure Impact?

Adoption and usage are the only things that matter after you know what you need to build. And the sneaky hard part of this is you often don’t know what you truly need to build until you measure adoption and usage. (This is where the magic of Product Management comes into play!)

Here are some key metrics to measure adoption and usage of a Design Language System:

  • Number Of Active Users: This metric measures the number of users who have actively used the Design Language System components in a given period, such as a week or a month. It helps to gauge the reach and impact of the Design Language System across the organization.
  • Number Of Design Language System Components Used: This metric measures the number of unique Design Language System components used in products or applications. It helps to identify which components are most popular and which ones are underutilized.
  • Number Of Design Language System Integrations: This metric measures the number of products or applications that have integrated the Design Language System. It helps to determine how widespread the adoption of the Design Language System is across the organization.
  • Number Of Design Language System Updates: This metric measures the number of updates made to the Design Language System in a given period, such as a week or a month. It helps to ensure that the Design Language System is up-to-date and relevant to the changing needs of the organization.
  • User Feedback And Satisfaction: This metric measures user feedback and satisfaction with the Design Language System, which can be collected through surveys, user testing, or other means. It helps to identify areas for improvement and to ensure that the design language system is meeting the needs of its users.

By tracking these metrics, organizations can gain insights into the adoption and usage of their Design Language System and make data-driven decisions to improve its effectiveness and impact.

Design Efficiency

Measuring design efficiency is important because it helps organizations ensure that their Design Language System is supporting efficient and effective design processes. By tracking key metrics related to design efficiency, organizations can identify areas where they can streamline workflows, reduce errors, and improve the quality and consistency of their design outputs.

Here are some key metrics to measure design efficiency:

  • Time To Create New Designs: This metric measures the amount of time it takes to create new designs using the Design Language System. It helps to identify areas where the Design Language System may be slowing down the design process or where additional training or resources may be needed to improve efficiency.
  • Time To Make Updates To Existing Designs: This metric measures the amount of time it takes to make updates to existing designs using the Design Language System. It helps to identify areas where the Design Language System may be creating bottlenecks or inefficiencies in the design process.
  • Design Consistency: This metric measures the level of consistency and coherence in the design outputs produced using the Design Language System. It helps to ensure that designs are aligned with brand standards and that user experience is consistent across different products and services.
  • Design Quality: This metric measures the quality of the design outputs produced using the Design Language System, including factors such as usability, accessibility, and visual appeal. It helps to ensure that designs are of a high standard and meet the needs and expectations of users.

By tracking these metrics, organizations can gain insights into the efficiency and effectiveness of their design processes, identify areas for improvement, and ensure that their Design Language System is supporting high-quality design outputs that meet the needs of users and the business.

Developer Efficiency

Measuring developer efficiency is important because it helps organizations ensure that their Design Language System is supporting efficient and effective development processes. By tracking key metrics related to developer efficiency, organizations can identify areas where they can streamline workflows, reduce errors, and improve the quality and consistency of their development outputs.

Here are some key metrics to measure developer efficiency:

  • Time To Implement New Designs: This metric measures the amount of time it takes developers to implement new designs using the Design Language System. It helps to identify areas where the Design Language System may be slowing down the development process or where additional training or resources may be needed to improve efficiency.
  • Time To Make Updates To Existing Designs: This metric measures the amount of time it takes developers to make updates to existing designs using the Design Language System. It helps to identify areas where the Design Language System may be creating bottlenecks or inefficiencies in the development process.
  • Developer Satisfaction With The Design Language System: This metric measures the satisfaction of developers with the Design Language System, including factors such as ease of use, accessibility, and usefulness. It helps to ensure that the Design Language System is meeting the needs and expectations of the development team and that they are able to work more efficiently and collaboratively.
  • Number Of Bugs And Issues: This metric measures the number of bugs and issues that are encountered during the development process using the Design Language System. It helps to identify areas where improvements may be needed in the Design Language System, as well as areas where additional training or resources may be needed to reduce errors and improve efficiency.

By tracking these metrics, organizations can gain insights into the efficiency and effectiveness of their development processes, identify areas for improvement, and ensure that their design language system is supporting high-quality development outputs that meet the needs of users and the business.

Closing Thoughts

In summary, a Design Language System is a collection of reusable design components, guidelines, and standards that are used to create a consistent and cohesive user experience across an organization’s products and services. Measuring the success of a Design Language System is important because it helps organizations ensure that the system is meeting the needs of users and the business. There are several key metrics that organizations can track to measure the success of their Design Language System, including adoption and usage metrics, design efficiency metrics, developer efficiency metrics, and business impact metrics.

To track and analyze these metrics, organizations can use tools such as analytics platforms and surveys, as well as conduct user testing and gather feedback from development teams. Product Managers can play a critical role in driving the success of a Design Language System by setting clear goals and objectives, identifying key metrics to track, and ensuring that the Design Language System is meeting the needs of users and the business.

At InRhythm, we have extensive experience in helping organizations set up their design language systems for success. Our team of experts can provide guidance on best practices for tracking and analyzing key metrics, as well as help organizations develop and implement a design language system that is tailored to their unique needs and goals. If you’re interested in learning more about how we can help your organization succeed with its Design Language System, please don’t hesitate to reach out to us.

Structured Concurrency In Swift

Based on a Lightning Talk by: Joshua Buchanan, Lead iOS Engineer @ InRhythm on March 28th, 2023 as part of the Propel Spring Quarterly Summit 2023

Author: Mike Adams, Senior Technical Writer @ InRhythm

Swift Concurrency

Design Credit: Joel Colletti, Lead UI/UX Designer @ InRhythm

Concurrency is a task-based system that allows developers to take full advantage of the “await” portion of the Async/Await keywords to perform concurrent task execution. An Async/Await task waits until its process finishes before continuing.

Async/Await lets you take advantage of parallelization to make full use of all the available CPU cores to give your users the best user experience. 

Swift Concurrency includes, Async/Await, Tasks, and Task Groups. As you read “Async/Await,” assume that it means the entirety of Swift Concurrency and not simply, Async/Await.

Here are the keywords and concepts we’ll use in discussing Structured Concurrency:

  • Task – That portion of the concurrency framework that creates the concurrent environment. It can throw errors and return values
  • Child Task – A task generated and managed by a Parent Task.The Parent is responsible for task execution
  • Cancellation – In Swift, you can cancel or stop any task from completing. Unlike Combine, structured concurrency does not require a strong reference to emit values from the publisher (i.e., the Task) and continue to run even if you remove references to the publisher. If you don’t want the task to run, you must either cancel or stop it
  • Priorities – Structured Concurrency’s Task Priorities are very similar to Apple’s Quality of Service system. Task Priorities include:
    • High
    • Background
    • Low
    • Medium
    • userInitiated
    • Utility

When using Structured Concurrency in your code, remember that while priority setting in your code tells the system which tasks are most important, those priorities are only a suggestion, not a mandate. 

Async/Await

Async/Await provides the Structured Concurrency that removes the necessity of manually propagating errors and managing cancellation, as well as any other types of concurrency issues (e.g., race conditions). It makes program logic simpler to follow as the methods execute linearly rather than with the back and forth required when using completion handlers. 

Structured concurrency also improves performance and allows for cleaner, more readable code with more precise error handling. In structured concurrency, long-running tasks are self-managing in regard to resources, error propagation, or any concurrency issues. 

Async/Await was first popularized in 2012 via the C# programming language. Between 2012 and 2020, other languages began adopting Async/Await, including but not limited to:

  • Python / Typescript in 2015
  • Kotlin in 2018
  • Rust in 2019
  • C++ in 2020
  • Swift in 2021

Tasks

Although Tasks appear very basic, behind the scenes there is a great deal happening. 

The Task keyword tells the compiler that the code inside the brackets must run in its own area using different rules than the rest of the application. This is the beginning of writing concurrent code in Swift.

In Swift, Tasks check if they were cancelled at appropriate times during execution. If cancelled, the Task begins whatever processing is necessary to cease execution and then responds to the cancellation. Depending on the code, the response could be returning partially finished work, returning an empty collection (or nil), or throwing a cancellation error.

Task Example

The load function shown below displays all the parts of a concurrent function coded as a task.

Child Tasks

Child Tasks are bound to a Parent Task and inherit the Parent Task’s Priority. Parent Tasks can have multiple Child Tasks and a Child Task can be a Parent Task to other Child Tasks.

While Parent Tasks can cancel a Child Task, a Child Task can not cancel their Parent task. Child Tasks begin whatever process is necessary for them to halt once their Parent Task is cancelled. All Child Tasks must finish before the Parent Task can be completed.

Cancellations

Unlike Combine, Tasks in Structure Concurrency will continue to run even when there are no Subscribers. Tasks run until they are completed or until you cancel them in code or programmatically. Cancellations are not determined by strong reference.

Tasks “know” whether they’ve been canceled and you can explicitly cancel a Task. You can also use the Task.checkCancellation() call to check if a Task was cancelled.

There are a number ways to programmatically cancel a Task including:

  • Navigating away from a view where the task was triggered
  • Canceling that Task’s Parent Task to cancel all of its Child Tasks
  • When another Child Task of the same Parent throws an Error

Async Let

Async Let is a variation of Async/Await that differs from the Await version, in that it will immediately launch a known number of Tasks in parallel and manage them in a slightly different manner than Async/Await. Where an Async/Await call suspends the Parent Task during Child Task execution, the Async Let call allows the Parent Task to continue running normally. 

You would use Async Let when you’re certain that the Async code can run independently. Note that unlike a regular Async/Await Call, you cannot directly cancel Async Let calls.

A further difference is that you can only use Async Let in local declarations, not at the top level.

Use Async Let when you need the results from the call later in your application, not immediately. For example, you could use multiple Async Let calls to load gallery images without blocking the main thread, thereby allowing the user to continue using the application’s GUI while the images load. 

Use Async Let when:

  • You have enough detail to request the information you need prior to making the call 
  • The calls do not depend on another call’s results 
  • You are returning different kinds of data
  • The order in which the app returns results is unimportant

Task Groups

Task Groups allow you to combine an unknown number of parallel Child Task calls that return the same Type of data into a batch, and then wait until the last Child Task finishes before completing the call. This is most useful when the results are a consistent type, such as when combining API responses into a single object. Task Groups only complete after all Child Tasks in the Task Group are complete.

It is important to never mutate the Task Group using code from outside the Task where the Task Group was created. Doing so interleaves data obtained by the Task Group with the data from outside the Task Group which leaves the results inconsistent. 

Using Try Await allows you to handle any potential thrown errors in the grouped call using additional code.

For example, let’s say you have a function that returns a string value and you need to call the function n times. Each time that function returns, you want to append the resultant string to an array of strings:  

Once all the Tasks in the Task Group are complete, you want the Task Group to return a String array. The “of” type for the Task Group is String because the result of the parallel task is a String and the returning type is an array of Strings

Coding UIImages in Task Groups will appear more familiar. For example, let’s say that you have a list of indeterminate size composed of URLs that point to specific images, and a function that downloads an image from each of those URLs and then adds it to an image array returned from the Task Group.

In this case, the “of” type for your Task Group is UIImage, and because the parallel function inside the task is downloading UIImage data, and the returning type for the Task Group is an array of UIImages.

Task Group Example

The Of type for this example Task Group scenario is UIImage and because the parallel function inside the task is downloading UIImage data, the “returning” type of the task group is an array of UIImages.

There are two things happening in this example code. The first is the execution of the parallel downloading task for the individual images located at each URL. The second takes the results from the previous task (the UIIMage) and combines them into a single array of images.

Resources

5 Soft Skills That Every UX Designer Should Have

Overview

No alt text provided for this image

Creating a digital product is full of rewards and challenges. No two projects are ever the same, meaning that each individual one must be approached from all angles. There are certain skills that are crucial if one wants to be a successful designer. Skills like wireframing and prototyping are key, but soft skills are just as essential to good design.

The following soft skills are a necessary part of every UX Designer’s toolkit.

1. Empathy

No alt text provided for this image

How can you build a product that accomplishes a users’ goals if you don’t understand their needs and desires? In order to be a successful UX Designer, it is paramount that you put yourself in the users’ shoes so you can truly design with their needs in mind.

You have to be able to design and solve for various types of users. Learning to empathize with them is a skill that will develop over time, but you have to feel what your users feel in order to shed light on what will be most beneficial for them.

One of the best ways to begin implementing this into your everyday practice is to speak directly to your users, whether it’s through surveys, user interviews, or usability tests.

No alt text provided for this image

For example, the core of a usability test is not about understanding your product, but about understanding how your users use your product. What is the path they take to get from A to B? What frustrates them the most? What makes them happy?

Another great technique for getting to know your users is observation. Immerse yourself in their environment. It is your responsibility as a UX Designer to be empathetic toward all users of the product and make certain that their goals and needs are met.

2. Effective Collaboration

No alt text provided for this image

You have probably found yourself in a situation where you were wearing a variety of different hats as a designer. You also most likely realized that relying on yourself to perform all these jobs was quite challenging or nearly impossible. This is because an individual cannot build a successful product on their own. It’s a team effort, encompassing roles from UX Designers to Product Managers to Developers to Marketing and so on.

As a UX Designer, you will have to collaborate with other teams on a daily basis. You will partner with developers to understand constraints, or connect with the marketing team to ensure you are consistent in how you communicate the value of the product to your users.

No alt text provided for this image

Integrating with other teams means you sometimes have to rely on others to guarantee that everything goes smoothly. This is why collaboration is a skill you must possess in order to be an effective team member. If you know how to best utilize each team’s specialized skill and vice versa, you will create a mutual respect for each other. This will allow you to create an environment for the product to flourish and reach its full potential.

3. Adaptive Work Ethics

No alt text provided for this image

The world is constantly shifting, which means that the most popular trends today are waiting to be replaced by tomorrow’s fads. There is a good chance that what excites a user now will bore them next week. As a UX Designer, how can you combat this unpredictability? First, it is your duty to plan and be aware of the malleability of trends in technology. It is critical to stay informed and up-to-date with the latest craze, while also not losing sight of what is truly important.

In order to keep yourself from drowning in a sea of uncertainty, ensure you are listening to UX/technology podcasts, reading recent articles, or planning lunch-and-learns with your team. Remember to not become too wrapped up in the “now” because that is likely to change. Instead, stay informed and keep that information in your pocket so that you are prepared for any situation.

No alt text provided for this image

Each project brings new challenges that you may not be able to plan for. It’s important to not become frustrated or overwhelmed if some aspect does not go exactly as planned. If you craft a solution for a product and it does implement as intended, then have backup solutions. There is more than one answer to the problem, and planning for the unexpected will help you adapt more quickly. While it is nearly impossible to know every single problem that could emerge, you can be aware of these potential issues and plan out how you will solve them. You should be equipped with the necessary skills and mindset that will allow you the flexibility to make changes during any stage of the process.

4. Passion

No alt text provided for this image

While being passionate is applicable in any field, it is especially relevant to UX; as a UX Designer, a lack of interest will seep through into the product. If you don’t have a passion for creating and solving problems, then you won’t be an effective UX Designer.

It takes a lot of patience to craft the right solution and you have to crave thinking outside the box and digging deep. You may need to come up with 100 different solutions before you have your “aha” moment. This probably means gathering more research, running tests, analyzing data, and creating wireframes. You have to possess that inner drive to create (and iterate and then iterate again). You can grow to love the field of UX, but this “soft skill” is more of an innate passion for design that you should already possess.

5. Open-Minded Approach

No alt text provided for this image

This may not be a skill that immediately jumps into your head when you think of UX Design. Yet, if all UX Designers were narrow-minded, then it would be impossible to ever accomplish anything. How can you create a great product if you are not open to new ideas and other points of view?

You need to listen to your team members—and your users—and know when and how to utilize their ideas. You also have to be open to trying solutions that are unprecedented. The same solution is not going to work for every problem, so learning how to be accepting of new methods will go a long way. Be comfortable with the unknown and receptive to other ideas.

Tolerance for other perspectives is what separates a beginner from an expert. Think critically, but withhold judgment. Be inventive, without boundaries.

Closing Thoughts

No alt text provided for this image

Soft skills are equally as important as technical skills, if not more vital. Being able to empathize with users or collaborate productively with your team is what will ultimately drive results and culminate a great product. As a UX Designer, you will be constantly faced with new challenges which force you to think outside the box.

Possessing these soft skills will help you clearly align your user’s goals with critical business objectives. Therefore, raising the bar on your overall successes as you continue to learn and grow as a UX Designer.

How To Structure PWAs With PRPL Patterns

Overview

No alt text provided for this image

It’s been over 10 years since the release of the first model of the iPhone. Back then, most people had primitive mobile devices, limited mostly to making calls and receiving brief text messages.

Anything close to decent was considered a pleasant user experience when it came to mobile. Nobody was concerned about the status quo, because nobody was using unstable mobile devices on a daily basis to browse through sites, make purchases, etc. (at least, not yet)

No alt text provided for this image

Over the years, however, a powerful shift has moved users’ primary point of entry from desktop machines with fast, reliable network connections to relatively underpowered mobile devices with connections that are often slow or flaky. Unfortunately, Google reports state 53% of users abandon sites that take longer than 3 seconds to load; the average load time takes up to 19 seconds on a 3G connection and 14 seconds on a 4G connection.

Now you might ask yourself: right, but how does that happen? Why does the page load take 19 seconds? I wrote some CSS, it is responsive, it should work!

Here’s the problem: the UI looks like it works, but it doesn’t work in the real world. If you think about your mobile users, a good amount of them are still using median devices—the ones they receive for free with a new mobile plan, with just 1GB of RAM. They are a little (or even a lot) better than years ago, but still slow and suffering from poor connectivity.

No alt text provided for this image

There’s clearly a significant gap between today’s consumer expectations, the capabilities of their devices, and the mobile behavior of most sites. The patterns we have developed for building feature-rich web apps are just not sufficient for a mobile device user anymore. In order to create the best experience, the PRPL pattern can be key to improved mobile website development and user experience.

PWAs To The Rescue

No alt text provided for this image

When trying to ensure that a web app is suitable for a mobile device, most organizations develop responsive apps. It could appear as a great solution to our previously mentioned problem: the pages automatically respond to the screen size, UX stays consistent across all platforms, and we only have one code base for both mobile and desktop platforms. Unfortunately, this solution comes with some limitations. Responsive Web Design has clear network dependency; as soon as the connection is lost, your page is gone. If your connection is slow, you will automatically see layout and UI glitches.

Responsive Web Design is a fast and simple solution—it doesn’t solve all problems, but it does solve some of them, and quickly. It works best, however, when it naturally moves on to Progressive Web App. While PWAs are quite new and emerging, this architecture allows your app to inherit all main behaviors of RWD such as push notifications or GPS awareness, but also offers some advanced features. Not only is the app visible immediately after entering the page, but it also works better on a slow internet connection. What’s more, thanks to clever caching methods, your content can be visible and flawless even if you are not connected to the internet.

No alt text provided for this image

One of the ways to achieve that improved behavior lays in a pattern for structuring and serving Progressive Web Apps with emphasis on the performance of app delivery and launch.

It’s known as the PRPL pattern:

  • push
  • render
  • pre-cache
  • lazy-load

It is not a specific technology or tools, but more of a mindset and a long-term plan for improving the performance of mobile web. The specific implementation of each of the steps is out of the scope of this article, but feel free to do additional research for more information.

Page Loading Process

No alt text provided for this image

What does it take to load a page, from the moment you first open that page to the moment it’s fully loaded and you can interact with it? When you try to open a site on a mobile device, an initial request is sent to a remote server somewhere far away. After some time, the server brings the response, usually in the form of an HTML document. After that, your browser runs through the HTML file to check what other resources are needed; for each additional resource, your browser needs to make a separate call to the server in order to get that resource. You’ve probably noticed: that’s a lot of calls. How do we optimize that performance?

Push Critical Resources

No alt text provided for this image

Not every file in your application has the same level of importance. Browsers know this, and using their own heuristic they are able to decide which files they should be fetching first. It’s useful to also tell the browser which files are more important to us. There are multiple ways of preloading critical resources faster. Some of them include rel=”preload” and rel=”prefetch”, however you may also want to explore webpack options.

It may be useful to keep in mind that prefetch is better for getting ready the resources needed for different navigation routes.  In general, both of these methods allow you to mask the initial latency by preparing the resources that are important but usually take some time to load. This way your browser reads through HTML and instantly warms up the connection with the source, so by the time the browser got to the last line of the HTML file, the resource is ready to be rendered.

Render An Initial Route As Soon As Possible

No alt text provided for this image

Providing basic user experience as soon as possible is critical when it comes to convincing users that the site they entered is worth staying on. How does it feel when you open a site that starts loading, and the only thing you see for the next 15 seconds is a blank screen? I always ask myself: is it loading? Is my connection not working? Maybe it’s my phone that is not working? Downloading and processing external stylesheets is probably blocking the content from being rendered until the whole process has finished. That creates an opportunity for improvement.

 There are some parts of an application that can be pushed earlier to provide some basic user experience and assure the user of the loading progress. One method is to extract styles responsible for minimum initial rendering and inlining them in the HTML document. You can either implement that solution yourself or use already existing packages such as critical package. This way the browser would be able to render the styles right away. Another approach to improve first paint is to server-side render the initial HTML of your page. This displays content immediately to the user while scripts are still being fetched, parsed, and executed. However, this can increase the payload of the HTML file significantly, which can harm the time it takes for your application to become interactive and thereby respond to user input. There is no single correct solution to reduce the initial load of your application, and you should only consider inlining styles and server-side rendering if the benefits outweigh the tradeoffs for your application.

Pre-Cache Remaining Routes

No alt text provided for this image

As you probably already noticed, minimizing server-side trips can be crucial in the process of shortening page load time. Here’s where the service worker really shines. Using a service worker cache allows you to store the resources that make up the shell. On repeat visits, your browser can fetch assets directly from the cache rather than the server. This way your user will not only be able to use your application offline, but also enjoy a much faster page load. You can either create the service worker file and write the logic yourself, or use libraries such as Workbox that can make this process easier.

 Lazy-Load

No alt text provided for this image

We’ve arrived at the moment when all of our assets are finally delivered by the server at the speed of light, but the initial paint is still slow; what’s taking so long? Almost always the most expensive asset happens to be a JavaScript bundle. From the moment it gets loaded to the moment the UI gets fully interactive, your browser goes through a few phases: it has to download the files, parse through them, compile, and finally execute. In simple terms, after your browser’s received all the resources, it now has to compute what all the files combined together look like, and how they work together. The bigger the bundle you ship, the longer it will take for the browser to parse through it and put it together.

What does it really mean for the user? Shipping a large bundle of JavaScript can significantly delay how your user will be able to interact with UI components. That means your user will be tapping on the UI without anything meaningful happening. The previously mentioned phases don’t take a lot of time on a desktop machine, but on a median mobile device, it can take forever. So how do we manage to quickly load the rest of the code necessary for the application to run? Should we just load the entire code all at once?

No alt text provided for this image

Instead of providing users with all of the code that makes up the entire application as soon as they land on a site you could split the code based on used routes, otherwise known as code splitting. The idea behind it is to give the user small chunks of the code that takes the currently used route. As the user navigates through the site, the browser makes additional requests for more of the fragments of code that haven’t been cached yet, and creates required views, known as lazy loading. This is another feature that you could implement yourself, but it may be worth it to use existing packages and plugins instead, such as an aggressive splitting webpack plugin.

Closing Thoughts

No alt text provided for this image

Nowadays, through improvements in Internet browsers, the expectations toward mobile websites are set very high. The purpose of the first websites over 20 years ago was simply to share information; these days the Internet provides everything from grocery shopping, maps, real estate, social networks, chatting, tickets… everything. If you are hoping for maximum engagement from your customers, improving their mobile experience by delivering content fast and reliably may be the way to go.

What Does Your Innovation Timetable Look Like?

Overview

Innovation is at the heart of almost every business. Companies that can innovate quickly and frequently have significant competitive advantages, easily attract top talent, and provide excellent customer experiences.

However, this is easier said than done. Although most organizations agree that being able to innovate is the key factor that will help them stand apart from the crowd, there are substantial roadblocks to achieving simple advances. 

So… How do top companies innovate rapidly?

They understand a few core principles:

1. Time Is Money

Companies are often sidelined by a standard argument:

“We don’t have the budget right now.”

Innovative companies understand that every minute you wait to implement new ideas, even more dollars are left on the table. The balance of opportunity, cost, and wins is a relevant act, that requires a substantial amount of careful and calculated attention and execution.

2. Looks Are Everything

A heavy focus on UX Design and usability are key components to highly advanced companies.

Rapid iterations on design and function are a pertinent response to customer needs, setting advanced companies on a fast track to favorable brand image and reputation.

3. Right Resource Allocation Goes A Long Way

Introducing new products and features regularly can be taxing on an existing team, and the best people to get the job done may need to be added.

Companies that know how and when to implement talent can successfully curve innovation quickly. From experts in modern frameworks to responsive web, experience is key to get the job done.

4. There’s No Room For Reactive Planning

Upcoming initiatives often have a way of creeping up on companies.

There are typically foundational tasks that need to be taken care of prior to kick-off and resources need to be lined up, in place, and ready to roll when the green light is lit. To circumvent reactive planning, top companies partner with experts to help them tackle foundation tasks, line up the right tools and resources, and plan for big projects.

How and how often companies innovate is a defining metric to consumers – to both meet and exceed customer expectations.

Closing Thoughts

Allotting time for innovation allows organizations to get ahead.

If you concentrate all your energy on operating within the status quo, someone who has learned to set aside time for innovation is going to come along and define the space while you were busy maintaining your current process.

The number one thing you can do to propel your organization forward is to give innovation a leading piece.