dog dental care brand by the fictional company “Petora.” The site supports first-time dog owners in Japan by offering clear brushing guidance and a subscription model to build healthy habits. Project overview Project duration: June 2025 – August 2025（8 weeks）
about how to start dental care for their pets. They are often overwhelmed by lack of knowledge and struggle to choose safe, beginner-friendly products. Project overview The goal: The goal was to create a responsive website that helps first-time dog owners in Japan start dental care with confidence. The site aims to provide clear information and encourage habit-building through a subscription model.
the full UX process from user research to usability testing. I also developed the brand identity, product concept, visual assets, and copywriting to ensure a consistent experience. All visuals, including dog illustrations and facial expressions, were carefully designed to match the brand tone and ease user anxiety. Project overview Responsibilities: ・Conducted user research through interviews and surveys ・Created personas and user journey maps ・Defined the problem statement and hypothesis ・Developed wireframes and low- to high-fidelity prototypes ・Performed usability testing and implemented feedback ・Designed brand identity and product concept ・Generated all visual assets (including dog imagery and layout composition) ・Wrote marketing copy and UI text to ensure consistency ・Built a responsive UI with attention to accessibility best practices
owners, I conducted qualitative research through remote interviews. I initially assumed users cared most about product effectiveness, but the research revealed emotional anxiety— such as not knowing how to start or fear of hurting their dog. This led me to focus on reassurance, clear guidance, and subscription-based support.
care Many users didn’t know how to start brushing their dog’s teeth. The design needed to provide clear step-by- step guidance to ease them into the habit. Fear of hurting their dog during brushing Users worried that brushing might hurt their dog. The design should include gentle language and visuals to reduce this fear and build trust. Overwhelmed by product options Users felt overwhelmed by too many product choices online. The design needed to simplify the decision process with beginner- friendly recommendations. Concern about consistency and habit-building Users struggled to maintain a brushing habit. This highlighted the need for habit-building support through a subscription model and gentle guidance like the “Helpful Tips.” 1 2 3 4
owner who recently started raising a puppy and is highly health-conscious, wanting to build good care habits. who needs [to begin dental care in a stress- free way to protect her pet’s health, because she has learned that neglecting brushing can lead to future dental diseases or tooth loss, and believes it would negatively affect her dog’s well-beingt.
Yuko Tanaka, I aimed to visualize her actions, emotions, and thought process across each step of the buying experience. This helped identify pain points and improvement opportunities, especially around habit-building and reducing anxiety related to dental care.
In Thanks Cart [transaction] About us Privacy Policy Terms of Use Contact My Page Product１ Product2 … How to FAQ [Support] Footer/ Other Note: Yellow boxes represent pages not included in the current prototype but planned for future expansion or separation. Information Architecture (Sitemap)
that encourages first-time dog owners to build a toothbrushing habit, while clearly highlighting the value of subscription options alongside one-time purchases. [Thought Process] I explored multiple layout ideas focusing on clarity and reassurance. I tested five wireframe variations with different product visuals, brushing guides, and CTA placements. The final version was selected for its simplicity and suitability for beginners. Image of paper wireframes including five different versions of the same screen and one image of the new, refined version Landing Page
created paper wireframes for other key screens, including the beginner guide, product detail, cart, and confirmation pages. Each screen was explored through five layout variations to ensure a consistent and user-friendly experience across the entire journey. This broader exploration helped me make thoughtful design decisions that address user pain points from start to finish. Beginner Page Product Page Thanks Page Cart Page
product and feel confident starting a toothbrushing habit. To show both subscription and one-time options clearly to reduce decision stress. [Thought Process] This layout was chosen to build trust and support action. I included a 3-step guide for clarity and testimonials for reassurance. A sticky CTA makes it easy to purchase at any time. 3-Step Usage Guide The step-by-step guide lowers anxiety by showing how easy brushing can be. Product Value Image A top image carousel shows key benefits visually, helping users understand the product quickly. Single / Subscribe Toggle The toggle lets users compare purchase types and promotes the value of subscription. Sticky CTA (Always visible buy button ) The sticky CTA makes it easy to act anytime, boosting conversion. Landing Page User Reviews Real user feedback builds trust and provides social proof. It reassures potential buyers by showing positive experiences from other dog owners. User Reviews
to help users understand how it works. To support both first-time and repeat buyers by offering a simple view of single vs. subscription options. Usage Steps with Images Step-by-step visuals help users understand how to use the product with confidence. They reduce hesitation, especially for first- time dog owners unfamiliar with brushing. User Reviews Real user feedback builds trust and provides social proof. It reassures potential buyers by showing positive experiences from other dog owners. Product Page ※Note: The original product page was removed after refining the flow. Key elements (usage steps & reviews) were integrated into the landing or Beginner pages to simplify the user journey and reduce page switching. [Thought Process] I added usage steps with images to make the brushing process easier to visualize. User reviews build trust, while the toggle helps users compare purchase types easily.
brushing works. Digital wireframes [Goals] To support first-time dog owners who may feel anxious about brushing by providing clear instructions, tips, and answers to common questions. [Thought Process] I included a how-to video and step-by-step tips to make brushing feel less intimidating. An expandable Q&A helps users quickly find answers to their concerns. A downloadable guide and purchase section keep the path to action clear and simple Q&A for Beginners Expandable questions allow users to quickly find answers and reduce hesitation. Helpful Tips Tips break brushing into manageable steps, lowering anxiety. Beginner Page Downloadable Guide (PDF) Supports users after viewing by offering easy access to offline instructions.
toothpaste and invites users to learn more. 2. Beginner Guide: Helps new users understand how to use the product with step-by-step guidance. 3. Cart Page: Allows users to review and confirm the purchase without needing to visit a detailed product page. 4. Thank You Page: Confirms order completion and reassures the user. 【Flow Justification】 Skipping the product page streamlines the experience and supports first-time users with clear guidance. Page 3：Lower ProteType（with Insght & Design Improvements) https://www.figma.com/proto/SVmXRJFmCcf8te1kGkwL7A/courser-- %E5%AE%8C%E6%88%90%E7%89%88%EF%BC%89?node-id=37-552&t=GV6ZfBrh4xDhKV88-1
first-time dog owners. The first round revealed general concerns and expectations, while the second round focused on checkout usability. The insights helped refine the flow to reduce anxiety and clarify subscription-related details. Round 1 findings Unclear checkout flow causes anxiety at the final step. 1 "Subscription" label on button causes misunderstanding 2 Round 2 findings Users expect confirmation before finalizing checkout 3 Users worry about subscriptions and want clear info. 1 Users feel unsure at checkout without confirmation. 2 Users like having both video and PDF guides. 3
address this, I added a clear message— “You can cancel or change anytime”—above the purchase options to reduce hesitation and build trust. Before usability study After usability study added
confirmation. To address this, I added a clear “Final Step” title, included an order summary, and updated the CTA to reduce anxiety and support confident decision- making. Before usability study After usability study
responsive for mobile screen size link] https://www.figma.com/design/FJqWbRDoLwaZOKl0h8qiw3/courser-- %E3%83%97%E3%83%AD%E3%83%88%E3%82%BF%E3%82%A4%E3% 83%97-?node-id=2271-3380&t=hHpuBwmfGw55xOis-1 Switched to a carousel format for better usability while working on the responsive version.
and interactions to address user concerns—especially around subscriptions and final confirmation. The visual choices (colors, fonts, layout) remained consistent with the mockups to ensure clarity and trust. This high- fidelity prototype reflects a user- centered design refined through testing. Screenshot of prototype with connections or prototype GIF responsive for mobile screen size Original screen size View Prototype: Desktop Mobile
contrast between text and background to ensure readability for users with visual impairments. For example, dark green buttons on a light background help users with low vision distinguish interactive elements. Clear Hierarchy with Headings and Layout I structured the content using clear headings and consistent layout to support screen reader users and improve content scanning. This helps all users, including those with cognitive disabilities, understand the page structure more easily. Tap Target Size for Mobile Users I ensured that all interactive elements (such as buttons and links) meet minimum touch target guidelines on mobile devices. This allows users with limited dexterity or those using assistive touch to interact with the site comfortably. 1 2 3
easy — I wish something like this actually existed! ” This feedback from a study participant showed that the step-by-step onboarding experience effectively addressed common anxieties of new dog owners. Even though the product is fictional, the design resonated with users as something they would genuinely want to use. What I learned: Through this project, I learned how to design user experiences that support first-time users with empathy and clarity. I discovered the power of thoughtful onboarding in reducing user anxiety and encouraging long-term engagement. Above all, I realized how important it is to see the experience through the user's eyes and build trust through every interaction.
To validate the design further, I would include experienced owners with different routines. Refine the onboarding flow Based on user feedback, I would simplify key steps and clarify brushing instructions. Prototype retention features I would explore ways to support long-term use, such as flexible subscriptions and reminders. 1 2 3
kimpetersen
letsgokoyo
baasie
bkeepers
lara
sergeychernyshev
charlesmeaden
cassininazir
techseoconnect
![Paper wireframes [LP] [Goals] To design a responsive product page](https://files.speakerdeck.com/presentations/e9bd7e8545824234ab2d471bbbc49c36/slide_11.jpg){kind=link}
![Paper wireframes [other] In addition to the landing page, I](https://files.speakerdeck.com/presentations/e9bd7e8545824234ab2d471bbbc49c36/slide_12.jpg){kind=link}
![Digital wireframes [Goals] To help first-time dog owners understand the](https://files.speakerdeck.com/presentations/e9bd7e8545824234ab2d471bbbc49c36/slide_13.jpg){kind=link}
![Digital wireframes [Goals] To clearly present product details and usage](https://files.speakerdeck.com/presentations/e9bd7e8545824234ab2d471bbbc49c36/slide_14.jpg){kind=link}
![Mockups: Original screen size [Mockups: Original screen size link] https://www.figma.com/design/FJqWbRDoLwaZOKl0h8qiw3/courser--](https://files.speakerdeck.com/presentations/e9bd7e8545824234ab2d471bbbc49c36/slide_21.jpg){kind=link}
