DEV Community

Dennis
Dennis

Posted on

URL Tracker DevLog #1: New design

In June 2022, I posted my plans for the URL Tracker on github. Since that time, we've finished the first three phases and we have now started with phase 4. In this series, I will post short updates on the progress that I make on the URL Tracker project and I will dive deeper into the reasons behind the choices that I make.

The philosophy

The goal of the URL Tracker is to put the content editor in control of their website. With relevant information, the URL Tracker aims to provoke action from content editors to make their website better. Content editors should understand what they need to do and why.

Let's take a deeper dive into the differences between the old design and the new one:

The dashboard

This is what the dashboard currently looks like:

The current URL Tracker dashboard

As a user, this is what I see: "Your website is broken! All these pages were not found! You are such a bad content editor!". So what can I do about it? Nothing really, the number is not clickable, there's nothing that obviously says: "Click here to fix", so I'm left demotivated and unsatisfied. At this point I am no longer interested in anything else on the screen. I don't know what any of this means and what I am supposed to do.

Introducing the new dashboard:

The design of the new dashboard of the URL Tracker

Firstly, there's the familiar "128 pages were not found last week", but with an additional button that takes me to the overview where I can fix them. On top of that, it's not screaming as much that I'm a bad content editor and it doesn't feel as if my website is broken.

Going back a step, I see there is an introductory message that tells me exactly what I'm looking at, what I'm supposed to do and why (The actual text isn't set in stone yet). Now I know what to expect from my overview.

The last thing I see is the header "Top 10 recommendations". If I look at the first recommendation, I see that an image could not be found, I see which image it is and the options that I can choose from to immediately resolve the issue. I know exactly what I need to do now.

Creating redirects

The current way to create a redirect is as follows:

  1. Go to the redirects tab
  2. Click "create redirect" button
  3. Select a root node!?
  4. Enter an old URL
  5. Optionally enter a regex, without explanation
  6. Select a redirect node
  7. Optionally enter a redirect URL
  8. Select other options
  9. Submit

There are several things to improve:

  • No content editor understands what a "node" is.
  • Why do I have to select a root node? I just want to enter a URL
  • Why can I both enter an old URL and regex? What is a regex? I just want to enter a URL
  • Why can I only select a page from the root node that I selected?
  • Why do I also have to enter a Redirect URL? (I don't, but I don't see that as a content editor)
  • I don't care about query strings and stuff
  • That was complex? How do I know for sure that it works?

Introducing the new approach:

Design for the new redirect experience

  1. Click "new redirect"
  2. Optionally check "permanent"
  3. Select source
  4. Select target
  5. Submit

The obvious benefit here is a much more logical flow. Creating redirects is the most important feature of the plugin, so the feature is immediately accessible from any tab of the dashboard.
The dialogue should be more intuitive to use because it only shows the things that are relevant. Creating a redirect is now really as simple as entering a source and a target.

That's it for now

There are many more interesting features in the design that I will look at in another post. In the next devlog I'll be diving a bit into the code changes behind the redesign that I've made so far.

For now I'll say: thank you for reading, don't forget to leave a like, leave a comment, ask questions and let me know what you think. Any feedback is welcome.

Top comments (0)