KUMAま Official Shop - E-Commerce Website
Embedded Files
Timeline
Aug 2024 - Feb 2025
(26 Weeks)
Role
UX/UI Designer
Graphic Designer
Deliverable
Responsive Website
Platform
Figma
Overview
KUMAま Official Shop is an e-commerce website designed for selling pet food and accessories. Initially, our company was commissioned to develop a Warehouse Management System (WMS) to manage inventory and logistics. Following that, the client requested the creation of an online storefront that could seamlessly integrate with the WMS.
The website enables customers to browse and purchase a wide range of pet-related products. It is directly linked to the WMS to ensure real-time stock updates and efficient order fulfillment. Additionally, a built-in Loyalty Program encourages repeat purchases by rewarding returning customers, helping to build long-term engagement and customer retention.
My Role as UX/UI Designer
In this project, I was responsible for designing a responsive e-commerce website for pet food and accessories. I worked closely with the client to gather their requirements, understand user needs, and translate those insights into a clear website structure and high-fidelity prototype. The design followed a corporate identity (CI) I developed to reflect the warm and approachable mood of a pet-focused brand.
Key challenges addressed in this project included:
◆ Integrating a wide range of pet-related products through linkage with the existing Warehouse Management System (WMS)
◆ Delivering a seamless online shopping experience, including product browsing, checkout, and shipment tracking
◆ Designing a built-in Loyalty Program based on a reward structure defined by the client, aimed at encouraging repeat purchases and long-term customer engagement
Design Process
🙋 Empathize
User Research Summary
In this project, the client already had an established customer base for pet food and accessories, which we represented through a user persona named "Jane." Her goals and expected behaviors guided the design decisions—particularly in the implementation of the Loyalty Program aimed at encouraging repeat purchases.
Persona
The primary user experience objective was to make online shopping simple, seamless, and enjoyable, while fostering customer retention through incentives. However, user interviews and feedback revealed several pain points that hindered this experience, such as unclear reward structures, limited product filtering, and insufficient shipping visibility. These insights served as a foundation for identifying improvement opportunities and informed the strategic development of KUMAま Official Shop.
🎯 Define
Jane's Journey Map
Goal: Buy affordable and quality pet products online
Defining Pain Points
According to Personas and User Journey Map, there can be defined pain points of user experience as follows:
💡 Ideate
Potential Ideas
After completing the Empathize and Define phases, we compiled all identified user pain points and translated them into clear design implications. These informed a set of potential solutions, each aligned with users’ goals and expectations for a seamless e-commerce experience.
User Flow
After defining user needs and generating potential ideas, I created a user flow to visualize the main experience of the website. This flow maps out key steps the user takes from discovering the site to completing a purchase, while incorporating loyalty program features, guest checkout options, and a variety of payment methods. It helps ensure a seamless and intuitive online shopping journey aligned with user expectations.
Information Architecture
After defining the user flow, I created the Information Architecture (IA) to visualize the overall structure of the website. This IA outlines both the core user journey and additional supporting features, based on identified user needs and proposed solution ideas. It serves as a strategic blueprint for organizing pages and navigation in a way that is intuitive, efficient, and aligned with both user expectations and the client’s business goals.
🖥️ High-Fidelity Prototype
Mockups and High-Fidelity Prototype
After conducting a thorough analysis of user pain points and defining key features, I created detailed mockups for the PC version of the website. These mockups serve as the foundation for the visual and interactive design, reflecting both the intended user experience and the client's brand identity. The mockups were then developed into a high-fidelity prototype that simulates real user interactions, allowing for a realistic preview of the final product and testing of usability and flow.
KEY FEATURE 1
A Variety of Pet Products
The KUMAま Official Shop serves as an online storefront for a pet supply wholesale company, offering a wide selection of pet products. The website allows users to easily browse and shop for items that best suit their pets' needs through a well-organized and intuitive interface.
On the homepage, users are greeted with:
A hero image carousel showcasing promotional banners and featured product advertisements
Curated product sections including: Flash Sale, New Arrivals, Product Sets, and Recommended for You
Product category section for quick navigation by pet type or product type
Website-exclusive promotion banners that are strategically placed between product sections to highlight ongoing deals
To ensure a smooth shopping experience, each product section and category directs users to specific item pages, making it easy to browse and locate desired products. A prominently placed search bar further enhances product discovery. This structure is seamlessly integrated with the existing Warehouse Management System (WMS) to maintain accurate real-time inventory, ensuring both product availability and efficient order fulfillment.
KEY FEATURE 2
A Seamless Online Shopping Experience
The KUMAま Official Shop Website is designed to offer a smooth and intuitive shopping experience. Users can view detailed product information and variations directly on the product page. The cart provides real-time updates, displaying accurate pricing, active promotions, and a clear cost summary. Users can review all items, apply discount coupons, and make final adjustments before proceeding to checkout.
To further enhance convenience, the website features a "Quick View" popup that allows users to browse key product details and make a purchase without leaving the current page. This helps reduce friction during browsing and speeds up the shopping process.
The cart provides real-time updates, displaying accurate pricing, active promotions, and a clear cost summary. Users can review all items, apply discount coupons, and make final adjustments before proceeding to checkout.
The checkout process is streamlined into three clear steps, each with a visible progress indicator:
1. Information – Enter personal details (name, address), add an optional tax invoice, and choose a shipping and payment method.
2. Payment – Securely pay through 2C2P Payment Service, offering seven flexible options:
3. Confirmation – Review and confirm the order to complete the purchase.
KEY FEATURE 3
My Order – Easy Order Tracking
After completing a purchase, users can conveniently manage and track their orders through the "My Order" section. This feature organizes all purchases into clear categories based on the order progress: All, To Pay, To Deliver, To Receive, Complete, and Cancel.
Each order can be clicked for more detailed information. Users can access a dedicated order details page, which displays complete purchase information, including items ordered, delivery details, and real-time shipment tracking. This allows users to stay informed with clear status updates throughout the delivery process.
KEY FEATURE 4
Membership – “Be Friends with KUMAま” Loyalty Program
In close collaboration with the client, we designed a built-in loyalty program called “Be Friends with KUMAま” to reward loyal customers and encourage repeat purchases. All users who log in are automatically enrolled as members and gain access to exclusive member pricing throughout the website. A pop-up ad and promotional banners are used to encourage visitors to log in and become members.
◆ Tiered Membership System
Upon logging in, users are automatically enrolled as "KUMAま FRIEND", the base-level tier. The program features three progressive membership levels:
KUMAま FRIEND (Entry-level)
KUMAま CLOSE FRIEND
KUMAま BEST FRIEND
Each tier offers increasing discounts and benefits, which are clearly displayed using badges on product listings as users browse the website
◆ Tracking Progress & Benefits
Members can visit the “Membership and Benefits” section to view their current tier and track their progress toward the next level. Membership tiers are automatically upgraded based on cumulative spending.
Users can enjoy exclusive discounts through special website promotions and membership benefits. All available coupons can be easily viewed in the "My Coupons" section of their account.
◆ Upgrade Tier Membership Faster with KUMAま Coin
Alternatively, users can unlock higher membership tiers by purchasing KUMAま Coin, a digital currency used exclusively on the KUMAま Official Shop. Coins are available in values equivalent to the spending needed to reach each tier.
KUMAま Coin is available as prepaid cards in various price ranges. Users can purchase them for themselves or send them as gift cards to other registered members in this website.
📱 High-Fidelity Prototype for Mobile Phone
Mockups and High-Fidelity Prototype for Mobile Responsive
After completing the high-fidelity prototype for the PC version, our team decided to develop a fully responsive website optimized for mobile devices. My responsibility was to adapt the desktop design into a mobile-friendly format while preserving all core functionalities. The mobile prototype delivers the same seamless user experience and consistent visual identity, ensuring that users can enjoy the full features of the website from any screen size.
Key Features in Mobile Responsive Version
◆ a Variety of Pet Products
The mobile version maintains a wide selection of pet products while adapting components for smaller screens. Features such as side navigation are streamlined, and product filters are presented via dropdown menus to ensure a clean, user-friendly browsing experience.
◆ A Seamless Online Shopping Experience
Users can enjoy a smooth and intuitive shopping flow from browsing products to managing their cart and completing checkout. The streamlined 3-step checkout process—Information, Payment, and Confirmation—is fully optimized for mobile use, featuring progress indicators and touch-friendly forms that ensure a seamless and efficient purchasing experience.
The "Quick View" feature is also available on mobile, allowing users to preview product details and make purchases directly from the product listing without navigating away, enhancing convenience for fast decisions.
◆ My Order
Users can easily track their purchases through the “My Order” section. Each order is categorized and can be expanded for detailed status and delivery information.
◆ Membership Loyalty Program
The loyalty program remains fully accessible on mobile. Pop-up ads and promotional banners encourage users to log in and become members. Logged-in users can visit the “Membership and Benefits” page to view their tier, access member-only discounts, track progress, and upgrade their tier using KUMAま Coin.
📱 Design System
Design System
For this project, the client did not have an existing corporate identity (CI), but they wanted the website to reflect a Japanese minimalist style—light, warm like morning sunshine, modern, and homely. Working closely with the client, we chose Buff Blown (#D6A985) as the primary brand color to convey that feeling. From there, we developed a complete visual identity, including a supporting color palette, typography, and UI components.
The result is a clean, inviting design that not only enhances the shopping experience but also encourages repeat visits and purchases by making users feel comfortable and emotionally connected to the brand.
◆ Colors
◆ Typography : MN MINIMON
◆ UI Components for the Loyalty Program (Responsive for Both PC & Mobile)
◆ UI Components for PC
◆ UI Components for Mobile Responsive
Key Takeaways
KUMAま Official Shop was my first real-world experience designing a user experience from concept to execution. In this project, I had the opportunity to work closely with clients and software developers, which allowed me to grow significantly in multiple areas including UX design, graphic design, corporate identity (CI) design, and stakeholder communication.
I successfully designed a fully responsive website that not only fulfilled the client’s functional requirements but also captured the intended brand mood and tone. Despite being new to the field, I was able to overcome various challenges through hands-on learning. Some key difficulties I encountered included
◆ Prototyping in Figma: I struggled with creating a sticky header that hides when scrolling down and reappears when scrolling up.
◆ Component Management: I unintentionally overused nested groups and frames in Figma, resulting in a heavy and complex file structure.
◆ Developer Collaboration: Since the software developers were also new, I needed to create every page for both PC and mobile versions and provide extensive explanations beyond simply handing off the design system.
◆ Typography Use: I included too many text styles across different screens, which made the design system overly complex and inconsistent.
Despite these challenges, my design helped align everyone involved with a clear, shared vision of the website. This experience gave me valuable lessons that I will carry into future projects.
Next Steps
After completing the high-fidelity prototype, the following steps are planned for further development and improvement:
◆ Establish a proper design handoff process for the engineering team.
◆ Conduct usability testing on both PC and mobile responsive versions to validate the user experience.
◆ Introduce a "Return Order" feature linked to the Warehouse Management System (WMS) to enhance post-purchase functionality.
Page updated
Google Sites
Report abuse