Portfolio

From a 70-year-old shop in Zuoying Market to a highly-reproduced e-commerce website This project involved building a Shopify official website for "Cai Shi Zi Ma Fenyang Wontons." The designer from the collaborating party had already completed the full visual design draft in Figma. Our task was to highly reproduce this design draft into a functional and maintainable Shopify website ready for launch.   Brand Background Cai Shi Zi Ma is a well-established wonton shop that has been deeply rooted in Zuoying Second Public Market for over 70 years. It specializes in signature fresh pork wontons, spicy dry wontons, tofu skin wontons, tangyuan, and other fresh frozen delivery products. It has also been featured multiple times on TV programs and unboxed by influencers. The brand has a rich story and solid reputation. The website's mission is to transform this "market human touch" into an online experience that can drive e-commerce conversions.   Project Challenge: High-Fidelity Implementation When a designer has already produced a complete Figma design draft, the focus of frontend implementation shifts from "creative ideation" to "precise execution": Layout spacing, font hierarchy, and color system all need to align with the visual specifications of the design draft. Multiple modules on the homepage (carousel banner, best-selling products, free shipping bundles, influencer recommendations, TV reports, YouTube video wall) need to be reproduced one by one and connected to the editable data structure in the Shopify backend. Both mobile and desktop versions of the layout have design drafts, requiring separate adjustments to ensure that the reproduction fidelity is not compromised by the device.   How We Did It Modular SlicingAccording to the Figma design draft, we deconstructed each content block on the homepage (featured products, value-for-money free shipping bundles, influencer recommendations, TV reports, Mama's Kitchen video wall, etc.) and implemented them as Shopify theme sections. We used existing theme functionalities with almost no modification to the original code, making it easy for the brand to update, reorder, and adjust content later. Integration of Membership and Promotion MechanismsBased on brand needs, we planned tiered promotional alert bars for free shipping thresholds and gift with purchase offers (spicy wontons, chili sauce), as well as a member rewards program page, allowing marketing activities to be directly reflected on the frontend. Integration of Social Media and Reputation ContentWe organized the brand's long-accumulated TV reports, influencer unboxing reviews, and YouTube videos into the website pages, and connected communication channels such as LINE, Instagram, and Facebook. This ensures the official website is not just a storefront but also a display case for brand trust. Pixel-Perfect Detail CalibrationWe repeatedly compared details such as button rounded corners, spacing, letter spacing, and image cropping ratios between the design draft and the actual pages to ensure that the launched website matched the visual design provided by the designer. Results The launched website fully preserved the visual design of the brand's designer while incorporating the product management, promotion mechanisms, and membership system flexibility inherent in Shopify e-commerce. This allowed "Cai Shi Zi Ma" to extend its 70 years of market reputation to online channels. Our service included subsequent training on how to use the website backend. After many years of operation, the website has evolved significantly from its original design and content, demonstrating how Shopify makes it easier for clients to manage and modify their content independently. Visit Cai Shi Zi Ma Fenyang Wontons website

Those who tell stories with their lenses also need a website that can tell stories Wedding / Portrait Photographer Sion Hsu (Sion Photography) Website Development Project Sion has been engaged in photography for over 10 years, with a shooting range spanning wedding documentaries, pre-wedding shoots, maternity and family photos, petportraits, and various event records. With a diverse clientele, the work style needs to balance both "warmth" and "quality".   Client Needs For a photographer's website, the core mission is actually just one: to let the photos speak for themselves, while also encouraging unfamiliar visitors to stay and make contact. Sion's needs were clear: Multiple categories of work (weddings, pre-wedding, portraits, family, pets...), requiring a clear portfolio categorization structure for clients to browse according to their needs. Personal image needs to be warm and sincere, not too commercialized or studio-like. Needs to integrate social media and contact channels such as Instagram, Facebook, and LINE to lower the barrier for inquiries.   How We Did It Information Architecture Centered Around the PortfolioThe Gallery was divided into subcategories such as Wedding Documentary, Couple Pre-Wedding, Registration Portraits, Personal Branding Portraits, Maternity & Family, Family Portraits, Event Documentation, and Pet Portraits. This allows visitors with different needs to directly find the relevant works, instead of scrolling through a long string of unrelated photos. Homepage Opens with the "Person" Not a "Work Wall"The homepage opens with Sion's self-introduction and photo, accompanied by a first-person text (getting married, raising a dog, having children, used to be a musician, used to be in sales...). This puts the photographer's personality and warmth upfront, then introduces a revolving display of works, allowing visitors to get to know the person before getting to know the work. Social Media and Contact IntegrationThe footer and header both integrate contact channels such as Instagram, Facebook, and LINE, and "Contact Sion" calls to action are placed in multiple locations to shorten the distance from browsing works to actual price inquiries. Bilingual Presentation (Chinese and English)Titles and some text are presented in both Chinese and English (e.g., Home / About / Gallery / Contact), balancing brand quality with the reading needs of international/bilingual clients.   Results After the website launched, Sion gained a platform that can showcase diverse photography types while maintaining a personal style and warmth. Visitors can quickly find corresponding works based on their needs (weddings, portraits, family, etc.) and directly contact for bookings through various channels. We also taught the client how to upload new works and perform basic maintenance, and the site has been operating for several years. Visit Sion Photography Sion Photographer Sion Photographer Website  

Assist brands in establishing cross-border e-commerce websites, organizing product and page structures, and creating clearer branding and conversion processes.

Adjustments to brand visuals and shopping experience were made to enhance overall consistency and commercial presentation.

  Orange Studio Personal Portfolio Case Study｜Web Design × Quality Style × Simple European & American   As the starting point for "ORNG Studio," this portfolio website was my initial design playground. From style selection, template adjustments, to content structure and layout design, it was all completed by me alone, with the aim of creating a brand starting point that belongs to me. This website primarily features a simple European and American style, customized using an existing HTML template. It focuses on clear presentation of information hierarchy and a clean and sharp visual style, while retaining future scalability (such as adding new works, linking to external case studies, contact forms, etc.).       ✨ Project Features Simple and high-quality visual design: Uses whitespace and layering to enhance reading rhythm and highlight the main works. RWD Responsive Layout: Ensures a good browsing experience on mobile phones, tablets, and computers. Customized HTML Adjustments: Optimized and streamlined the original template structure to improve loading speed. Basic SEO Setup: Configured meta title and description for search engine indexing. External Link Integration: Links to other portfolio platforms like Behance, Instagram, and Wix. 🛠 Technologies Used HTML / CSS / JavaScript Basic SEO schema setup Adobe XD & Figma layout planning Web hosting deployment & DNS binding       💬 Production Insights As the starting point for a personal brand that balances design and development, this website is not only a showcase for my work but also the beginning of a dialogue with clients and partners. It records my step-by-step process of learning website creation, template modification, and visual thinking, and it has further solidified my desire to "help more brands tell their stories through websites."       🔗 Project Link 👉 https://orangestudio.work     Do you also want to create your own brand website? Feel free to contact me; I can help you build your exclusive space from 0 to 1.  

etheryal | Wix Website Building Case Study for Korean Apparel Selection Ethereal is an online platform specializing in Korean fashion , featuring a minimalist, sophisticated, and high-end aesthetic. Its target audience is women who love Korean fashion and value quality and personal style. I assisted with the overall planning and development of this project, utilizing the Wix platform for website creation. # Korean style incorporated into official website design - Style Positioning: White background with minimalist design × black and gray main color scheme, echoing the Korean fashion aesthetic. - Homepage layout: Featuring a large Hero Banner image, paired with seasonal product selections and recommended items. - Shopping experience: Products are clearly categorized (tops/trousers/dresses/shoes, bags and accessories) - Multiple Images: Product pages support multi-angle image displays to enhance persuasiveness in purchasing decisions. # Technical Implementation and Architecture Theme and layout design - Theme Customization Redesign - Create clear navigation guides for product categories. - Product pages support multiple images, specifications, and style story descriptions. Shopping function integration - Set up cash flow - Includes discount codes, member registration system, and quick browsing. - Join the Instagram Gallery section to boost brand social media engagement and conversion rates. SEO and Marketing Setup - Set SEO title/description/image alt description (optimize search exposure) - Create FAQ pages, return and exchange policies, and other shopping instructions to enhance brand trust. - Optimized mobile RWD to ensure smooth operation on mobile devices. Official website link [Go to the official Ethereal website] Customer Feedback "The website looks like an extension of the brand, clean yet detailed, which perfectly meets our needs. The tutorials are detailed and the after-sales service is excellent. It's very easy for us to maintain ourselves."

We created a Shopify website for the DANWU designer brand, integrating the brand philosophy, bespoke wedding dresses, and designer merchandise to showcase a high-end brand image and a seamless shopping experience.