Webflow/UX Project

Research & Project Framing

I began the project by exploring several potential clients and conducting secondary research to understand their business context, audience, and digital presence. I ultimately selected Suigenkyo, a Japanese artisan cutlery brand, because their craftsmanship-driven identity offered strong potential for a design-led intervention.

To frame the project, I analyzed competitor websites, reviewed customer behaviour patterns, and studied how artisan Japanese handcrafts are presented to Western audiences. This helped me define a clear problem space: Suigenkyo's digital presence did not fully communicate the value, craftsmanship, or differentiation of their products. Establishing this framing early on guided every design decision that followed.

Insights& Art Direction

After gathering research, I synthesized the information into key insights and developed personas that represented Suigenkyo's core audience segments. These personas helped me understand motivations such as craftsmanship appreciation, performance expectations, and the desire for trustworthy product guidance. A study reviewed during our research suggested that 62% of respondents were willing to pay more for handcrafted products. I created a visual chart to highlight the qualities consumers value most when purchasing handmade goods. Another key insight was that a craftsman's story often resonates more strongly than quality during a first-time purchase. This shaped my design direction: to balance clarity with the traditional craftsmanship that defines Suigenkyo's identity, and to foreground narrative over price.

Prototyping

Once the direction was set, I moved into high-fidelity design. I created the full set of screens, defined the hierarchy, curated imagery, and designed how each interaction should behave. I also specified the visual principles and micro-interaction behaviour to ensure the interface felt intentional and easy to use, applying Hick's Law to reduce choice overload and support clearer decision-making during the purchase process.

Final Design

My teammate implemented the interactions in Figma, but every animation, transition, and motion detail was defined by me — including timing, easing, and how elements respond to user input. Throughout this phase, I applied principles like the Peak-End Rule and iterated on the prototype based on feedback, refining clarity, flow, and storytelling to better support user needs.

The final prototype clearly communicated the design rationale, visual direction, and interaction patterns, supporting my goal of creating an online shopping experience that feels intuitive, story-driven, and meaningful, with low resistance and minimal cognitive load.

Challenge

Finding the right client with needs my team could address and a problem space where we could provide the most value was our biggest challenge. From the beginning, I knew that to be responsible to both ourselves and our client, we needed to align on interest and aesthetics while understanding the product, the client, and the audience. We spent considerable time researching before settling on Suigenkyo. Their values of craftsmanship, dedication, and the culture of highlighting the people behind the craft align with our vision of a successful brand. We saw immense potential in this partnership because we knew how to help them emphasize those values and tell a story that connects the point of sale to customer emotions. Once that alignment was established, the manifestation of the brand's flow, core values, user centered design, and aesthetics followed naturally.

Reflection

This project strengthened my ability to research a client, define a focused problem space, and support insights with data rather than assumptions. I learned how to identify what drives consumer decisions and use charts and visual analysis to communicate those insights clearly. It also helped me become more intentional with interaction details — from animation timing and easing to color contrast and cognitive principles like Hick's Law and the Peak-End Rule — to shape emotion and reduce cognitive load. Looking ahead, I want to improve how I use multimedia and interactive elements to enhance storytelling, and explore more advanced motion design techniques to deepen the emotional impact of the experience.