NeuralDSP Japan

This project is currently in progress. To view the EC site, visit neuraldsp.jp

In this project, I designed and developed the official Shopify EC site for Neural DSP’s expansion into the Japanese market. I localized the content for Japanese users, designed the UX/UI, created product showcase content, built user flows with Cortex Cloud integration, and implemented responsive design on Shopify to ensure a smooth experience across both mobile and desktop.

As a first step, we created this diagram to outline the overall information architecture of the Neural DSP Japan Shopify EC site. The site is structured into three main sections: (1) a Landing Page for browsing products like Nano Cortex®, Quad Cortex®, and accessories; (2) a Support Section with manuals, FAQs, and contact options; and (3) a Documentation Area covering legal terms, warranty, and privacy policies. Users can also create accounts, download software, access Cortex Cloud, and use local payment methods to complete purchases.

Before moving into development, I created detailed wireframes for each key page—including the landing page, product page, user account, support, and contact. These wireframes helped clarify content structure, user flow, and responsive layout planning, ensuring a smooth and efficient design-to-development process.

The sample shown here is a responsive video grid component designed for the homepage. It allows all three products—Nano Cortex, Quad Cortex, and GigCase—to be showcased simultaneously. Built with a component-based approach, the layout features a two-column structure with modular video, image, overlay, and text elements. This ensures design consistency, responsiveness, and easy reuse across the site.

For the product page, I have implemented a full-screen video hero section to create a strong visual impact. It features a responsive layout with the Nano Cortex video using object-fit: cover, optimized for both mobile and desktop with scalable text and flexible two-column support on larger screens.

To better explain the I/O features of the hardware, the I/O MAP component is built via Shopify’s custom Liquid blocks. Each input and output is treated as an individual <column> inside a reusable <number-map-section>, allowing for scalable, modular content updates. Numbered badges are styled consistently (14px font size, 26px minimum width, circular shape) to clearly correspond with their descriptions, ranging from combo inputs and effect loops to USB, MIDI, and Neural Capture outputs.

I implemented a lot of interactive and motion elements in this project to enhance user experience and create a more dynamic interface, such as hover-based image zoom and image swap, a 360° product viewer for immersive inspection, and ripple effects for button feedback. Navigation is improved through animated menu toggles, a scroll-linked table of contents, and a mobile-friendly hamburger menu. Other features like the slide-in cart and floating labels support seamless interaction without disrupting the browsing flow.

I focus on delivering a unified experience across the entire project. When a customer subscribes to email marketing, a newsletter is automatically sent that reflects the same visual identity used on the storefront. The color scheme—grayscale tones with accents like Shop Pay purple and discount green—maintains visual harmony. Typography is standardized with IBM Plex Sans JP for Japanese readability, and buttons and forms follow a modular black-and-white UI. The email preview on the right shows how all these elements work seamlessly together, ensuring consistency throughout the user journey.

One day I woke up during Golden Week and received a request from my teammate to remove the “Note” field from the Shopify cart page, since it wasn’t reflected in the shipping process and could cause confusion. I quickly jumped into it and created clear documentation explaining how to remove the note field by editing cart.liquid or main-cart-items.liquid, along with adding extra margin space to preserve the design layout. This allows us to easily restore it in the future if needed.

We responded to the client’s concern promptly regarding the suspicious “fender_analytics” script found on the JP website. After investigating, we clarified that the script was part of Klaviyo’s standard tracking and not related to the Fender brand. Although there was no actual connection to Fender, we decided to remove the plugin immediately to avoid any confusion, ensuring transparency and swift resolution.

SEO is a key part of an EC site that generates visibility and drives traffic. Using AI-assisted deep research based on Google search behavior for Neural DSP in Japan, I can analyze each product by identifying high-volume related keywords (in both English and Japanese), estimating monthly search volumes in Japan, assessing SEO difficulty, and determining the primary search intent. Relevant long-tail keywords are also included. The data is based on the latest insights from 2024–2025, with a strong focus on the Japanese market.

Exact search volumes in Japan are not public, so the numbers here are estimated based on global trends and local interest. Globally, “Nano Cortex” is a rising keyword—media like guitar.com have questioned if it can “live up to the hype.” In Japan, interest is growing but still limited. SEO competition remains low, with few pages targeting “Nano Cortex” beyond official and news sources. Most users research or compare the product to the Quad Cortex before buying.

These are the ads I designed for Google and Meta platforms. I discussed with the client and marketing team to align the messaging and visuals, and adapted the designs to fit each platform’s format and audience. For Google, we prepared various sizes to cover both desktop and mobile, focusing on clear CTAs like “Official Store Open.” For Meta, I used lifestyle photos to create a more natural and engaging feel. Overall, I made sure the ads are consistent across platforms while also optimized for conversion.

We previously fetched English blog content directly from the official site and displayed it under “Latest news.”

Now, we have started generating localized Japanese blog posts independently. These appear in a new section below with a different layout and include Japanese titles, summaries, and dates.

Based on the client requirements, I designed a two-sided flyer with one side showcasing Quad Cortex and the other featuring Nano Cortex, each with concise bilingual copy and strong product visuals. Both sides emphasize the recent price reduction and core features such as Neural Capture™, DSP performance, portability, and Cortex Cloud access. To meet the print flyer format, I trimmed down the original text for clarity and balance while maintaining key messaging. A trackable QR code is included on each side, linking to the Japanese site. The design aligns with Neural DSP’s branding and is optimized for distribution at Sound Messe in Osaka.

We have done a research-driven design process for enhancing Neural DSP’s support experience. By conducting user interviews, surveys, and usability testing, we identified key pain points and opportunities for improvement. Our design decisions—such as a dark header with live search, collapsible menus, and a grid-based content layout—are directly informed by user behavior and competitive analysis. The resulting structure offers intuitive navigation, product-specific pathways, and faster access to relevant information, ensuring a seamless and efficient support journey for both new and experienced users.

Rakuten is one of the largest e-commerce platforms in Japan, and this slide presents the V0.01 mockup of the Neural DSP Official Rakuten Store

👉 https://www.rakuten.co.jp/neuraldsp/

CLIENT MEETING (PRESENTATION)

LINE is one of the most popular messaging apps in Japan, so we created these two slides to propose it as a fourth support channel alongside the existing support page, email support, and contact form. To help the client consider how best to implement LINE without overlapping with current support systems, we present three options: Social Media Integration, Promotional Button, and Support Channel Option—each offering a different level of visibility and integration while maintaining a seamless user experience.