
User testing is a crucial tool for gathering feedback on a product, but it's not enough to truly understand and improve user engagement. For the past 13 years, I have been building multi-language platforms for international brands and for a wide variety of users. Even in a space that constantly changes, where users have evolving needs, it's important to also acknowledge the role that experience plays in understanding them.

![](/images/articles/beyond-user-testing-leveraging-frontend-experience/table-computers.jpg 'Photo by <a href="https://unsplash.com/@marvelous?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Marvin Meyer</a> on Unsplash')

Being a Front-End Developer gave me and all my colleagues around the world a unique perspective on user experience. We understand how small design decisions can have a big impact on the user experience, and we have a deep understanding of how users interact with products. By leveraging our experience in front-end development, we can help create products that are not only effective but also enjoyable to use, leading to increased user satisfaction and loyalty.

## The limits of user testing

User testing is a critical component of product development that can help identify usability issues and gather feedback from real users. By testing products with representative users, product teams can gain valuable insights in how users interact with their interfaces and what their pain points are. Whatever you use services like [User Testing](https://www.usertesting.com/), or your own user testing directly with regular users, user testing also possess some limits that can’t be overlooked.

For example, users may not always be able to articulate their needs and preferences accurately, or identify more obvious usability issues that sometimes are more subtle or hidden. User testing is also typically conducted in a controlled environment, which may not always accurately reflect real-wold usage scenarios.

What about people that don’t use technology in a daily basis?

Usually user testing is done by a certain user group or demographics and don’t include 100% of all users. From my point of view, user testing can’t be really complete without testing with people with disabilities. For people with experience in doing accessibility testing with real users, I’m sure you will agree that.

## User testing can lead to success or failure

Through Internet history, user testing had lead to create successful products:

- Slack (which I daily use) is a popular communication tool. During its development, Slack's team conducted user testing to identify usability issues and gather feedback from its target users. This feedback helped them make improvements to the platform, resulting in a product that was easier to use and more engaging for its users.
- Dropbox is a cloud storage platform that allows users to store, share, and collaborate on files. Dropbox's team used user testing to identify pain points and improve the user experience, resulting in a product that was more intuitive and engaging for its users.
- And a lot more…!

But user testing can also fail to uncover critical usability issues which can contribute to the failure of some projects:

- Google Wave was a communication and collaboration platform that was introduced in 2009. User testing suggested that users would appreciate the platform's advanced features and integration with other Google products, but when it was released to the market, [users found the platform confusing and difficult to use](https://www.taskade.com/blog/google-wave-history/), leading to low adoption rates and eventually the discontinuation of the product in January 2018.
- The Amazon Fire Phone was a smartphone introduced by Amazon in 2014. User testing suggested that users would appreciate the phone's unique features, such as the dynamic perspective display, but when it was released to the market, [users found the phone overpriced and underwhelming](https://maestrolearning.com/blogs/amazon-fire-phone/), leading to poor sales and eventually the discontinuation of the product. The lack of empathy towards the users needs was also part of the reasons why it failed.
- Twitter timeline algorithm: In 2016, Twitter also faced public outrage when they introduced an algorithm-based timeline, which did not align with users' preferences for a chronological timeline that allowed them to see real-time tweets in ascending order.

Building a successful project is not an easy task, a lot of factors can influence the success or the failure of a new product. Nowadays, users have different needs. Users switch faster to competitor then before, we have daily examples of that.

User testing is one tool in companies belt that should be used as often as possible, but shouldn’t be the only one.

## Leveraging Front-End experience

Front-End Developers (FED) are not just coders. Usually seen as the ones that “just” integrate designs into HTML, CSS and JavaScript, their [t-shape personalities](https://infinum.com/blog/t-shaped-developers/) is often times overlooked (not all FES have t-shape skills though).

A FED can play a critical role in creating engaging user experiences.

## Collaboration and communication for better user engagement

As I said in [my previous article](https://thedaviddias.dev/articles/how-front-end-developers-ui-ux-could-better-collaborate-together) about Front-End Developers, Web and UX/UI Designers collaboration, collaboration and communication is key in building a successful product.

This collaborative approach allows different perspectives to merge and create a more holistic vision of the product. As Front-End Developers, we have the unique position of working at the intersection of design and technology. We are often the ones who bring the designers' visions to life while ensuring that the product remains functional and user-friendly.

Front-end development is about more than just making things look good. It's about creating a seamless and intuitive interface that guides users through a product. Every button, every transition, every piece of interactive content is a chance to engage users and keep them invested in the product.

## The Benefits of Leveraging Front-End Experience

Front-end developers have a deep understanding of user behavior, as they are responsible for creating the interactive elements that users engage with. They can use this knowledge to create more engaging user interfaces and to guide user testing to focus on areas of the product that are most likely to affect user engagement.

Beyond just implementing designs, a seasoned FED can provide insights and suggest improvements to the UX/UI designs based on their knowledge of what is technically feasible and what would create a smoother user journey. They can spot potential pitfalls in the designs that might be overlooked during user testing.

For example, a developer might notice that a particular design element could cause issues on certain devices or browsers. They might also suggest an alternative way of implementing a feature that enhances the user's experience. I have been advocating about accessibility for years now. Last year, I became [CPACC certified](https://www.accessibilityassociation.org/s/certified-professional) and I continue to advocate for accessibility in my daily work. Not everyone understand what web accessibility is and how it impacts users. It takes time and effort to educate people about it.

## The Future of User Engagement

As technology advances, users' expectations also rise. They demand faster, smoother, and more intuitive interfaces. User testing will always be a vital tool for gathering feedback, but to meet these evolving demands, we need to go beyond testing.

Incorporating the front-end developer's expertise into the design process and user testing can help create a product that not only meets the users' needs but also provides an engaging and satisfying experience.

We must continue to push the boundaries, experiment with new technologies, and constantly seek ways to better understand and improve user engagement. Only by doing this can we hope to create products that users will love to use.

Front-End Developers bring a valuable perspective to the product development process. Let's use it to its fullest potential to create engaging, user-friendly products. After all, the success of any product lies in the satisfaction of its users.

---

At the end, user engagement is not just about the single experience of a product but the entire journey. It's about creating an engaging, intuitive, and satisfying journey that users want to return to again and again. And Front-End Developers play a crucial role in crafting this journey.

Remember, user testing is a part of the journey, not the destination. We must use all the tools at our disposal, and that includes leveraging the front-end development experience to truly understand and improve user engagement.

Let's continue to build with the user in mind, always striving to enhance their journey, their experience, and ultimately, their engagement.

## Resources

- "[Why User Experience Matters to Front-End Developers](https://uxdesign.cc/why-user-experience-matters-to-front-end-developers-583e3c3a4f4b)" by UX Design
- "[The Benefits of Combining User Testing and UX Design](https://www.usertesting.com/blog/benefits-of-combining-user-testing-and-ux-design/)" by UserTesting
- "[Why User Experience (UX) is Vital for Front-End Developers](https://echobind.com/blog/why-user-experience-ux-is-vital-for-front-end-developers/)" by Echobind


For over a decade, I've been collaborating with web designers, and it's clear that we sometimes have differing perspectives. 'User testing' often takes center stage in decision-making, with the rich insights of frontend experience taking a backseat. But here's the thing - collaboration is pivotal. Recognizing the value that frontend developers bring is crucial for any team aiming to succeed in our fast-paced digital age.

Beyond User Testing: Leveraging Frontend Experience


I've recently spent some time working with Next.js projects. Once my projects are done, the next logical step is to deploy these apps to be accessible to the world.

I have naturally used the [Vercel platform](https://vercel.com/), which couldn't be easier to use and deploy your application with ease. Then I tried [AWS Amplify](https://aws.amazon.com/amplify/), which I particularly love but for now, requires you to use the [Serverless Framework](https://docs.amplify.aws/start/getting-started/hosting/q/integration/next) if you want to benefit from Server Side Rendering (SSR) capabilities.

Then, I remembered that Netlify has added support for Next.js, including dynamic routes, Preview Mode and more around November 2020. It was time for me to try it! But I also wanted to have a real CI/CD in place, to test my code and do more actions before deploying to Netlify. That's where Github Actions came to the rescue!

I'm going to describe in this article, all the steps you need to take to deploy your Next.js application on Netlify using Github Actions.

> The full version of the project can be [found on Github](https://github.com/thedaviddias/next-netlify-github-actions-starter).

## Create a new Next.js App and push it to Github

As always, you need to have a recent version of Node and NPM installed on your machine. I personally recommend using `NVM` since it simplifies having multiple active Node.js versions.

To create a new Next.js project, type this command in your CLI:

```bash
npx create-next-app name-of-your-app

# move into the app's root directory
cd ~/path-to-projects/name-of-your-app/
```

This will install a new application using a basic Next.js boilerplate. Don't forget to move to your app root folder before launching any next commands.

Once your Next.js project is locally created, you can create a new project on Github and push the code generated.

_(For those you are new to coding, feel free to [follow these steps](https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-new-repository) to create a new repository on Github.)_

## Setting up your Netlify project

There are 2 ways of creating a new Netlify project:

- Creating a project online [here](https://app.netlify.com/)
- Using the Netlify CLI.

Let's use the CLI this time, I'm sure you already created a new project in the past using the Netlify interface.

Let's start by installing `netlify-cli` globally:

```bash
npm install netlify-cli -g
```

Then check if the installation succeeds, confirming with this command:

```bash
netlify
```

### Netlify account authentication

Now you need to link your computer with your Netlify account. To authenticate with Netlify, you need to run this command:

```bash
netlify login
```

This will open a new tab in your browser where you'll need to "Authorize your Application" and then grant access to Netlify CLI.

In case you already logged in previously, the console will output:

```bash
Already logged in via netlify config on your machine
```

### Netlify project creation

Now that your CLI is authorized to communicate with your Netlify account, it's time to programmatically create a new project:

```bash
# create a new Netlify site using the Netlify shortcut: ntl
ntl init
```

The first question you are asked is if you want to connect this directory to an existing Netlify site or create & configure a new site. Choose **Create & configure a new site**:

![Connect to an existing directory or create and configure a new site](/images/articles/connect-existing-direction.jpeg)

Then you have to choose your **team**:

![Question about the name of the team](/images/articles/question-name-team.jpeg)

Choose the **name of your application**:

![Screenshot of the CLI asking for the name of your application](/images/articles/cli-name-application.jpeg)

After entering the name of your project, the site is created and few URLs populated the CLI which gave you access to your admin URL, the URL of your site and the Site ID. Keep the site ID aside, you will need that number later on.

For the next 3 questions (build, start and function), **insert a space**. We are not going to directly use the NPM scripts, our Github actions will later trigger each command.
![Screenshot of the CLI with the build, start and function script command suggestion](/images/articles/cli-build-start-function-script.jpeg)

Finally, automatically create a netlify.toml file, which we will edit later. If your respond no, you can still create that file manually at the root of your project.

![Screenshot of the CLI asking to create a netlify.toml file](/images/articles/automatically-create-netlify-toml.jpeg)

Once you provided an answer to all the questions, your terminal should look like this:

![Screenshot of the CLI after all the questions are answered](/images/articles/cli-after-all-questions-answered.jpeg)

## Updating our Netlify project

It's now time to change some options on our Netlify project. Open directly your project on Netlify with this command:

```bash
ntl open
```

![Screenshot of the Netlify project created](/images/articles/netlify-project-created.jpeg)

You should see that our production deployment failed. You don't have to worry, this is totally normal. We need to disable our automatic build because our Github Actions will take care of it.

Go in your Settings > Build & deploy. Click on `Edit settings` and `Stop builds`. Save.

![Screenshot of the Build settings on Netlify](/images/articles/build-settings-netlify.jpeg)

Just below, go to the `Deploy contexts` section and select `None` for the Deploy previews.

![Screenshot of the Deploy context section on Netlify](/images/articles/deploy-context-section-netlify.jpeg)

Don't worry, like the build, we will create our preview URL using Github actions.

## Enable server-side rendering on Netlify

If you have been using Next.js you are aware of the capability to do the server-side rendering. But usually, you will need to configure a Node server and that's something we don't want to have to deal with. Around October 2020, the Netlify team started working on `next-on-netlify`, a utility to enable SSR in Next.js on Netlify. That's what we are going to use here.

_(In case you are not interested in Github Actions and want to use Netlify to build your project, take a look at how to use the [Next on Netlify Plugin](https://github.com/netlify/netlify-plugin-nextjs). It directly wraps your Next.js app and doesn't need as much configuration as we are going to explain.)_

Let's start by installing our utility:

```bash
npm install -D next-on-netlify
```

### Set Next.js target to serverless

We must build our Next.js app as a serverless app

```javascript:next.config.js
module.exports = {
  // Target must be serverless
  target: "serverless",
};
```

### Add a post build hook

We need to add a `postbuild` command that is automatically triggered after our `build` command finishes. `next-on-netlify` does a lot of "magic" to copy and set up our Next.js app to be correctly hosted on Netlify.

```bash:package.json
{
  "name": "next-netlify-github-actions-starter",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "postbuild": "next-on-netlify"
  },
  ...
}
```

### Configure Netlify

Remember the file that was automatically created and called `netlify.toml`? You can remove all the boilerplate and replace it with only this code (be careful in respecting the indentation):

```toml:netlify.toml
[build]
  command   = ""
  functions = "out_functions"
  publish   = "out_publish"
```

Technically, when `next-on-netlify` will run, it will take what is in these folders and host it on Netlify. **_DO NOT CHANGE_** the name of these folders as these are hardcoded into the utility.

Don't forget to add these line to your `.gitignore` file

```git:.gitignore
# Netlify build
out_*
```

You can commit your files. Let's work now on the Github Actions configuration.

## Github Actions configuration

The netlify configuration is now done, all dependencies installed, it's time to configure our Github actions which will test, build and deploy our Next.js application to Netlify. But before that, we need to set up some Github secrets that we will need in our GH Actions.

Go to your `Github project > Settings > Secrets > New repository secret`

| Actions secret name  | Comments                                                                               |
| -------------------- | -------------------------------------------------------------------------------------- |
| `NETLIFY_AUTH_TOKEN` | [Request your token](https://app.netlify.com/user/applications#personal-access-tokens) |
| `NETLIFY_SITE_ID`    | The site to where deploy your site (get it from the API ID on your Site Settings)      |

![Screenshot of the Actions secrets page on Github](/images/articles/actions-secrets-netlify.jpeg)

Create a new file called `main.yml` inside `.github/workflows`. Copy-paste the following code and read the explanation of it after this snippet.

```yml:.github/workflows/main.yml
name: Main workflow

on:
  pull_request:
    branches:
      - master
      - main
    types: [opened, synchronize, reopened]

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      # Cache node modules and next folder
      - name: 📬 Caching
        uses: actions/cache@v2
        with:
          path: |
            **/node_modules
            ${{ github.workspace }}/.next/cache
          key: ${{ runner.os }}-modules-${{ hashFiles('**/package-lock.json') }}

      - name: Use Node.js 14.x
        uses: actions/setup-node@v1
        with:
          node-version: 14.x

      - name: 🧰 Install dependencies
        run: npm run install

      - name: 📦 Build project
        run: npm run build --if-present

      # - name: 🧹 Run lint
      #   run: npm run lint

      # - name: 🐛 Run tests
      #   run: npm run test

      # Deploy to Netlify with a personalized message
      - name: 🚀 Deploy to Netlify
        id: deploy-netlify
        uses: netlify/actions/cli@master
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        with:
          args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
```

### Detailed explanation of the main workflow file

1. **_Give a name_** to your Github action
2. Choose which **_type of the event_** should trigger this action, you can use push instead of pull_request, it's up to you.
3. Specify on **_which system_** this action should be launched, I choose the latest version of Ubuntu (Linux).
4. **_Checkout your code_**
5. **_Cache your node modules_** and the .next/cache folder. When you will first run this action, it will take some time. On the second launch, the action will take the modules that exist in the cache and will then proceed way faster.
6. Specify the **_version of Node_** you want to use, in my case, I choose the most recent version of Node 14th.
7. **_Install the dependencies_** of your project.
8. **_Build your project_**. Remember that after the build, the post-build command will be launch. This is what you should see in the `build` logs in your Github Action tab:
   ![Screenshot of the build-in Github Action](/images/articles/build-in-github-action-netlify.jpeg)
9. I added lint and test commands, which I commented. You can use these to trigger ESLint, Jest (even Cypress) or any other plugin that ensures your code doesn't have any issue.
10. Finally, we trigger the Netlify deployment to deploy our Next.js app to Netlify. 🎉

![Screenshot of all Github actions](/images/articles/all-github-actions-netlify.jpeg)

You may have seen an argument passed to the Netlify deploy:

```yml:.github/workflows/main.yml
args: deploy -m 'v${{ steps.package-version.outputs.current-version}} ・ ${{ github.head_ref }}'
```

This will add a message for each Deploy Preview, a way to keep track of which PR generated which Deploy.

![Screenshot of the Deploy page on Netlify](/images/articles/deploy-netlify-preview.jpeg)

On the same deploy page, you can click on the Deploy Preview and access your app using the preview URL.

A better way would be to use another task to automatically populate your pull request with the log and preview URL. At the end of your file, add this action:

```yml:.github/workflows/main.yml
# Publish the inspect and preview link to the PR
- name: 👓 Netlify Preview URL
  uses: unsplash/comment-on-pr@master
  env:
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    OUTPUT: "This pull request is being automatically deployed to Netlify.\n\n🔍 Inspect: ${{ steps.deploy-netlify.outputs.NETLIFY_LOGS_URL }}\n✅ Preview: ${{ steps.deploy-netlify.outputs.NETLIFY_URL }}"
  with:
    msg: ${{ env.OUTPUT }}
    check_for_duplicate_msg: false
```

This will automatically create a comment in your PR.

![Screenshot of the PR on Github specifying the link to the logs and preview deploy URL](/images/articles/pr-github-preview-deploy-url.jpeg)

## Summary

If you are still reading this, congrats! You have succeeded in deploying a fully enabled Next.JS application to Netlify using Github Actions!

The next step for you now will be to add some linting rules and tests to ensure that you are sending to Netlify, an app that works perfectly!

Feel free to [download or fork the `next-netlify-github-actions-starter`](https://github.com/thedaviddias/next-netlify-github-actions-starter), open an issue if you find any problem or send me any suggestion to make it better!

### Sources:

- [How to Deploy Next.js Sites to Netlify](https://www.netlify.com/articles/2020/11/30/how-to-deploy-next.js-sites-to-netlify/) by Jason Lengstorf
- [Preview Mode for Next.js now fully supported on Netlify](https://www.netlify.com/articles/2020/10/27/preview-mode-for-next.js-now-fully-supported-on-netlify/) by Cassidy Williams
- [Announcing one-click install Next.js Build Plugin on Netlify](https://www.netlify.com/articles/2020/12/07/announcing-one-click-install-next.js-build-plugin-on-netlify/) by Cassidy Williams


Are you interested in Next.js and how to deploy your app to Netlify using Github Actions? Take a look at how Netlify allows you for free, to deploy your app with Server Side Rendering capabilities and more!.

Web development articles

Beyond User Testing: Leveraging Frontend Experience

How to deploy your Next.js app on Netlify using Github Actions