Pacific Northwest X-Ray

Client Brief

What: Pacific Northwest X-Ray (PNWX) provides a diverse range of products, including safety apparel, medical equipment, supplies, and industrial X-ray equipment.

Where: Based in Gresham, Oregon, they primarily serve customers in the United States but also cater to international clients.

Why: Their goal is to offer a centralized catalog of products from various manufacturers, aiming to become a comprehensive, one-stop solution for medical imaging needs.

Long-Term Goals: Expand product offerings, enhance customer experience (CX), and increase both domestic and international market share.

Relation to Project: This project focuses on analyzing the current site experience to enhance PNWXs online presence, aligning with their long-term goal of increasing market share by reaching a broader target audience.

Site Map

Pain Points

• Colors
  • Problem: A lot of the site is not WCAG () compliant. The contrast ratios on of some of the text and the background are below the AA and AAA compliance levels. Even when not taking color blindness or lo w visibility accessibility in mind due to the nature of the background being a shades of blue gradient, it can actually be difficult to read some of the text.
  • Solution: Incorporate Design Color Tokens in the design system that takes proper considerations of color contrast ratios that meat accessibility standards.
• Screen Reader
  • Problem: Some of the “text” are images that are not using alt attributes. Most images follow stand practices for image content like using semantic file naming conventions and including proper alt-text attribution.
  • Solution: It is important to know in what elements it is crucial to have proper alt-text, aria-labels, what needs to be part of the tab index and other important considerations. Also to improve the screen reader experience it would help to create a skip to main content.
• Navigation
  • Problem: The navigation bar isn’t included on the home page as instead they opted for showing the most popular links. Navigation bar shows on the rest of the pages. That being said, trying to navigate the site is frustrating the further I go. For example, when I get into a product after clicking several category links, there is no way to quickly navigate back. If I’m at /Accessories/Patient/IVPoles/Accessories/, and want to go back to Patient, I’d need to go back to Accessories first and then Patient.
  • Solution: The navigation should be accessible on all pages. Using breadcrumbs is needed to make overall navigation quicker with fewer clicks.
• Search
  • Problem: Search feature is reliable in getting results, but it feels like I’m searching in the dark. Another issue is the search function redirects directly to a page if the query matches a page parameter, for example, when I searched “Purchasing” it took me directly to the purchasing page. This is confusing and not expected behavior unless the user knows exactly what they’re looking for.
  • Solution: Enhance the search experience by re-evaluating the redirect to pages and instead show search results. Suggestions could lead to a specific page as an alternative option.
• Tables
  • Problem: Table font size varies based on the number of columns. The more columns there are, the smaller the font becomes, making larger tables harder to read.
  • Solution: Use horizontal scroll for large tables or ensure tables have responsive widths.
• Consistency
  • Problem: There’s inconsistency across the site, from walls of text to unordered lists in pages where lists make sense but similar pages that should have them don’t.
  • Solution: Create a design system to unify typography, color schemes, sizing, and other UI elements, promoting consistency throughout the site.
• Purchasing
  • Problem: PNWX currently uses a PDF form for purchases, sent via fax or email. This process may lack security and poses challenges in meeting legal requirements for handling credit card data. Additionally, the PDF form is not easy to locate on the site, causing issues during user testing.
  • Solution: If feasible, implement a secure online purchasing interface, potentially through a trusted third-party service like Stripe, ensuring it meets regulatory standards. Develop a purchasing flow that replicates the PDFs functions in a user-friendly format.

Logo Redesign

UI Components

I followed an Atomic Design approach with a component-first methodology. Starting with the smallest elements and building up to full components allows for a robust, flexible design system. This approach facilitates smoother design-to-development transitions, especially when using component-based frameworks.

Color Tokens

This color system promotes brand consistency and accessibility across the application. The primary palette uses shades of blue for trust, with secondary and tertiary colors adding vibrancy and balance. Each token is designed to ensure readability and maintain a cohesive user experience.

Typography

Project Architecture

The project is built using a monorepo architecture using NX. This allows for a more organized codebase and easier sharing of code between the frontend and backend. The frontend is built using Astro and React, while the backend is built using Express. The project uses Jest and Cypress for testing and GitHub Actions for CI/CD. The project is deployed using PM2, keeping the applications running and automatically restarting them when changes are detected.

graph TD
    subgraph Browser
        Astro[Astro - SSR] -->|Renders Components| AstroIsland@{ shape: rect, label: "Astro Island (React)" }
        AstroIsland -->|Search Component| API_Server[API Server]
        AstroIsland -->|Form to Add Product to Cart| API_Server
        AstroIsland -->|Fetch Cart Data| API_Server
        Astro -->|Request Icons| IconCDN[Icon CDN]
    end

    API_Server -->|Send Cart Data| AstroIsland
    API_Server -->|Store Cart Info| CartDB[Cart Database]
    API_Server -->|Send Font Files| BrowserFonts[Browser - Fonts]
    API_Server -->|Pass Through| Cloudflare
    IconCDN -->|Serve Icons| Astro
    IconCDN -->|Pass Through| Cloudflare

    Cloudflare -->|CDN/DNS| User[End User]

    subgraph "API Server"
        CartDB
        FontFiles[Font Files] -->|Send Font Files| FontService[Font Service] --> API_Server
    end
    API_Server -->|Request Fonts| FontService[Font Service] --> FontFiles[Font Files]

graph TD
    APIGateway --> RouteRequests[Route Requests]
    APIGateway --> FontService[Font Service]
    APIGateway --> | Response | Client[Client Application]
    RouteRequests --> Cart
    RouteRequests --> Item
    subgraph CartController
        GetCart[Get]
        AddItem[Add]
        RemoveItem[Remove]
    end
    Cart --> CartController
    CartController --> CartService[Cart Service]
    CartService <--> CartDB[In memory stored matched with userId]
    CartController <--> ItemService
    subgraph ItemController
        GetItems[Get Items]
        GetItem[Get Item]
    end
    Item --> ItemController --> ItemService[Item Service]
    ItemService <--> ItemDB[Mocked Item Data]

    FontService --> Fonts
    Fonts --> Family@{shape:rect, label: "?Family"}
    subgraph FontThing[" "]
        weight
        Style@{shape:rect, label: " normal  | italic "}
    end
    Family <--> FontThing

graph TD
    TestRunner -->|Run Tests| UnitTests
    TestRunner -->|Run Tests| IntegrationTests
    TestRunner -->|Run Tests| FunctionalTests
    UnitTests -->|Test Individual Components| Frontend[Frontend Application]
    IntegrationTests -->|Test API Endpoints| API_Gateway[API Gateway]
    FunctionalTests -->|End-to-End Tests| Frontend & Backend

graph TD
    Dev[Development] -->|PR / Push| NXCloud[NX Cloud]

    NXCloud --> Agents[Agents]

    subgraph Agents
        Linter[Linter]
        Tests[Tests]
        Builder[Builder]
    end

    Agents --> Success{Success?}

    Success -->|Yes| Report[PR or Push]
    Success -->|No| ReportFail[Report Failures]

    Report -->|PR| ResultPR[Report Results in PR Discussion]
    Report -->|Push to Production| Connect[Connect to Remote Server]

    Connect --> Pull[Pull Changes]
    Pull --> NXBuild[NX Build Using Cache]
    NXBuild --> PM2[PM2 Reload Applications]

Next Steps

This conceptual redesign focuses on enhancing the overall user experience. Future steps would include refining the design system, implementing the redesign across more pages, developing a robust data model for products, and securing the purchasing process. Additional improvements to search functionality and interactive elements would further enhance user engagement.

Conclusion

The Pacific Northwest X-Ray site redesign aims to improve user experience by addressing identified pain points. Enhancements in color accessibility, screen reader support, navigation, and consistency, combined with a more modern logo and cohesive UI, will create a user-friendly platform that aligns with PNWXs long-term goals of expanding product offerings, enhancing customer experience, and increasing market share.