Project Overview

Redesigning the corporate website for a Japanese meat wholesaler to improve clarity, trust, and mobile usability.

The project involved modernizing 株式会社アスモトレーディング’s website, a B2B food wholesaler based in Japan. The primary goals were:

• Modernize the visual identity
• Enhance mobile responsiveness
• Simplify access to key company and product information for domestic and international users

As the sole designer, I led the project end-to-end—from stakeholder discussions and wireframing to high-fidelity UI design and developer collaboration—delivering a user-centered and visually engaging experience aligned with the company’s values of quality and transparency.

Project Goals

• Increase trust by improving the presentation of sourcing, safety, and quality
• Make business and product information more accessible (reduce text overwhelm; improve hierarchy)
• Improve mobile responsiveness and performance
• Create engaging visuals (images, icons) to support brand storytelling

Design Approach

Stakeholder Interviews

Spoke with company management and marketing to understand their customers’ priorities: transparency (origin, safety), product quality, and timely information (news, notifications).

Heuristic Audit

Reviewed the existing website to identify usability issues: dense text blocks, small fonts, and navigation that mixes multiple sections.

Competitive & Benchmark Analysis

Analyzed other food sourcing and import-export company websites in Japan and internationally to see how they present product origin, safety information, and contact/order processes.

Wireframing

I created low-fidelity wireframes for the homepage, business pages, and contact page, to name a few, exploring content hierarchy, navigation models, and user flows.

The focus was on making key information—product origin, quality statements, and latest news—immediately accessible to both domestic and international users.

Homepage

Business Overview

Contact

Wireframes demonstrating page structure and navigation planning.

Visual Transformation: Before & After

High-fidelity screens for key pages translated wireframes into clear, visually engaging layouts, reinforcing trust, quality, and readability across devices.

Final UI Snapshots

High-fidelity screens demonstrate a modernized brand identity and clear visual hierarchy across key pages, including the homepage, business pages, and contact page.

Visual Design Focus:

• Refined color palette conveying trust and product quality
• Typography system optimized for readability in Japanese
• Clear visual hierarchy with consistent spacing and grid alignment
• Use of authentic product imagery to emphasize transparency and sourcing
• Responsive layouts ensuring consistent brand presentation on desktop and mobile

These design choices created a credible, high-quality look and feel while improving usability and engagement.

Outcome & Reflection

Although formal, large-scale UX research (surveys, usability labs) wasn’t feasible, all design decisions were grounded in stakeholder interviews, heuristic evaluation, and benchmarking.

The redesign delivered a website that feels modern, trustworthy, and easier to navigate—especially for new visitors or potential partners.

Through clearer interaction flows (exploring sourcing info, contact forms, product details) and refined visual hierarchy, both usability and visual clarity improved.

This project reinforced my ability to balance user experience and visual polish, managing a full design process independently. In future projects, I plan to integrate formal usability testing to validate design decisions further.

Workflow

Workflow: Stakeholder discussions → Wireframing → High-fidelity design & prototyping → Developer handoff