Add Task-It design journey (#256)

* Add Task-It design journey * Update bullet points for research methods * Update Designs page with new content
AdamJ · Nov 7, 2023 · 12d87a8 · 12d87a8
1 parent 08b081b
commit 12d87a8
Show file tree

Hide file tree

Showing 48 changed files with 586 additions and 9 deletions.
diff --git a/docs/css/style.css b/docs/css/style.css
@@ -22441,3 +22441,18 @@ footer .footer-right,
   color: inherit;
   text-decoration: underline;
 }
+
+.card-cover {
+  background-repeat: no-repeat;
+  background-position: top right;
+  background-size: cover;
+}
+
+.text-shadow-1 {
+  text-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
+}
+
+.bi {
+  vertical-align: -0.125em;
+  fill: currentColor;
+}
diff --git a/docs/designs/index.html b/docs/designs/index.html
@@ -89,8 +89,26 @@ <h1 class="display-1 fw-bold text-break">designs</h1>
   </p></div>
 
 <content>
-  <!-- Application Lifecycle Management -->
-<div class="container-xxl py-3 mt-3 text-bg-light">
+  <!-- Task-It! -->
+<div class="container-xxl py-3 mt-3">
+  <div class="position-relative overflow-hidden text-center bg-body-tertiary card-cover rounded" style="background-image: url(/img/task-it_product.png);">
+    <div class="col p-lg-5" style="background-color: rgba(0, 0, 0, .8); height: 500px;">
+      <div class="position-absolute top-50 start-50 translate-middle">
+        <h1 class="display-3 fw-bold text-white">Task-It!</h1>
+        <h3 class="fw-normal mb-3 text-white">One enterprise task management system to rule them all.</h3>
+        <div class="d-flex gap-3 justify-content-center lead fw-normal">
+          <a href="/designs/task-it" role="button" class="btn btn-dark" alt="Click to experience the Task-It! journey">
+            the journey
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="product-device shadow-sm d-none d-md-block"></div>
+    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+  </div>
+</div>
+<!-- Application Lifecycle Management -->
+<div class="container-xxl py-3 mt-5">
   <div class="row px-3 align-items-center">
     <div class="col-md-6">
       <img src="/img/OSIO-laptop-screen-1200.png" class="d-block mx-lg-auto img-fluid" alt="Application Lifecycle Management thumbnail" width="700" height="500" loading="lazy">
@@ -105,7 +123,7 @@ <h2>Application Lifecycle Management</h2>
   </div>
 </div>
 <!-- Customer Engagement Application -->
-<div class="container-xxl py-3 mt-3">
+<div class="container-xxl py-3 mt-3 text-bg-light">
   <div class="row px-3 align-items-center">
     <div class="col-md-6 text-center text-md-start">
       <h2>Customer Engagement App</h2>

diff --git a/docs/designs/task-it/index.html b/docs/designs/task-it/index.html
diff --git a/docs/img/task-it_flow-errors-forms.png b/docs/img/task-it_flow-errors-forms.png
diff --git a/docs/img/task-it_flow-errors-general.png b/docs/img/task-it_flow-errors-general.png
diff --git a/docs/img/task-it_flow-success.png b/docs/img/task-it_flow-success.png
diff --git a/docs/img/task-it_product.png b/docs/img/task-it_product.png
diff --git a/docs/img/task-it_task-details_mockup1.png b/docs/img/task-it_task-details_mockup1.png
diff --git a/docs/img/task-it_task-details_mockup2.png b/docs/img/task-it_task-details_mockup2.png
diff --git a/docs/img/task-it_task-details_mockup3.png b/docs/img/task-it_task-details_mockup3.png
diff --git a/docs/img/task-it_task-details_mockup4.png b/docs/img/task-it_task-details_mockup4.png
diff --git a/docs/img/task-it_task-details_wireframe.png b/docs/img/task-it_task-details_wireframe.png
diff --git a/docs/img/task-it_user-flow.png b/docs/img/task-it_user-flow.png
diff --git a/docs/img/task-it_user-states.png b/docs/img/task-it_user-states.png
diff --git a/docs/img/task-it_user-survey.png b/docs/img/task-it_user-survey.png
diff --git a/docs/img/track-it_flow-errors-forms.png b/docs/img/track-it_flow-errors-forms.png
diff --git a/docs/img/track-it_flow-errors-general.png b/docs/img/track-it_flow-errors-general.png
diff --git a/docs/img/track-it_flow-success.png b/docs/img/track-it_flow-success.png
diff --git a/docs/img/track-it_task-details_mockup1.png b/docs/img/track-it_task-details_mockup1.png
diff --git a/docs/img/track-it_task-details_mockup2.png b/docs/img/track-it_task-details_mockup2.png
diff --git a/docs/img/track-it_task-details_mockup3.png b/docs/img/track-it_task-details_mockup3.png
diff --git a/docs/img/track-it_task-details_mockup4.png b/docs/img/track-it_task-details_mockup4.png
diff --git a/docs/img/track-it_task-details_wireframe.png b/docs/img/track-it_task-details_wireframe.png
diff --git a/docs/img/track-it_user-flow.png b/docs/img/track-it_user-flow.png
diff --git a/docs/img/track-it_user-states.png b/docs/img/track-it_user-states.png
diff --git a/docs/img/track-it_user-survey.png b/docs/img/track-it_user-survey.png
diff --git a/docs/sitemap.xml b/docs/sitemap.xml
@@ -57,6 +57,13 @@
 
   </url>
 
+  <url>
+    <loc>http://localhost:8080/designs/task-it/</loc>
+
+    <lastmod>2023-09-21T18:55:26Z</lastmod>
+
+  </url>
+
   <url>
     <loc>http://localhost:8080/designs/customer-engagement/</loc>
 

diff --git a/social/pages.json b/social/pages.json
@@ -39,6 +39,11 @@
    "imgName":"application-lifecycle-management"
 	},
 
+	{
+   "title":"Task-It!",
+   "imgName":"task-it"
+	},
+
 	{
    "title":"Customer Engagement App",
    "imgName":"customer-engagement-app"

diff --git a/src/img/task-it_flow-errors-forms.png b/src/img/task-it_flow-errors-forms.png
diff --git a/src/img/task-it_flow-errors-general.png b/src/img/task-it_flow-errors-general.png
diff --git a/src/img/task-it_flow-success.png b/src/img/task-it_flow-success.png
diff --git a/src/img/task-it_product.png b/src/img/task-it_product.png
diff --git a/src/img/task-it_task-details_mockup1.png b/src/img/task-it_task-details_mockup1.png
diff --git a/src/img/task-it_task-details_mockup2.png b/src/img/task-it_task-details_mockup2.png
diff --git a/src/img/task-it_task-details_mockup3.png b/src/img/task-it_task-details_mockup3.png
diff --git a/src/img/task-it_task-details_mockup4.png b/src/img/task-it_task-details_mockup4.png
diff --git a/src/img/task-it_task-details_wireframe.png b/src/img/task-it_task-details_wireframe.png
diff --git a/src/img/task-it_user-flow.png b/src/img/task-it_user-flow.png
diff --git a/src/img/task-it_user-states.png b/src/img/task-it_user-states.png
diff --git a/src/img/task-it_user-survey.png b/src/img/task-it_user-survey.png
diff --git a/src/pages/designs.md b/src/pages/designs.md
@@ -8,8 +8,26 @@ eleventyNavigation:
   order: 2
 ---
 
+<!-- Task-It! -->
+<div class="container-xxl py-3 mt-3">
+  <div class="position-relative overflow-hidden text-center bg-body-tertiary card-cover rounded" style="background-image: url({{ '/img/task-it_product.png' | url }});">
+    <div class="col p-lg-5" style="background-color: rgba(0, 0, 0, .8); height: 500px;">
+      <div class="position-absolute top-50 start-50 translate-middle">
+        <h1 class="display-3 fw-bold text-white">Task-It!</h1>
+        <h3 class="fw-normal mb-3 text-white">One enterprise task management system to rule them all.</h3>
+        <div class="d-flex gap-3 justify-content-center lead fw-normal">
+          <a href="/designs/task-it" role="button" class="btn btn-dark" alt="Click to experience the Task-It! journey">
+            the journey
+          </a>
+        </div>
+      </div>
+    </div>
+    <div class="product-device shadow-sm d-none d-md-block"></div>
+    <div class="product-device product-device-2 shadow-sm d-none d-md-block"></div>
+  </div>
+</div>
 <!-- Application Lifecycle Management -->
-<div class="container-xxl py-3 mt-3 text-bg-light">
+<div class="container-xxl py-3 mt-5">
   <div class="row px-3 align-items-center">
     <div class="col-md-6">
       <img src="{{ "/img/OSIO-laptop-screen-1200.png" | url }}" class="d-block mx-lg-auto img-fluid" alt="Application Lifecycle Management thumbnail" width="700" height="500" loading="lazy">
@@ -25,7 +43,7 @@ eleventyNavigation:
 </div>
 
 <!-- Customer Engagement Application -->
-<div class="container-xxl py-3 mt-3">
+<div class="container-xxl py-3 mt-3 text-bg-light">
   <div class="row px-3 align-items-center">
     <div class="col-md-6 text-center text-md-start">
       <h2>Customer Engagement App</h2>

diff --git a/src/pages/designs/alm.md b/src/pages/designs/alm.md
@@ -5,7 +5,7 @@ description: "A one-stop-shop for a team's planning and project lifecycle manage
 eleventyNavigation:
   key: Designs
   parent: Designs
-  order: 1
+  order: 2
 ---
 <div class="container mb-5">
   <dl class="row">

diff --git a/src/pages/designs/customer-engagement.md b/src/pages/designs/customer-engagement.md
@@ -5,7 +5,7 @@ description: "For this project, I was tasked with improving the overall user exp
 eleventyNavigation:
   key: Designs
   parent: Designs
-  order: 2
+  order: 3
 ---
 
 <div class="container mb-5">

diff --git a/src/pages/designs/district25.md b/src/pages/designs/district25.md
@@ -5,5 +5,5 @@ description: "A website revamp for the 25th Masonic District of Masons in Massac
 eleventyNavigation:
   key: Designs
   parent: Designs
-  order: 4
+  order: 5
 ---
diff --git a/src/pages/designs/task-it.md b/src/pages/designs/task-it.md
@@ -0,0 +1,187 @@
+---
+title: "Task-It!"
+abbreviation: "task"
+description: "One enterprise task management system to rule them all."
+eleventyNavigation:
+  key: Designs
+  parent: Designs
+  order: 1
+---
+<div class="container mb-5">
+  <dl class="row">
+    <dt class="col-sm-2">Role</dt>
+    <dd class="col-sm-10">Lead Designer</dd>
+    <dt class="col-sm-2">Areas</dt>
+    <dd class="col-sm-10">User research, Wireframes, User journeys, Mockups, Prototyping</dd>
+    <dt class="col-sm-2">Problem</dt>
+    <dd class="col-sm-10">After more than a decade of minimal updates, multiple subscription services, and independent teams, it became apparent that a single, scalable solution was needed. This project was to replace the existing systems, eliminating costs and overhead.</dd>
+    <dt class="col-sm-2">Challenge</dt>
+    <dd class="col-sm-10">With multiple systems container millions of tasks (both current and historical) as well as a growing need for various integrations, it was apparent that the user base would be the biggest challenge. Creating something that could not only handle all of the various methods of work, but also the vast historical nature of teams, presented a very unique situation. Additionally, the product had to be one that <i>all</i> users could utilize, no matter their working method. This included, but was not limited to, users with accessibility needs, users who preferred "terminal" or "keyboard" commands, and those who relied on standard keyboard-mouse usage.</dd>
+    <dt class="col-sm-2">Constraints</dt>
+    <dd class="col-sm-10">The biggest constraint was that of time. As each day passed, users were onboarded to either the older solution or to products that required licenses and cost the company money. The team was given one year to put together an initial release to be announced at an upcoming conference.</dd>
+  </dl>
+  <hr class="my-5">
+  <h2>The Process</h2>
+  <p>Before any design work (wireframes, mockups, prototypes) could begin, extensive user research and testing was needed.</p>
+  <p>Research methods with example questions:
+    <ul>
+      <li>User interviews
+        <ul>
+          <li>Ask users what their role is on their product team.</li>
+          <li>What product(s) do they use to manage their work?</li>
+          <li>If they do not use the existing internal product, why not?</li>
+        </ul>
+      </li>
+      <li>Competitive analysis
+        <ul>
+          <li>What products are used internally, besides the previous internal-built system?</li>
+          <li>Why are they used? What do they provide that the current internal system does not?</li>
+        </ul>
+      </li>
+      <li>On-hand testing
+        <ul>
+          <li>As a user, I needed to work within the system we were working to replace so that I can find the issues that currently exist.</li>
+          <li>Findings were compared against user interviews. Those interviews were also used as a basis for various testing methods.</li>
+        </ul>
+      </li>
+      <li>Observe users
+        <ul>
+          <li>Watch how users use the products: where do they always visit? What tasks are they always performing?</li>
+        </ul>
+      </li>
+    </ul>
+  </p>
+  <p>Once a baseline had been established, the first round of user flow diagrams and analysis took place. Each step in the various user flows had two goals:
+    <ol>
+      <li>Follow user expectations
+        <ul>
+          <li>Users expected to be able to perform basic tasks, such as creating work items, viewing work items, and organizing their work in a single system.</li>
+        </ul>
+      </li>
+      <li>Simplify existing processes
+        <ul>
+          <li>Users would not accept a more complicated process. Interviews taught me that anything more complicated than what they had would be a deal-breaker for switching to, no matter the directives from management.</li>
+        </ul>
+      </li>
+    </ol>
+  </p>
+  <h2>Target Audience</h2>
+  <p>For the initial release (scoped internally as a "beta"), the target audience consisted of Individual Contributors (IC), with a mix of high-interaction and low-interaction users. These were categorized as "Contributors", "Owners", and "Viewers".</p>
+  <ul>
+    <li>Contributor
+      <ul>
+        <li>Those who actively added items to a team's task queue.</li>
+      </ul>
+    </li>
+    <li>Owner
+      <ul>
+        <li>Individuals who were, at a high-level, responsible for the delivery and success daily and long-term tasks and goals. While not ICs, <strong>Owners</strong> had a direct hand in what tasks teams took on.</li>
+      </ul>
+    </li>
+    <li>Viewer
+      <ul>
+        <li>Those who stayed on the "outside" of the day-to-day operations, but could influence the work taking place. <strong>Viewers</strong> were not considered to be a top-level user, but the entire process had to take into account their work. If things became harder for them to see/find, then they were likely to become a blocker to adoption.</li>
+      </ul>
+    </li>
+  </ul>
+  <p>After discussions with Project Management (PM), it was determined that the target audience would be broken down into tiers: <strong>Tier 1</strong> and <strong>Tier 2</strong>.
+    <ul>
+      <li><strong>Tier 1</strong> consisted of those who used the existing solutions multiple times per day and could assist with driving adoption. These were the <u>Contributors</u>.
+      </li>
+      <li><strong>Tier 2</strong> consisted of those who interactive with existing solutions on a weekly basis, and then only to monitor the work being done by those in Tier 1.
+      </li>
+    </ul>
+  </p>
+
+  <h2>User flows, Wireframes, and Mockups</h2>
+  <p>For the initial Task Details view, user flows and wireframes were used to identify possible errors. The findings from this work would go on to determine the direction of the final mockups.</p>
+  <div class="row">
+    <div class="col-md-6">
+      <p class="fw-semibold mb-0 text-body-emphasis">User flows</p>
+      <figure class="figure">
+        <img src="../../img/task-it_user-flow.png" class="figure-img img-fluid rounded" alt="Image of the user flow" loading="lazy">
+        <figcaption class="figure-caption">Basic user flow - <a href="../../img/task-it_user-flow.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+    <div class="col-md-6">
+      <p class="fw-semibold mb-0 text-body-emphasis">User states</p>
+      <figure class="figure">
+        <img src="../../img/task-it_user-states.png" class="figure-img img-fluid rounded" alt="Image of the various user flow states" loading="lazy">
+        <figcaption class="figure-caption">User flow states <a href="../../img/task-it_user-states.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+  </div>
+  <h3>Initial findings</h3>
+  <p>Based off of these user flows, I determined that the success and failures paths needed to be looked at further. Depending on the user, these paths had the potential to break experiences and decrease the usability and delight in the product.
+  </p>
+  <div class="row">
+    <div class="col-md-6">
+      <h3>Wireframes</h3>
+      <p>When creating wireframes, I start by taking an existing components (whether already in the application or from the component library in use) and lay out my page. From there, I begin to add some details (using the <code>redacted script</code> font) and basic headings. This is then reviewed with PM, Development, and, if available, fellow UX designers.</p>
+      <figure class="figure">
+        <img src="../../img/task-it_task-details_wireframe.png" class="figure-img img-fluid rounded" alt="Image of the task details wireframe" loading="lazy">
+        <figcaption class="figure-caption">Task details wireframe - <a href="../../img/task-it_task-details_wireframe.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+    <div class="col-md-6">
+      <h3>Mockups</h3>
+      <p>After reviews have been completed on the wireframes, mockups are created. In my process, I utilize mockups to get the full look/feel of the page without interactions. Once completed, these are used for user testing as well as final review with the development team.</p>
+      <figure class="figure">
+        <img src="../../img/task-it_task-details_mockup1.png" class="figure-img img-fluid rounded" alt="Image of the first version of the task details mockup" loading="lazy">
+        <figcaption class="figure-caption">Task details mockup - <a href="../../img/task-it_task-details_mockup1.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+  </div>
+
+  <h2>Testing and Revisions</h2>
+  <p>As part of the iterative process, I consistently looked at user feedback and heat-mapping to determine if there were any changes needed. From the beginning, it was known that additional attributes would be made available to users and that the Task Details page would have to be able to adapt accordingly.</p>
+  <p>As part of the testing process, I created a card-sorting survey for users, where I included all of the existing attributes, as well as some future-planned attributes, and asked users to order them by priority. Priority was determined by the user, with the only prompt being "what attribute(s) are required for you to get your work done in the most efficient manner?".</p>
+  <figure class="figure">
+    <img src="../../img/task-it_user-survey.png" class="figure-img img-fluid rounded" alt="Image of the user testing process" loading="lazy">
+    <figcaption class="figure-caption">User testing card sorting - <a href="../../img/task-it_user-survey.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+  </figure>
+
+  <h2>Revisions</h2>
+  <p>After analyzing the results of the card-sorting user testing, additional mockups were created to task with the updated attribute priorities.</p>
+  <div class="row">
+    <div class="col-md-4">
+      <figure class="figure">
+        <img src="../../img/task-it_task-details_mockup2.png" class="figure-img img-fluid rounded" alt="Image of the first version of the task details mockup">
+        <figcaption class="figure-caption">Version 2 - <a href="../../img/task-it_task-details_mockup2.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+    <div class="col-md-4">
+      <figure class="figure">
+        <img src="../../img/task-it_task-details_mockup3.png" class="figure-img img-fluid rounded" alt="Image of the first version of the task details mockup">
+        <figcaption class="figure-caption">Version 3 - <a href="../../img/task-it_task-details_mockup3.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+    <div class="col-md-4">
+      <figure class="figure">
+        <img src="../../img/task-it_task-details_mockup4.png" class="figure-img img-fluid rounded" alt="Image of the first version of the task details mockup">
+        <figcaption class="figure-caption">Version 4 - <a href="../../img/task-it_task-details_mockup4.png" alt="Link to see a larger image" aria-hidden="true">expand</a></figcaption>
+      </figure>
+    </div>
+  </div>
+
+  <!-- <a href="../../img/task-it_task-details_mockup2.png" alt="Link to see a larger image" aria-hidden="true">
+    <img src="../../img/task-it_task-details_mockup2.png" class="img-thumbnail" alt="Image of the second version of the task details mockup" width="250" loading="lazy">
+  </a>
+  <a href="../../img/task-it_task-details_mockup3.png" alt="Link to see a larger image" aria-hidden="true">
+    <img src="../../img/task-it_task-details_mockup3.png" class="img-thumbnail" alt="Image of the third version of the task details mockup" width="250" loading="lazy">
+  </a>
+  <a href="../../img/task-it_task-details_mockup4.png" alt="Link to see a larger image" aria-hidden="true">
+    <img src="../../img/task-it_task-details_mockup4.png" class="img-thumbnail" alt="Image of the fourth version of the task details mockup" width="250" loading="lazy">
+  </a> -->
+
+  <hr class="my-5">
+  <div class="card text-dark bg-light my-3">
+    <div class="card-header"><h3>Final thoughts</h3></div>
+    <div class="card-body">
+      <p class="card-text">Throughout the design process, it became clear that although the initial design solved many of the problems users faced with existing systems, there was plenty of room in which to improve.
+      </p>
+      <p>From the user testing sessions, specifically card sorting, I was able to adjust the layout and direction of the task details page without negatively impact user's experiences.</p>
+      <p>By working the development team, we were able to quickly role out changes to users and compare the new metrics to those of previous iterations. These metrics became the new baseline for future designs and detail screens across the product.</p>
+    </div>
+  </div>
+</div>
diff --git a/src/pages/designs/timetrak.md b/src/pages/designs/timetrak.md
@@ -5,5 +5,5 @@ description: "Time tracking software for Switchback, Inc."
 eleventyNavigation:
   key: design
   parent: Designs
-  order: 3
+  order: 4
 ---
diff --git a/src/sass/_cards.scss b/src/sass/_cards.scss
@@ -0,0 +1,12 @@
+.card-cover {
+  background-repeat: no-repeat;
+  background-position: top right;
+  background-size: cover;
+}
+.text-shadow-1 {
+  text-shadow: 0 .125rem .25rem rgba(0, 0, 0, .25);
+}
+.bi {
+  vertical-align: -.125em;
+  fill: currentColor;
+}
diff --git a/src/sass/style.scss b/src/sass/style.scss
@@ -16,3 +16,5 @@ $color-mode-type: data;
 
 @import "buttons";
 @import "general";
+
+@import "cards";