Company
Metier (Thailand) Co,. Ltd.
Date
Apr – Oct 2025
Type
Website, CMS
Role
UX/UI Designer
Team
Product Manager, Developer, UX/UI Designer, SEO, Copywriting
Industry
Agency
Tools
Figma, Figjam, Google Workspace, Chat GPT, Coda, Discode
Deliverables
Wireframes · Prototypes · UI Assets · Design System · User Flows · Research Report · CMS
Intro
About Siriraj Bumrungvej Project
Siriraj Bamrungvej is an online store offering a curated selection of health and wellness products developed by a team of doctors and pharmacists from Siriraj Hospital. Every item is guaranteed 100% authentic. Among the most popular are facial and body creams, shampoos, and hand lotions — all renowned for their deeply moisturizing and strengthening properties.
Task Overview
Designed the Information Architecture (IA) to visualize the overall structure and discuss alignment with the Project Manager before task distribution to the design team.
Created three mockup options for client selection.
Developed a design system based on the approved mockup.
Designed UI templates for each milestone:
1) Phase 1: Home, About Us, All Blogs, Blog Detail, Contact Us
2) Phase 2: Authentication, Product & Product Detail, Cart, Checkout, User Profile, Policy & Privacy
3) Phase 3: Drizzilify Library for ERP project and developer support and more
Challenges
Challenges
Business Perspective: The client requested a complete website redesign to shift sales to their own platform, aiming to reduce commission fees previously paid to third-party e-commerce platforms.
Team Experience: Our team had limited prior experience with e-commerce projects. To address this, we conducted research and on-site visits to understand the client’s business workflow, resulting in a valuable learning curve for both the design and product teams.
System Integration: We implemented the back-office ERP system using a design system built from the Drizzilify Library, recommended by the development team. A high-fidelity wireframe was also created to define the design direction and allow other designers to continue seamlessly.
Component Maintenance: Maintained and refined components within the Drizzilify Library to ensure consistency across both related projects.
Cross-Functional Collaboration: This project involved the highest level of stakeholder collaboration I’ve experienced — including the Siriraj Bamrungvej team for business input, Bplus for the legacy back-end system, and Soft Metic’s development team, where designers were actively involved in defining the design-to-development ratio.
Solve to Problems
Solve to Problems
Website Redesign & User Experience Improvement Redesigned the entire website structure to align with the client’s new business goals. The new design reflects Siriraj Bamrungvej’s brand identity through its color palette, visual elements, and model photography that highlights healthy, radiant skin. The interface was optimized for better usability and includes a more intuitive branch locator to improve the customer experience.
Modular Design System Implementation Applied a Modular Design System approach to create a shared component library usable across two projects. The foundation was inspired by observing design frameworks from references like Untitle, analyzing their structure, and adapting the principles to fit the project context.
Collaborative Workflow & Developer Alignment Established clear internal communication within the design team to ensure consistent component usage. Conducted peer reviews before presenting deliverables to the Project Manager. Maintained close collaboration with developers — providing design support whenever development-specific adjustments were needed — ensuring shared goals were achieved without affecting the planned man-days.
Business & Users
Both the business and end users experienced a completely new website journey, reflecting the refreshed brand identity and improved usability.
The design objectives were fully aligned with the client’s original vision and business goals, ensuring that every design decision supported both the client’s needs and user expectations.
What I Learned
Things I have learned from this job
Since most of the project communication came through the Product Manager — who managed all detailed requirements in written form — I learned to interpret written briefs and translate them effectively into UI design. This also helped me focus more deeply on design execution.
I developed a stronger interest in analyzing user flows and case scenarios, which enhanced my logical thinking and critical thinking skills.
Improved collaboration with developers by streamlining design handoffs, such as providing CSS files and color codes directly to facilitate development.
Gained a deeper understanding of e-commerce systems and reinforced a user-centered design mindset throughout the process.
Learned how to maintain and revise shared components to ensure compatibility across two highly customized projects.
Through retrospective sessions at the end of each sprint, I gained new perspectives from teammates and continuously refined my own workflow and communication skills.
