Nihon Kohden

Nihon Kohden America (referred to here as NKA or the client) is a subsidiary of the Nihon Kohden Corporation Japan, a leading manufacturer, developer, and distributor of medical electronic instrumentation.

The objective of the website redesign was to simplify and highlight the company’s medical solutions and products for patient monitoring, neurology, sleep assessment, and more. On an accelerated timeline, this project concluded with a design and wireframe created by myself and handed off to the Nihon Kohden team.


The Nihon Kohden America website is currently under development.

home page mockup
  • Date: 2021
  • Category: Web Design
  • Client: NK America

Preliminary Problem Analysis

Before the official project kickoff, I prepared a brief SWOT analysis to assess Nihon Kohden’s state as a company and the state of its website. Through this, I formed a preliminary understanding of what the company already excelled at, what challenges it faced, and what a new design could remedy.

Strengths:

  • Offer resources for medical professionals
  • Already well-known in the field of medical electronics

Weaknesses:

  • Failed to identify the main sectors of service
  • Structure is confusing and can obscure product offerings
  • Outdated visuals

Opportunities:

  • Able to grow and expand its reach in North America
  • Communicate how products relate to one another
  • Competitors equally confusing and outdated sites

Threats:

  • Other competitors had a larger hold in medical settings
  • Larger company operations (can slow down processes)
questionnaire

Interview/Questionnaire

To gather information, an extensive questionnaire was supplied by my team at SFA Marketing to the client. Questions, formulated from both design and marketing standpoints, allowed us to gather as much raw directional information from the relevant departments/individuals at Nihon Kohden. The questionnaire addressed popular products, pain points in their company, overall value proposition, and more. From the answers I began to parse what I saw as the key takeaways and findings.

Nihon Kohden’s strength comes from its flexibility and stability, but it can be a weakness. Durable products with long lifespans are complemented by service and updates provided at no extra charge. However, durability means customers don’t turn products over and support for legacy software may often be necessary.

Popular products
Each department had its own opinion on the best-selling products, but across all answers it was important to give prominence to the products and show the degree of interconnectedness between not only accessories but clinical areas as well.

Solutions oriented technology centered around simplicity is key
Highlighted among the many responses was the need to communicate that NKA’s offerings were comprehensive and able to simply integrate into existing workflows in various medical settings.

A clearer picture of the home page, products, and humanity
A large selection of options clutter the home page and navigating to the interior pages offers no clear detailed view of products. The backing of human related imagery is also integral to how they show product use and is not currently communicated.

questionnaire

Audience & Competitors

The questionnaire answers also addressed the key groups served by NKA as well the competitors vying for the business of these same audiences in the medical electronics space.

As expected, from both the responses and a sampling of site analytics received from the Nihon Kohden America team, we saw that a majority of visitors to the site were based in the United States and involved in the medical field. Groups in that audience ranged from hospitals, neurologists, and nurses to lab technicians, C-suite professionals, and supply chain managers.

The intellectual and professional nature of the audience informed the overall approach (including tone, imagery, etc.) for the proposed site. Displaying product features and services with no “fluff” and how they related to other products and applied to different settings was vital. It would allow target groups to quickly determine what products and services suit their needs best and integrate into their existing environments easiest. This in turn permits them to return their focus to providing better health outcomes.

Natus, Mindray, Masimo, and ResMed are among some of NKA’s competitors and examining their websites served to further solidify our approach. A powerful technical mission statement followed directly by product and service details or descriptions was commonplace. The messaging accompanied by compelling medical imagery told a story about who these companies are and what they offer. Layout simplicity varied across the board as to how this was communicated, but the presence of this message was always a constant.

Setting Goals

At this stage, I developed a list of goals that I felt needed to be achieved by my design in order to remedy many of the challenges presently faced by NKA. From there I prioritized what I believed was most important to achieve given project constraints (time, scale, etc.) and they were:

  • Presenting products upfront and differentiating them from one another in a clearer manner compared to the current site
  • Placing products under the context of certain medical fields for customers to better identify relevancy
  • Show interconnected nature of products and how they exist and work together in real world medical settings
  • Providing a constant way of acquiring leads

Content Audit

The assessment done earlier of Nihon Kohden America’s website gave my team and I the opportunity to examine exactly what content needed to be brought over from the existing site and what needed to be implemented. This was how the site map was put together and subsequently approved by the client’s own team.

site-map

Visual Style

I utilized a recently revamped style guide and newly created print materials all supplied by NKA to establish the visual style of the site. I worked within the guidelines and essentially translated these points of reference to a more web friendly format. Below you can see a sample of some of the guides and elements that were used.

site-map site-map

Wireframes

After I worked to define the visuals, I began to take the sitemap and develop wireframes. This project would be concluding with a handoff of wireframes and related visual assets, so at this point I was tasked with only focusing on select pages. I would take these wireframes and fully design them, so as to present the client’s team with a set visual direction for approval. Once these fully developed pages were approved, I would then develop the wireframes for the rest of the pages on the site, for a total of about 90+ pages.

When developing the home page wireframe I focused on centering the conclusions I reached from the reviews and research while keeping in mind the simplicity desired by the client. The structure would call attention to Nihon Kohden America’s offerings in clearly divisible sections to make navigation easier for visitors to the site. The sections act as easily digestible blocks of content and would consist of an about, products, fields, clinical solutions, educational, careers, and contact section. I sought to feature an educational section because it was a program that NKA had found a lot of success with. Further assessment at this stage led my team and I to incorporate news and testimonials seeing that it would enhance the professional backing and active medical field and research elements that the company could stand to benefit from.

The interior wireframes, selected to be the expertise and product pages, would be structured similarly both for simplicity and practical reasons, given the large scope of the project.

For the expertise page, I planned to utilize product category boxes and have it function as an intermediate page for visitors to go from their field into the relevant product line. Fields are obvious to the target visitors and thus wouldn’t need much, if any technical clarification, letting them work as containers. Besides this focus, I proposed the idea of an interactive section of a 3D hospital setting with Nihon Kohden products placed in the environment. This would allow visitors to immediately grasp the interconnected nature of the products, seeing how they work well together.

The product page wireframe would have to obviously show the product and account for the different aspects related to it. The flexibility to include or remove for example optional accessories, features, relevant education information, etc. was key for future use. An accordion was practical for this situation, given that the client also indicated their preference for condensing information and reducing scrolling. I also planned an image and video gallery section to demonstrate products in action in “real-world” scenarios. To hit the point of interconnectivity again, I thought it important to include a related products section. The planned flow would give visitors the ability to go from product to product in order to further interest and inquiries and produce an increase in product sales.

site-map

Design

Once approved internally, I proceeded with taking the three wireframes and designing them into full layouts according to Nihon Kohden’s visual guidelines.

In addition to my design, a second layout was put together by another member of my team so as to give the NKA team another option. Initial reactions from the first presentation to both concepts were positive, but the client ultimately decided to go with my layout. The simplicity, clear navigation structure, 3D interactive demo, and use of large imagery were some of the elements they preferred in my layout. On the other hand there were a few sections they wished to remove and reorder including the removal of clinical areas from the home page and making the 3D setting demo the first item on the fields pages, among the few items. After three rounds of edits, the approved final designs, which you can see below, were set and could now be used to generate the wireframes for the rest of the site.

Handoff

As stated, I moved on to develop the 90+ wireframes in Adobe XD. At this stage in the process, copy and exact content was not finalized so my wireframes were only approximations. Taking this into consideration, I set up components in Adobe XD for template pieces the client’s in-house team could swap in and out as they saw fit. The final collection of files sent to the client included the select fully designed XD layout files, image and font assets, and the wireframes.

Conclusion

OReflecting on the project, there were certainly points that were successful and points to improve upon.

The goals I listed out early in the process gave me concrete items to check off that were not rooted in abstract questioning. NKA’s older website’s product pages typically consisted of a small block of text with little supporting media for context as to the nature of the product. The redesigned product pages touched upon all of my goals, but most importantly brought products into focus. I utilized large product imagery and typefaces to make product identification easier at first glance, and right away established compatibility with relevant accessories. The rest of the page categorized key specifications and other information, displayed in action videos when possible, and included a related products section to further guide visitors into the entire NKA ecosystem.

At the same, I felt that discoverability for products was still on the lower end of the spectrum. A problem that might have arisen from a desire for a clean design was actually impacted negatively by oversimplification. The client liked the use of boxes for clinical solutions to hide additional sub categories, but looking back on it, I don’t think this was the optimal solution for products. Once products became further subdivided, it created a technical problem that could make getting to products harder compared to listing them outright. Doing it over, I would redesign sections in clinical category pages to list out products under that category so users have one less click between them and their endpoint.

These were just two examples of differing sides of the process but overall, I think this project was a great learning experience. Concluding with a design handoff as opposed to being involved in the development process was also new for me. It required me to enter a new frame of mind that would make the transition as smooth as possible for the team picking up development of the site. New scenarios and timelines such as these are what allow me to keep improving my design process.

home page mockup