The holiday season is never just about shopping — it’s about memories, stories, and a touch of wonder. As part of my role at Lane Crawford, I helped shape the Christmas 2024 campaign into more than a landing page. I wanted to craft a stage where storytelling, fashion, and interactivity could all come to life.

Turning a Campaign Into an Experience

This project brought together storytelling, brand identity, and a seamless e-commerce experience in a festive, interactive environment.

The campaign introduced 4 little buddies — Baz, Mini Baz, Rox, and Max — to guide customers through seasonal offers, events, and gifting. The goal was to create a dynamic, immersive page that not only captured the festive spirit but also inspired exploration across Lane Crawford’s luxury categories.

So I did what any front-end developer does best: I stitched together assets, design, and code until the story could breathe online.

My Role in the Project

• Front-End Build: Structured the Christmas landing page with campaign specific CSS for a festive yet consistent design.
• Interactive Features: Integrated custom JavaScript modules to animate characters and create smooth festive interactions.
• Performance Focus: Balanced creativity and site speed by aligning with Lane Crawford’s established technical standards.
• Wireframe & User Flow: Planned and mapped how users would explore the campaign, from first arrival through events highlights to exclusive shopping edits, ensuring a logical and enjoyable journey.

What I Learned

Projects like this remind me that front-end development is equal parts stage design and storytelling. It isn’t just pixels and breakpoints — it’s how you make someone feel when they land on a site. And in this case, that feeling was a little bit of holiday magic.

Credits and stack

• Role: Web developer (wireframing & user flow, responsive build, performance, accessibility, motion)
• Deliverables: Christmas homepage, landing page, gift guide & sitewide header
• Focus areas: Responsive layout, accessibility, micro-interactions, editorial content structure

When I joined Lane Crawford’s digital team, the brief was clear but ambitious: craft special landing pages that capture—and convert—the cultural currents shaping how people shop. The result was a three-part series of content-driven experiences that wrapped product discovery in a story-first, scroll-native design:

• Wellness Grove — a quiet pause for mindful retail
• Kicks Corner — a sneakerhead’s seasonal playground
• K-Obsession — a K-culture spotlight

Together, they formed one narrative: the modern customer isn’t just buying things—they’re joining movements. My job was to translate movement into motion on the web.

What I built

• Narrative-led landing pages: Each page opens with a hero that sets the mood, then flows into editorial modules and shoppable sections. The content reads like a magazine but behaves like a store.
• Mobile-first layouts: I designed for thumbs first—card stacks, swipe-friendly galleries, compressed media, and lazy-loading for speed.
• Micro-interactions: Subtle transitions, hover states, and scroll reveals created a tactile sense of craft without slowing performance.

The design system underneath

Under the hood, I created a shared type scale and spacing system that could flex from energetic (K-Obsession) to contemplative (Wellness Grove) without breaking the brand. Performance was treated as a feature: responsive image sets, lazy-loading, minimized blocking scripts, and CSS-driven motion kept Core Web Vitals healthy.

Crafting the journey

My contribution centered on the wireframe and build: shaping the flow from thesis to product so the pages read like editorial but convert like commerce. Each page opens with a clear “why now,” then graduates into progressively detailed sections. Skimmers see the essentials—headlines and hero products—while deep divers uncover editor notes, brand context, and layered galleries. I designed the rhythm to feel natural: browse, learn, want, act. The component structure supports both quick scans and long reads, making seasonal refreshes fast without rethinking the journey each time.

Credits and stack

• Role: Web developer (wireframing, responsive build, performance, motion)
• Deliverables: Three themed landing pages, component library, performance optimization
• Focus areas: Responsive layout, accessibility, micro-interactions, editorial content structure

Building a beautiful website is one thing. Turning it into a fast, secure, and resilient product that real customers trust is another. In a startup environment, I owned the full stack for three very different brands — UK University, Pet Travel, and Match Dating — from hosting and infrastructure to performance, SEO, and day to day publishing. Here’s the story behind shipping all three, end to end.

Three brands, one stack, many constraints

Startups move fast and budgets are real. I needed a repeatable setup that balanced reliability with speed of delivery. The answer: a hardened WordPress stack on cPanel hosting, fronted by Cloudflare, and optimized with a battle tested theme and a lean plugin toolkit. The result was three distinct sites — UK University, Pet Travel, and Match Dating — each with its own voice, yet sharing the same performance and security DNA.

TL;DR

Three production sites, launched and maintained on a scalable, secure WordPress stack:

• Hosting and ops via cPanel
• Full SSL coverage
• Cloudflare CDN, caching, DDoS, and WAF
• WordPress with Flatsome and WooCommerce
• Performance via WP Rocket and careful asset strategy
• Conversion with Fluent Forms and Buttonizer
• SEO foundation with Yoast and structured content
• Safe deployments with All in One WP Migration

Owning the infrastructure, not just the theme

I started at the bottom of the stack. Servers were set up with cPanel to streamline operations and facilitate handover. I issued and renewed SSL across domains and subdomains so every touchpoint was encrypted. Cloudflare sat at the edge for global CDN, smart caching, and DDoS protection, which gave us instant gains in latency and resilience.

A WordPress foundation that scales with content

For the front end, I chose the Flatsome theme—not for the buzzword, but for its balance of flexibility and performance. It allowed me to iterate quickly on design systems while staying lightweight. WooCommerce was integrated where productized services and payments made sense, but I kept the store footprint minimal to avoid bloat. I used All in One WP Migration to version and move environments safely, so I could test aggressively without risking production.

Speed as a feature, not an afterthought

On each site, I treated speed as a UX feature. WP Rocket handled page caching, preloading, and minification, while Cloudflare’s edge cached assets close to users. I audited render blocking resources, deferred non critical JS, and optimized media delivery so first contentful paint felt snappy even on mobile.

Forms that convert and flows that feel human

Every lead form was designed to be fast and frictionless. Fluent Forms & WP Forms powered multi step flows, conditional logic, and spam prevention without wrecking performance. Buttonizer allowed me to highlight high-intent actions, such as WhatsApp, right where users needed them — particularly on mobile.

SEO that compounds

Yoast SEO set the foundation, but the real gains came from structure and intent. I built clear information architectures—services, countries, FAQs—for Pet Travel; program ladders and eligibility content for UK University; and credibility first pages for Match Dating. Clean slugs and internal linking supported discoverability. Faster pages improved crawl efficiency, while consistent on page patterns made the content legible to both users and search engines.

Credits and stack

• Role: Web developer & UI designer
• Deliverables: reusable UI components, fast pages, secure deployment
• Focus areas: performance, accessibility, conversion
• Stack: WordPress (Flatsome), Cloudflare, WP Rocket, Fluent Forms, Yoast, cPanel

When Shun Ying Trading Company, a Hong Kong business specializing in packaging machinery, approached us, they wanted something simple — a professional, reliable web presence that reflected the quality of their products. My partner Kyla Yip and I started the project from scratch, setting out to create a first version that would give the company a strong, credible digital identity.

Laying the Foundation for Trust

Our target audience consisted mainly of middle-aged business owners and factory operators, many of whom browse the web on their mobile phones. That shaped most of our design and UX decisions. We placed mobile usability at the forefront, ensuring that navigating product details and service information would feel smooth, intuitive, and approachable.

The Role I Played

My responsibilities focused on UX design, as well as all front-end coding. From layout structure to spacing systems, my goal was to make the interface feel balanced and purposeful, no matter the screen size.

To get things moving efficiently, we built the front end using Bootstrap — giving us a strong grid system, consistent spacing, and responsive breakpoints right out of the box. It let us focus more on experience and content rather than reinventing the layout framework from scratch. Small tweaks through custom CSS helped the design stand apart from a standard Bootstrap template, keeping it clean yet unique.

Designing for Real Users

Because our audience wasn’t necessarily tech-savvy, our biggest challenge was keeping everything simple — no complex navigation, no unnecessary animation. Just clear buttons, structured sections, and strong readability. The goal was that even someone new to browsing business websites could find what they needed instantly, whether on mobile, tablet, or desktop.

For me, it was a meaningful project — one that combined practical UX design principles with the proven simplicity of Bootstrap, resulting in a product that simply works. It’s not about fancy effects or experimental interaction — it’s about delivering clarity and confidence through design.

Credits and stack

• Role: UX Designer & Developer
• Deliverables: Fully responsive website, Company information & product showcase pages, Desktop, Mobile and tablet optimized user experience
• Focus areas: Bootstrap 3, HTML5 / CSS3, Adobe Photoshop & Illustrator

In the world of luxury retail, every customer touchpoint matters. During my time as an Email Developer at Lane Crawford, I had the opportunity to contribute to a major CRM communications revamp—an ambitious project that redefined how the brand connects with its customers through always-on email journeys.

This wasn’t just a design refresh. It was a full-scale transformation of over 16 automated email programs, spanning welcome journeys, loyalty tier upgrades, birthday celebrations, and personalized product recommendations. The goal? To elevate the customer experience with smarter personalization, stronger visual storytelling, and seamless integration across regions and languages.

My Role: Building the Backbone of CRM Communications

As the email developer on the project, I was responsible for:

• Developing responsive HTML/CSS templates for over a dozen CRM programs, ensuring they works across devices and email clients
• Implementing dynamic content blocks using Emarsys scripting to personalize emails based on customer tier, gender, region (Hong Kong, Mainland China, rest of the world), and language (TC, SC, ENG).
• Collaborating with cross-functional teams CRM strategists and copywriters—to bring each email to life, from wireframe to launch.

Highlights from the Revamp

• Welcome Series: A redesigned onboarding experience with icon-driven layouts, app download CTAs, and AI-powered product recommendations.
• Tier Upgrade & Renewal: Dynamic emails that celebrated customer milestones with personalized benefits and new card visuals.
• Birthday Program: Gender- and tier-specific offers, including beauty gifts, bonus points, and suite access—delivered with a warm, personal touch.
• Points Reminder & Redemption: Visual hints and reward summaries to drive urgency and engagement.

The Impact

The project spanned over 6 months, involving multiple rounds of design, testing, and stakeholder reviews. By the end, we had successfully migrated all legacy templates to a new modular system. The result was a more cohesive, data-driven CRM ecosystem that aligned with Lane Crawford’s luxury brand identity.

Credits and Stack

• Role: Email Designer
• Deliverables: Always-on CRM emails, dynamic content logic
• Focus areas: Personalization, engagement, conversion optimization

The project focused on three key flows: Abandoned Cart, Wishlist Reminder, and New In. Each email was crafted to speak directly to the customer at just the right moment, using dynamic content and personalized triggers to drive engagement and conversions.

Building the Experience

Luxury shoppers are intentional. They browse, curate, and often hesitate before making a purchase. Our goal was to re-engage them with subtlety and elegance.

I collaborated with Beta Labs to map behavioral triggers and build responsive HTML templates that aligned with Lane Crawford’s premium aesthetic. These templates were functional, mobile-optimized, and integrated seamlessly with the email marketing platform.

For the Abandoned Cart and Wishlist Reminder flows, we integrated Beta Labs’ API to fetch product data based on user activity. This allowed us to dynamically populate emails with the exact items users had interacted with—creating a sense of continuity and relevance that felt personal and timely.

The New-In Highlights campaign took personalization even further. Instead of generic editorial storytelling, we leveraged BetaLabs’ AI engine to generate product recommendations tailored to each user’s browsing history. These picks were algorithmically curated, ensuring that every email felt like a bespoke shopping experience.

What I Learned

This project taught me how to blend storytelling with strategy. I learned to think beyond the code—to consider the customer’s mindset, the brand’s tone, and the subtle psychology of conversion. It also deepened my understanding of lifecycle marketing and how automation can enhance—not replace—human connection.

Credits and Stack

• Role: Email developer & designer
• Deliverables: Automated lifecycle email flows (Abandoned Cart, Wishlist Reminder, New-In), responsive HTML templates, dynamic content integration, CRM logic setup
• Focus areas: Personalisation, engagement, conversion
• Stack: HTML/CSS, Emarsys, Figma

Between June 2020 and May 2023, I worked as an Email Developer at Lane Crawford, a luxury retail company, where I was responsible for crafting and optimising promotional email campaigns that spoke to a discerning audience. My role was a blend of creative execution and analytical rigor—each email was not just a message, but a micro-experience designed to inspire, inform, and convert.

The Craft Behind the Campaigns

Every day began with a question: How do we make this email not just seen, but felt? From designing responsive layouts to implementing dynamic content blocks, I built emails that were tailored to the recipient’s preferences, purchase history, and browsing behavior. Whether it was a product launch, a seasonal sale, or a curated editorial, each campaign was an opportunity to tell a story—visually and contextually.

But the real magic happened behind the scenes. I collaborated closely with CRM strategists, merchandisers, and designers to ensure that every campaign was not only beautiful but also strategically sound. Segmentation played a key role. We didn’t just send emails—we sent the right emails to the right people. Gender, loyalty tier, and behavioral data informed our targeting, making each message more relevant and timely.

Testing, Learning, Iterating

A/B testing was our playground. Subject lines, send times, layouts, and even CTA placements were tested rigorously. We learned that subtle changes—like a more emotive subject line or a simplified layout—could significantly impact engagement. Personalisation wasn’t just a buzzword; it was a performance driver. From using first names to showcasing products based on browsing history, we made the experience feel bespoke.

Reflections and Takeaways

This project taught me that email marketing is both an art and a science. It’s about understanding human behavior, leveraging data, and crafting experiences that resonate. I learned to think beyond the inbox—to consider the customer journey, the brand voice, and the business goals.

As I build my portfolio, this project stands as a testament to what thoughtful, data-driven email marketing can achieve. It’s not just about sending emails—it’s about building relationships, one pixel at a time.

Credits and Stack

• Role: Email developer & designer
• Deliverables: Promotional EDMs, segmentation logic, A/B testing setup, performance tracking
• Focus areas: Lifecycle automation, personalisation, customer re-engagement, conversion optimisation
• Stack: HTML/CSS, Emarsys, Figma, Google Analytics, Excel

At GRI, I led the end-to-end design of promotional emails for CCSHOP.COM—planning, art direction, layout, and QA. The brief never changed: look editorial, sell like retail, and land clearly on every device. I worked across multi-label “Mix Brands” pushes and single-brand spotlights, tuning the same modular system to different voices while keeping production fast.

Email First: Designing for the Scroll

• What’s the offer? (headline + subhead)
• Why care now? (urgency, offer, or newness)
• Where to click? (a primary CTA above the fold)

Mix Brands: Curated, Not Collaged

I built a recognizable inbox language that balanced style and speed. Trend emails used an editorial spine with numbered “chapters” tied to products—like “Paris: 5 Trends to Watch,” which paired runway cues with shoppable tiles and a clear offer bar near the footer. Seasonal CC Club promos leaned graphic and bold—“Final Sale up to 60% Off”—with color-blocked heroes and dual paths to Shop Online or Shop In Stores. Across all, I kept copy live for deliverability, maintained consistent crops, and repeated finger-friendly CTAs at natural breaks.

Multi-label sends risk chaos, so I standardized grids and shadows, grouped by style or occasion, and anchored them with a single promise up top. A compact product strip mixed Minelli, André, eq:iq, Cosmoparis, and Nine West with clear prices, while a secondary perk panel (“Ends May 24” or promo code) extended the value without hijacking the hero. Logos and a store box at the end supported omnichannel traffic.

System and Workflow

A reusable module library—hero, offer bar, trend chapter, 2x2 grid, 44px+ mobile-friendly buttons, store box—plus per-brand token kits (logos, accents, crop guides) enabled quick weekly production. Each build shipped with annotated specs and was QA’d across Gmail, Outlook, and iOS Mail.

Credits and stack

• Role: Web Designer (concept, art direction, UI production)
• Deliverables: Homepage banners, category modules, eNewsletters, social assets, ad sets
• Focus areas: Message-first hierarchy, modular layouts, mobile-first, data-informed iterations
• Stack: HTML/CSS, Emarsys, Adobe Illustrator

GRI Group is the official Asian franchisee for internationally renowned brands such as Nine West and Karen Millen. To keep loyal customers engaged, we create and distribute brand newsletters that update them on the latest collections, promotions, and news.

For each brand newsletter, I closely follow the principals’ design guidelines to ensure the brand image is consistently represented. This includes carefully managing visual style, typography, color palette, and the proper use of logos and imagery to maintain a cohesive and authentic brand experience across all communications.

Single-Brand Push

Single-brand emails followed the same spine but shifted tone, color, and typography to fit the brand. Minelli felt refined and editorial; Steve Madden was bold and youth-forward; Nine West was clean, pastel, and category-led. These are examples of how the system adapted while the hierarchy and mobile reliability stayed consistent.

Credits and stack

• Role: Web Designer (concept, art direction, UI production)
• Deliverables: Homepage banners, category modules, eNewsletters, social assets, ad sets
• Focus areas: Message-first hierarchy, modular layouts, mobile-first, data-informed iterations
• Stack: HTML/CSS, Emarsys, Adobe Illustrator

As both event planner and designer, I led the creative direction for Pet Travel’s first industry exhibition — transforming an empty booth into a cohesive, on-brand experience that connected with pet lovers and travelers alike.

From 3D booth concept design to leaflets and social media visuals, I crafted a unified visual system that balanced professionalism with warmth. The booth layout was designed for engagement — open space for conversations, bright graphic storytelling panels, and cozy seating that invited visitors to stay and explore.

Every creative asset, from printed collateral to digital visuals, carried consistent design elements — cheerful colors, friendly typography, and pet imagery that conveyed safety and care in global pet travel.

This project allowed me to integrate event planning, booth design, and marketing materials into one seamless brand experience — proving how thoughtful design can turn a simple booth into a destination of its own.

Process & Tools

• Role: Creative direction, event planning, 3D visualization, and multi-platform graphic design
• Process: Research brand values → Define visual direction → Create 3D booth concept → Design event materials (leaflets, posters, social media) → Coordinate production & logistics → Final presentation and launch
• Stack: Adobe Illustrator, Photoshop

As part of my role at Proche, I led the visual design for a series of social media campaigns and booklets promoting UK University’s degree programs. The project aimed to deliver a clear, trustworthy, and aspirational look that could attract ambitious learners across digital channels.

Taking cues from the university’s established brand guidelines, I developed a consistent visual system — combining bold typography, vibrant color coding for each program, and human-centered imagery that conveys approachability and professionalism.

Each visual was created to communicate succinctly in a fast-scroll social environment — striking a balance between clarity, visual hierarchy, and emotional connection. The result was a cohesive set of graphics that translated educational values into an engaging digital presence.

Process & Tools

• Role: Visual Design, Art Direction, Layout Design
• Process: Research brand identity → Define design system → Create multi-format templates → Optimize for digital platforms
• Stack: Adobe Illustrator, Photoshop, InDesign

As the sole web designer within the marketing team at Hong Kong Economic Times (HKET), I was responsible for transforming strategic marketing objectives into cohesive digital visuals across web and social platforms. My role encompassed conceptualization, design execution, and optimization to ensure that each visual touchpoint reflected HKET’s trusted and dynamic brand identity.

Promotion Landing Page

To celebrate HKET’s recognition as “Digital Media of the Year” by Marketing Magazine, I designed a themed promotional landing page showcasing the celebratory spirit of the award. The design revolved around a “gift” motif — symbolizing appreciation and surprise — combining festive visual elements with HKET’s signature red to reinforce brand identity and drive user engagement.
Every component was tailored to align with campaign goals, guiding traffic seamlessly from ads and banners to the landing experience.

Advertising Banners

Following digital campaign strategies, I designed modular banner sets to promote subscription plans, content updates, and new product features. Consistency in typography, color palette, and layout ensured brand unity across hket.com and the HKET mobile app. The banner system was optimized for flexibility, allowing marketing teams to update creatives efficiently across different campaigns.

Social Media Ads

I created Facebook ad visuals that extended the brand’s professional yet approachable tone to social spaces. Each ad was optimized for clarity and scroll-speed engagement — combining bold messaging, color-coded visual hierarchy, and human-centric imagery. The result was an engaging, high-performing set of assets that enhanced HKET’s digital presence and supported its audience growth strategy.

Leaflets

From simple promotional messages to complex technical content, I design print materials that are clear, functional, and visually engaging—and whenever possible, beautiful.

Process & Tools

• Role: Visual Design, Web Design, Art Direction
• Process: Research brand identity → Define design system → Develop campaign templates → Optimize assets for digital platforms
• Stack: Adobe Illustrator, Photoshop

Annual reports often get a bad reputation for being dry, text-heavy, and uninspiring. But what if they could reflect not just numbers, but the vision and identity of a brand? That was the challenge I embraced when designing the 2018/2019 Annual Report for Hong Kong Economic Times Holdings Limited (HKET).

The Concept

The theme revolved around connectivity and growth in the digital era. The cover design features Hong Kong’s iconic skyline intertwined with digital network graphics, symbolizing HKET’s evolution from traditional media to a tech-driven information powerhouse.

Inside, the design approach focused on:

• Clean Layouts: Breaking down dense corporate information into digestible sections.
• Visual Hierarchy: Using typography and spacing to guide readers through key content like business domains, awards, and governance.
• Thematic imagery: High-resolution cityscapes to add vibrancy without compromising professionalism.

The Process

I started by mapping out the content structure—what needed emphasis, what could be visualized, and what should remain text-driven. From there, I built a design system with consistent color palettes, fonts, and graphic elements that aligned with HKET’s brand identity.

The Result

The final report is more than a compliance document—it’s a brand statement. It reflects HKET’s credibility, innovation, and leadership in the media and financial information space. Shareholders get clarity, and the company gets a design that reinforces its vision.

Process & Tools

• Role: Visual Design, Print Design, Art Direction
• Tools: Adobe Illustrator, Photoshop, InDesign

As GRI’s digital designer, I develop and curate website and eDM experiences that bridge aesthetics, usability, and brand storytelling. Each layout transforms content into a seamless shopping journey — visually rich, data-driven, and consistent across every device.

I craft clean, on-brand visuals with dynamic seasonal campaigns and product features that guide users to explore and shop with ease. From homepage banners and landing pages to promotional eDMs, every design reinforces GRI’s unique retail voice — stylish, modern, and approachable.

Every digital touchpoint is a continuation of the brand’s story — where layout hierarchy, product imagery, and storytelling text work together to inform, inspire, and convert. By merging behavioral insights with strong visual direction, each online communication feels both functional and human.

This work reflects how thoughtful digital design can elevate a retail brand’s presence, connecting product and consumer through clarity and emotion.

Process & Tools

• Role: Digital design, UX layout planning, eDM creative direction, and campaign execution
• Process: Research campaign theme → Develop digital visual system → Design responsive website layouts → Create eDM layouts & assets → Coordinate with marketing & content teams → Test & launch
• Tools: Adobe Illustrator, Photoshop

From concept development to final artwork delivery, I design cohesive campaign series across Instagram and Facebook — integrating seasonal trends, product highlights, and mood-driven imagery. Every post is part of a larger narrative: one that combines aspirational style with accessible storytelling.

The visual language evolves with each collection — bold typography, clean compositions, and art direction that enhance the brand’s lifestyle appeal. Through strategic color palettes, photography, and layout rhythm, GRI’s social media presence remains consistent yet flexible, adapting to diverse audiences and brand personalities.

These digital stories not only promote products but also express identity — making every post more than an ad, but a moment of connection with followers.

Process & Tools

• Role: Creative direction, concept design, and visual strategy for social media campaigns
• Process: Define campaign theme → Develop creative direction → Design post series & stories → Align tone & messaging → Schedule and launch with marketing team
• Tools: Adobe Illustrator, Photoshop