How to Use the PageShare Pre-Deploy Web App Feedback Tool

Krystian KrukKrystian Kruk

When implementing a new feature into your web application, we can identify several necessary steps:

  1. Analyzing the problem and finding the best solution
  2. Designing the required UI changes
  3. Development
  4. Code review
  5. Deploying to a staging environment
  6. Testing
  7. Deploying to production

This cycle is repeated often and is a daily routine for many of us. So, how can we improve this process and significantly increase our team's productivity?

There are three major factors that can slow down development:

  1. Incorrect ideas or insufficient analysis process - Your team's time is extremely valuable, so you need to ensure that they are working on things that matter. Don't skip this process and rush to see the effects because the more cycles of feedback you require, the more costly your product becomes.
  2. Communication - According to a survey by Tidelift and The New Stack, developers spend 23% of their time in meetings, and this doesn’t include time spent on real-time communication platforms like Slack. Constant messages, context switching, and meetings are the main pitfalls when it comes to engineers' efficiency.
  3. Frequent changes in decisions - Don't get me wrong, iterating and being agile is beneficial, but you need to find a balance. The further along you are, the costlier it is to go back. Look at the graph below that shows how the time needed to fix a bug depends on when it is discovered. This also applies to feature changes.

Relative cost of changes in web development depends on the stage

As you can see, implementing a change during stage environment testing is significantly slower than doing it right away during implementation.

PageShare brings the shift-left testing approach to your team ("test early and often"). It can be used in scenarios:

A) Frontend developer asks for a feedback

With PageShare, you can speed up your team’s feedback loop by allowing developers to gain feedback even before the actual code review.

Steps for a developer:

  1. Open a local version of the web application (e.g., http://localhost:3000).
  2. Click on the "PageShare" extension button.
  3. Optionally, pin comments with questions or describe what’s changed.
  4. Click the "Share page" button.
  5. Make the uploaded page available to your team or make it public.
  6. Send the link to the shared page to coworkers (e.g., on a Slack channel).

Later, designers can use our visual inspect tool to pinpoint design changes, and managers can pin comments and discuss directly on the working product.

The shared website and pinned comments will remain intact regardless of the developer's actions.

B) Manager requests a progress update

Sometimes, it’s beneficial to check in and see how things are being implemented, especially when working on a significant new feature. A manager can ask a developer to upload the current web app progress (see point A) and get the link to the shared website in seconds, not hours or days. This link will show the current progress and allow you to use the web app, enabling you to make necessary decisions without any further delay. Just pin a comment directly on the elements you want to change before they reach code review, deployment, testing, and even further feedback loops.

Let's start

Getting started is easy and doesn’t require any code implementation:

  1. Install the PageShare Extension.
  2. Click on the PageShare icon on a page you want to share.
  3. Click "Share page".
  4. Make the URL public and send it to your coworker.

In conclusion, PageShare can significantly reduce development time for web applications by allowing team members to gain feedback during the feature implementation phase. By tightening feedback loops, not only will your product evolve faster, but your team will also be happier with a reduced number of production bug reports. Don't forget to check our list of pre-deploy feedback tool features if you want to learn more about how PageShare can help your team.