Irvinglab Web Design Portfolio: Shopify x WordPress

From website content planning and visual design to basic front-end programming or building Shopify and WordPress websites, I collaborate with various teams such as entrepreneurs, planners, copywriters, and graphic designers to complete web design and development projects of all sizes. I constantly challenge myself and push my limits to unleash my potential! (Last updated: January 14, 2023)

I still remember the early days when the concept of Responsive Web Design (RWD) was just emerging, about a decade ago. When I first started in the industry, it wasn’t even necessary or widely known. Back then, web designers only needed to have a basic understanding of HTML and CSS syntax. But now, RWD has become an essential skill. It means that after designing the visual aspects of a website, you also need to ensure that the web pages display properly on various devices and browsers. This is crucial for enhancing and maintaining a seamless browsing experience for visitors. It involves designing both desktop and mobile versions of a website and using CSS syntax to make them work together harmoniously.

Over the past few years, I’ve been self-learning the basics of web front-end programming through Google searches, computer books, and online courses. It has allowed me to apply what I’ve learned to my web design work, and the sense of accomplishment I feel is beyond words. I get so excited every time I complete a project, and I even take photos to capture the joy of the moment. It may not mean much to others, but for me, it’s a testament to the satisfaction that comes from achieving something through hard work. Now, let me share a brief overview of my web design journey!

Garmin Forerunner 225 Wrist-based Heart Rate Running Watch

This was my first task when I joined Garmin Taiwan International Avionics Corporation in 2015. The Forerunner 225 was Garmin’s first sports watch capable of measuring heart rate, making it a significant milestone product. Putting effort into something for the first time is always special. It took me approximately three weeks to fully immerse myself in the development of the new product website. Just adjusting the layout to fit different device sizes took me three working days. During the execution of this task, I set a guiding principle for myself:

“Focus on perfection, almost to the point of demanding it.” “Pursue excellence by paying attention to the smallest details.”

Based on rough estimation, during that period, I would typically arrive at the office around 6:30 AM and leave around 6:00 or 7:00 PM. Upon returning to my place of residence, I would spend an average of 1 to 3 hours each night finding solutions to technical issues on the website. In the first and second weeks, I worked an average of 51 hours per week. In the third week, the average was 65 hours (including an additional 13 hours of solo overtime on the previous weekend).

Team collaboration and work allocation in our project are as follows: The graphic designer is responsible for graphic design and print output. The visual merchandiser handles the display design for various stores and channels. I handle the planning and organization of product website content and outline. The project manager oversees the entire progress, workflow, and provides product interface materials. The planner contributes content writing and text refinement. The industrial designer provides product 3D renderings. Model photography is outsourced to a photography studio for outdoor shoots. Finally, I take charge of designing the static visuals and UX for the website. I discuss and confirm the static visuals with supervisors and relevant team members. Once confirmed, I proceed with coding, including basic layout, interactive effects, and basic SEO settings. The most challenging part is handling responsive web design (RWD) for different platforms and cross-browser compatibility. The most rewarding yet sometimes frustrating aspect is solving unforeseen technical issues. Lastly, I integrate website analytics tracking codes and set up tracking events for buttons to facilitate evaluation after the website goes live.

• Portfolio Link: Learn more
• Web Design x Front-end Development: Irving Chen

---

Garmin x Nike Taipei Women’s Half Marathon Event

這個活動網站是在 2016 年，那時候非常時間非常緊急，一週內必須完成，所以我跟企劃說你趕快給我文案和企劃簡介，我得趕工，但修改時間不多，能修正的內容因此也不能太多。第一天開會了解整個企劃需求與目標，接下來我用了兩天的時間進行網頁視覺設計、兩天撰寫前端程式（這兩天加班到凌晨三點、四點），一天討論並更新網頁，然後上線！還好這種需求僅只一次，不然我身子會未老先衰啊！

• Portfolio Link: Learn more
• Web Design x Front-end Development: Irving Chen

---

Garmin vívomove Smart Watch

The Garmin vívomove is Garmin’s first analog-style smartwatch, and it features a unique and elegant minimalist design. The team support has been excellent, providing all the necessary assets. There are numerous styles available to match the watch’s background theme. Since we have collaborated across teams on multiple occasions, the project has progressed smoothly, allowing me to put my full effort into creating its visual web design. It feels great!

• Portfolio Link: Learn more
• Web Design x Front-end Development: Irving Chen

---

Garmin zūmo Motorcycle GPS Navigators

It’s really cool that Garmin also offers navigation devices specifically designed for heavy motorcycles! When I received those photography materials, I was instantly inspired and had some creative ideas. The two half-faced motorcycle riders in the images really resemble characters from a video game battle scene, which adds an extra level of awesomeness! Instead of using the full-face images as they were, I intentionally cropped them in half for the packaging design. This increased the overall coolness factor. Additionally, throughout the website design, there will be dynamic drifting smoke (cloud) effects, creating a sense of “the journey on the road” that comes alive on the web page. It allows users to experience the thrill of riding (browsing) right on the screen!

• Portfolio Link: Learn more
• Web Design x Front-end Development: Irving Chen

---

2017 Garmin Girls Party

At that time, we had an annual tradition of taking a large group photo, and it was clear that it was meant for the record books! This project took a total of three weeks to complete the website, handling both the design and coding aspects. Even though I worked overtime at home without any extra pay, what mattered more to me was giving my design the best effort possible!

• Portfolio Link: Learn more
• Web Design x Front-end Development: Irving Chen

---

Don-tei Wagyu Sukiyaki

First-time undertaking a website design for the food and beverage industry, starting from scratch without any existing resources to reference or use. Consequently, I proposed a photography plan to the client, allowing their photographer to capture images according to the specified requirements. The fundamental principles of food photography are as follows:

It will make you drool just by looking at it.

Yes, it should look delicious, tempting enough to make one’s mouth water. Capture it as best as you can!

The second principle of American-style food photography is “visual plating design.” The visual presentation can greatly impact the taste experience. Before even taking a bite, the visual appeal can make one’s mouth water (Pavlov’s restraint, perhaps?) and even evoke hunger. I had the pleasure of working with a professional food photographer on-site, and it was enjoyable and fulfilling. It was satisfying to capture appealing images and equally delightful to indulge in the deliciousness. With these mouthwatering visuals in hand, we can proceed smoothly with the website execution!

• Portfolio Link: Learn more
• Photography Project x Web Design x WordPress Website Development: Irving Chen

---

Yoshinoya Taiwan

For the second time executing a website design for a restaurant, building upon our previous collaboration, we applied the fundamental principles of food photography: “mouth-watering visuals” and “visual presentation design.” With these principles in place, the outdated appearance of Yoshinoya’s food photos has been completely revitalized. Many flavors that used to be less noticeable or unappetizing now make people crave a bowl just by looking at the photos XD! The website design, which used to follow outdated practices from over a decade ago, has now been updated with modern web design techniques, greatly enhancing the user browsing experience!

• Portfolio Link: Learn more
• Web Design x WordPress Website Development: Irving Chen

---

Taipei Weddings

Taipei Weddings, a leading brand in wedding planning, has been providing premium customized weddings, private party planning, and overseas wedding consulting services for over a decade. With a team of professionals specializing in wedding design, planning, and management, we bring over 20 years of experience to create unforgettable experiences. In January 2020, we launched a brand-new version of our official website to keep up with modern web design and optimize the mobile user experience.

What sets us apart is our collaborative approach with clients from the beginning of the project. Their input and support have greatly influenced the brand design of the website. As a result, our website showcases a fresh and innovative look that reflects our commitment to excellence in wedding planning.

• Portfolio Link: Learn more
• Web Design x WordPress Website Development: Irving Chen

---

JOWUA

Taiwanese startup company specializing in developing and selling Tesla-related products. It’s an impressive team that I have been closely working with since their early stages. Together, we have grown from scratch to achieving remarkable monthly sales figures. My primary role has been to design and build their Shopify e-commerce website, understanding their needs and guiding them throughout the process.

We have encountered and overcome various challenges along the way, including website development hurdles, payment gateway integration, and logistics solutions. We successfully completed the creation of the US website, targeting the American market, and later established a Taiwan website to cater to the local market.

Throughout our collaboration, I have witnessed the team’s dedication and witnessed their growth. It’s been an exciting journey to contribute to their success and assist them in reaching their goals in the competitive Tesla accessories market.

• Portfolio Link: JOWUA USA、JOWUA TAIWAN
• Web Design x Shopify Website Development: Irving Chen

Qubo (no longer in operation)

Qubo is a brand new pet e-commerce platform in Taiwan that focuses on innovative services as its core value. We are dedicated to improving user experience by offering intuitive and user-friendly web design, combined with unique and personalized smart selection features. We believe that we are gradually changing the consumption patterns of pet owners.

With logical and systematic product display, we aim to replicate the offline shopping experience for pet owners. At Qubo, they can find all the necessary food and supplies for their pets in one place, just like shopping in a physical store. Our consumer-oriented approach is centered around establishing an objective and fair product rating system, allowing customers to easily understand the features and suitability of our products.

• Portfolio Link: Learn more
• Shopify Website Development: Irving Chen

---

JE22

Professional Cycling Apparel and Accessories E-commerce Website, founded by a top-notch cyclist who has participated in professional cycling competitions for many years and has won multiple championships.

• Portfolio Link: Learn more
• Shopify Website Development: Irving Chen

MIRA

Creating a brand website for the first time in the biotechnology industry, it involved extensive communication and discussions to gain a deep understanding of their specialized field. The main content focuses on explaining the uterine endometrial receptivity test, which helps determine the optimal timing for embryo implantation in artificial insemination. The target audience includes healthcare professionals and couples undergoing artificial insemination treatment. The website is available in three languages: Traditional Chinese, Simplified Chinese, and English. The core design concept aims to establish a professional image while incorporating elements such as soft pastel pink and purple colors, adorable baby and happy family imagery, and visuals of medical professionals and data charts, creating a warm and welcoming atmosphere.

• Web Design x WordPress Website Development: Irving Chen

---

GWS (General Water Solution)

A well-known water filter brand in the United States, committed to providing global solutions for high-quality drinking water.

• Portfolio Link: Learn more
• Shopify Website Development: Irving Chen

Palanan

A Canadian startup company dedicated to selling eco-friendly products and promoting concepts of environmental protection, recycling, and sustainability through their blog. They are committed to helping people achieve zero waste through education, research, and eco-friendly products. Their mission and values align with the modern consumer’s desire for meaningful action and ideas.

• Portfolio Link: Learn more
• Web Design x Shopify Website Development: Irving Chen

---

In addition to the above, we are currently working on several exciting and challenging website projects. These include brand identity websites, e-commerce websites, single-page marketing web designs, website content planning and SEO, and website UX user experience design. We will continue to update this article with our latest projects. Finally, if you enjoyed this design showcase, feel free to leave a comment to inquire or engage in discussion. We welcome any questions and ideas. Thank you!

Hope You Enjoy My Design Works！

---

---