Website Redesign - 8 weeks

Pacific Northwest X-Ray Inc

Pacific Northwest X-Ray Inc. is a prominent provider of X-ray equipment and accessories across the United States. The company's goals are to improve radiological safety and patient care by offering reliable products. This project's objective was to redesign their existing website to enhance user experience, create a modern aesthetic, and broaden their market reach to better serve the healthcare and research communities.

View Code
x-ray inc mockup

The Problem

The main challenge was that Pacific Northwest X-Ray Inc.'s website looked outdated and performed poorly, which didn't match with the nature of their products. The site struggled with slow and inconsistent navigation, poor layout, outdated design elements, and inefficient product displays. This was significantly hindering user engagement and the company's ability to attract new business.

My Role

Researcher

Designer

Developer

Tools Used

figma logo

Figma

VS Code

SCSS

html logo

HTML

Main Objectives

This project set out to give Pacific Northwest X-Ray Inc.'s website a fresh, modern look to reflect their industry-leading products. The main goals included:

  • Enhance Brand Perception: Strengthen the company’s brand identity online to better reflect its goals for the healthcare community.
  • Improve User Navigation and Accessibility: Redesign site navigation to be intuitive and accessible, ensuring that users can find information quickly and easily, regardless of their technical skill level.
  • Mobile Responsiveness: Ensure the website is fully responsive and provides a seamless experience on mobile devices.

The Audience

  • Technology Level: Users are likely to be technologically savvy, given the need for operating advanced medical equipment and the preference for using sophisticated apps and systems.
  • Purchasing Motivators: The key factors influencing their purchasing decisions include product quality, safety standards, technological advancement, and ease of use.
  • Decision-Making: Individuals may make purchases or through collective decision-making processes in medical settings, such as hospitals or clinics.

The website is designed for healthcare professionals, especially those in radiology who are not just experts in their field but also expect their digital tools to be top-notch.

My Design Process

Research

I started by gathering insights through user research, analyzing competitors, and getting to know the client's goals.

Design

I developed wireframes and a composite layout, iterating based on feedback to refine the user interface.

Implement

I translated the design into a responsive and functional website, ensuring quality through rigorous testing.

checkmark

Evaluate

I  launched the website, and gathered user feedback to optimize and improve the user experience.

X-ray inc home page

The Blueprint

When developing the site's structure, I designed a site map to outline the main categories and subcategories, aiming for a layout that is both simple and informative. The site includes five key pages: the home page, products page, contact page, resources page, and industry news page. Each page is clearly organized and easy to use.

After finalizing the structure, I created wireframes to layout all the components of the site. This gave me a clear overview of how the site will function, allowing me to adjust when necessary.

The Research

My research began with a deep dive into understanding the target audience—healthcare professionals specializing in radiology. This involved analyzing their specific needs, preferences, and common challenges they face when using digital platforms.  I also explored competitor websites to identify industry trends and best practices, which helped pinpoint areas for innovation and improvement on the new site.

I created elemental collages to show the design I was going for. These collages combined images, text, and interface elements that represented the aesthetic and functional components of the website.

The Design

For the final design, I used the collages and wireframes I created before which helped significantly with creating the detailed composite layout. The home page clearly displays the brand's message, product categories, a link to industry news, and testimonials to help establish trust amongst their audience.  The product page is organized into sections based on the type of equipment. For the industry news page, I have a feature article to capture the user's attention as well as other articles below. The resources page gives useful information for the customer looking to purchase a kind of equipment. The contact form is simple yet effective, allowing the users to easily reach out with any questions. I kept the colors, headers, and fonts consistent and clean, which makes the site look professional and easy on the eyes.

The Constraints

A major constraint faced with this project was the lack of target market user testing. I would have wanted to test the interactions of this website and gain feedback from healthcare industry professionals.

Challenges Faced

A key challenge was getting the website to work well on mobile devices. Since many users might visit the site from their phones, it was crucial that the mobile view was just as effective as the desktop one. Starting with the mobile version first, I made sure the content was easy to see and access on a smaller screen. This mobile-first approach when coding helped me significantly in creating a clean layout for all devices.

Overall Outcome

I designed and developed a modern, easy-to-use website that fits Pacific Northwest X-Ray Inc.'s brand and goals. The main points from the original website were addressed and improved on which resulted in an overall better user experience. I gained invaluable experience in web design and project management, showcasing my ability to independently guide a project from concept to completion.