Pacific Northwest X-Ray

Client Brief

What: Provides a wide of variety products including safety apparel, medical equipment, supplies, and industrial X-Ray equipment.

Where: They are based at Gresham, Oregon. Primary serving customers in the United States but also serving international customers.

Why: To provide a central catalog of products from different manufacturers aiming to become a one-stop solution for medical imagining needs.

Long-Term Goals: To expand product offerings, enhance Customer Experience (CX), and increase market share domestically and internationally.

Relation to Project: This project aims to analyze the current experience in order to work on enhancing the online presence of PNWX which would help better reach the target market aligning with the long-term goal of increasing market shares.

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 using a pdf to handle purchasing. The PDF is sent via fax or email. These methods may not be full secure. There are also laws and regulations when it comes to handling credit card information of customers online. On top of that finding the purchasing information is not immediately obvious. I performed some User testing on the purchasing process and they had a difficulty getting to the pdf form.
  • Solution: Their are possible constraints preventing them the site maintainers from implementing more secure methods. In the case that it is possible case of their being no such constraints there are possible ways to make a more secure interface for transaction. One such methods is using a reputable 3rd party service that follows the regulations like Stripe. Creating a purchase flow that has the same function of the pdf is necessary.

Logo Redesign

UI Components

When it comes to UI design, I follow Atomic Design using a Component-first methodology. I typically start from the smallest element of a component and build up to the full component. This allows for a robust design system that is flexible and customizable. Designing in this way also improves the transition from design to development especially when using modern frameworks that use components in the infrastructure.

Color Tokens

This color system ensures brand consistency and accessibility across the application. The primary palette uses shades of blue for trust, while secondary and tertiary colors add balance and vibrancy. Each token is designed for flexibility, maintaining readability and a cohesive user experience across all screens.

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

While this redesign is conceptual with the goal of improving the overall user experience, the next steps would be to continue refining the design system, and implementing the new design to more pages across the site. If I were to continue working on this project, I would focus on the creating a robust data model for the products, and implementing a more secure purchasing system. I would also work on improving the search functionality and adding more interactive elements to the site to enhance the experience for the end users.

Conclusion

The redesign of the Pacific Northwest X-Ray website aims to improve the overall user experience by addressing the pain points identified in the current site. By implementing a new color system, enhancing screen reader accessibility, improving navigation, and creating a more consistent design, the new site will provide a more user-friendly experience for customers. The new logo design and UI components will help to modernize the site and create a more cohesive brand identity. With a focus on accessibility, usability, and consistency, the redesigned site will help Pacific Northwest X-Ray achieve its long-term goals of expanding product offerings, enhancing customer experience, and increasing market share.