Evey's Portfolio

Background

Project Overview
My Role
Launch

Impact Data

Cart Conversion 40.5%

228 key conversions from 562 active users on /cart.

Revenue Influenced ¥6.24M

Total revenue recorded from the redesigned purchase path.

Product Engagement 1m 24s

Average engagement time on product pages, compared with 38s on homepage.

Form Completion ~1:1

form_start and form_submit events stayed nearly equal.

GA4 screenshots are intentionally softened in the portfolio view to protect operational details while keeping the business signals visible.

Why These Areas

The platform is large, so I intentionally focused this case study on the flows with the highest complexity and measurable business value.

1
Product specification search

Metal materials require decisions across material, thickness, shape, size, and cutting conditions. The product page needed to reduce noise without hiding advanced options.
2
Dual cart and quotation path

B2B buyers may purchase directly or request a quotation for non-standard needs. The cart had to support both paths without forcing users into the wrong decision model.
3
Scalable account experience

The ongoing My Page redesign extends the same UI kit into purchase history and order detail pages, proving the system can scale beyond the first launch.

Storefront Entry

Turning a large material catalog into task-based entry points

The homepage needed to serve both professional buyers who know exactly what material they need and less specialized users who start from shape or service type. I structured the first screen around three discovery paths, then kept the visual language consistent across desktop and mobile so users can enter the catalog without learning a new navigation model.

Before and after comparison of the e-metals homepage redesign — Previous homepage: information was spread across side navigation, banners, product lists, reviews, and notices, making the main entry path harder to scan. Redesigned homepage: search, category entry, and product discovery are visible in the first viewport.

Product Detail

Designing a clearer decision path for industrial product variations

The product detail page supports multiple states within the same material, including cut-to-size, fixed-size, finished goods, and end-material products. I reorganized the page around a product-type switch, product imagery, purchase unit, dimensional inputs, and product description so buyers understand the decision before entering values.

Dimensional constraints, range suggestions, and disabled states stay close to the input fields, keeping error prevention at the decision point.

Before and after comparison of the e-metals product detail redesign — Previous product detail: specification input, product data, and purchase actions were visually dense and difficult to prioritize. Redesigned product detail: product type, imagery, dimensions, and description are separated into clearer decision zones.

IA Decision

Product type before specification input

Placing product-type tabs above the configuration area helps users choose the correct buying mode before reading detailed specs or entering dimensions.

Usability

Error prevention at field level

Range hints, disabled controls, and visible constraints reduce trial-and-error for high-variance industrial dimensions.

Business Logic

Purchase and quotation readiness

The page supports both direct purchase and quotation evaluation without forcing users to leave the product context too early.

Next iteration

Basic / Advanced mode for deeper specification control

The next product detail iteration will introduce a Basic / Advanced mode to further reduce cognitive load. Common purchase tasks stay lightweight, while expert users can open advanced settings for special processing conditions, edge cases, and more granular specification inputs.

Basic Advanced

Cart & Inquiry Flow

Designing for two buying modes in one cart

Industrial ecommerce is not always a straight checkout. Buyers may need a quotation when the order involves non-standard specifications, bulk purchasing, or internal approval. I designed the list and cart states so direct purchase, quotation request, disabled items, and bulk actions could coexist without making the user guess which action is currently valid.

Before and after comparison of the e-metals cart redesign — Previous cart: checkout steps, delivery information, item details, and totals competed for attention on the same page. Redesigned cart logic: selected items, disabled states, quote-required items, and bulk actions are easier to distinguish.

Decision Point

Clarified purchase readiness

Users can confirm product details, quantity, and specification requirements before choosing purchase or quotation.

Interaction Logic

State-aware actions

Selected, unavailable, quote-required, and purchasable items each expose different valid actions, reducing wrong-path decisions before checkout.

Design System

One designer, a large system, and a need for repeatable quality

As the only UI/UX designer, I built a storefront UI kit in Figma with an 8pt grid, semantic spacing roles, component states, color tokens, and typography guidance. This reduced ambiguity with engineers and created a foundation for the ongoing My Page redesign.

e-metals design system color tokens — Color tokens define hierarchy across brand actions, system states, charts, labels, disabled modules, and supplier/admin contexts.

e-metals design system typography — Typography guidance keeps Japanese product data, numeric prices, and English labels consistent across storefront and SaaS surfaces.

Roadmap

Continuous improvement after launch

The March 2026 release was not the end of the redesign. Some pages are still being refined, and the team is gradually replacing legacy UI patterns with a more consistent, user-centered storefront experience.

1
Storefront flow refinement

Continue improving product discovery, product detail evaluation, cart confirmation, and quotation request flows so users can move across the purchase journey with fewer interruptions.
2
My Page redesign

Extend the storefront UI kit into purchase history and order detail pages, creating a clearer account experience for returning buyers.
3
Admin SaaS expansion

Backend management and supplier-side product registration are being developed as separate case studies, covering operational workflows, data maintenance, and scalable governance.

Qualitative Feedback

先日貴社HPを拝見させて頂きました。HPのリニューアルおめでとうございます。以前も拝見しやすかったですが、更に魅力的なHPだと思いました。また、発注も以前より簡単になったと感じました。次回の発注が待ち遠しく思っております。

Customer feedback shared with the sales team after launch

Takeaways

This project taught me that product design in a real business rarely starts from a blank canvas. The value came from finding a realistic entry point inside an already complex system, improving the highest-friction purchase moments, and proving the impact with both behavior data and customer feedback.

Business impact: cart conversion reached 40.5% and generated ¥6.24M in tracked revenue during the measured period.
UX impact: product pages supported deeper evaluation instead of shallow browsing.
Team impact: the UI kit and self-check process created a scalable design foundation for My Page and future system expansion.

e-metals.net Ecommerce Redesign

Scope of Work in this project