<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Avery Eller</title>
    <description>The latest articles on DEV Community by Avery Eller (@fingerguns-on-the-keyboard).</description>
    <link>https://dev.to/fingerguns-on-the-keyboard</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3482505%2F3b4efce9-f4fc-4442-938a-6e1a32214056.jpg</url>
      <title>DEV Community: Avery Eller</title>
      <link>https://dev.to/fingerguns-on-the-keyboard</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/fingerguns-on-the-keyboard"/>
    <language>en</language>
    <item>
      <title>Customer Workflow Redesign Update 1</title>
      <dc:creator>Avery Eller</dc:creator>
      <pubDate>Fri, 17 Oct 2025 23:20:10 +0000</pubDate>
      <link>https://dev.to/fingerguns-on-the-keyboard/customer-workflow-redesign-update-1-3mif</link>
      <guid>https://dev.to/fingerguns-on-the-keyboard/customer-workflow-redesign-update-1-3mif</guid>
      <description>&lt;p&gt;The process of documenting the idiosyncrasies of the [ABC Order] workflow took longer than expected, mostly as a result of my own energy levels&lt;/p&gt;

&lt;p&gt;I ended up doing two passes:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The first just to transcribe the notes that I had taken alongside simple screenshots of each page in the workflow&lt;/li&gt;
&lt;li&gt;The second to dive deeper into the specific elements and their states on each page (remember, there are four [ABC APIs] with their associated variations on the [ABC Order] workflow)&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;With this stage of the documentation fully complete, looking back, more than anything, I wish I had done some research on how to best present a UI breakdown like this as a diagram. Seen below are pixelated examples of a couple of the pages I put together, and I'm not confident the layout will be immediately clear to a third party&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rmgt6pil7fgf14v1kd7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4rmgt6pil7fgf14v1kd7.png" alt=" " width="800" height="293"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frsxflvpm76s0b1yuebtv.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frsxflvpm76s0b1yuebtv.png" alt=" " width="800" height="206"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The next step is to comb through each page of the diagram and call out all elements that asynchronously load data, so that the sources of the data can be discovered--and simultaneously to document each element, facilitating a list of all elements common across multiple pages and workflows&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>learning</category>
      <category>architecture</category>
    </item>
    <item>
      <title>Customer Workflow Redesign Day 0</title>
      <dc:creator>Avery Eller</dc:creator>
      <pubDate>Tue, 09 Sep 2025 23:32:14 +0000</pubDate>
      <link>https://dev.to/fingerguns-on-the-keyboard/customer-workflow-redesign-day-0-43hg</link>
      <guid>https://dev.to/fingerguns-on-the-keyboard/customer-workflow-redesign-day-0-43hg</guid>
      <description>&lt;p&gt;My employer owns a [Monolith Product] that provides customers the ability to place one of two different kinds of [ABC Orders], [ABC Order Type 1] and [ABC Order Type 2]. Customers choose the Location of their [ABC Order] and, depending on that Location, the [Monolith Product] will communicate with one of at least four other [ABC APIs]. Each [ABC API] has a slightly different understanding of what an [ABC Order] consists of, so the workflow that we render varies--both for the Type of the [ABC Order], and for the Location. Many elements overlap, and some elements are completely different&lt;/p&gt;

&lt;p&gt;Like much of the legacy software alive today, the [Monolith Product] was engineered by developers underprepared to deliver the original product requirements on schedule. No judgement, this is simply the state of things&lt;/p&gt;

&lt;p&gt;We would like to redesign this customer workflow so as to&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Replace legacy technology (ASP.NET MVC Razor views) with modern technology (React)&lt;/li&gt;
&lt;li&gt;Reimplement the workflow with more shared components and fewer one-off JQuery functions&lt;/li&gt;
&lt;li&gt;Reimplement the workflow with a more refined user experience&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Product and I sat down last week and walked through the idiosyncrasies of each [ABC Order] workflow. I compiled the notes, and today I began transferring the notes onto a Visio diagram, with one page of notes and screenshots for every page of the workflow. I finished transferring the notes for [ABC Order Type 1 API 1], and intend to transfer one additional set of notes every day until completion. At that point I will begin compiling a list of individual common elements (text boxes, dropdowns, etc.) from the annotated screenshots, so as to determine the full scope of possible common elements&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>frontend</category>
      <category>learning</category>
      <category>architecture</category>
    </item>
  </channel>
</rss>
