Building Consistent, Responsive Web Pages for a Science-Focused Brand
UX/UI Design | Web Design | Responsive Layouts | CMS (Hubspot/Wordpress) | Front-End Design | Visual Hierarchy
UX/UI & Website Design | 2023-2025
OVERVIEW
Vernier Science Education — Campaign Websites
Vernier Science Education has spent more than 40 years creating hands-on tools that help students learn science through exploration. During my seven years on the design team, I saw how deeply the company valued educators and student curiosity. Every project aimed to make complex science feel approachable, engaging, and grounded in real classroom needs.
I designed and built several campaign landing pages that supported product launches and major initiatives, including the Green Chemistry HubSpot pages, the 2025 GEAR UP Conference, and 2025 NSTA Conference site. While each campaign told a different story, they all shared a common challenge: maintaining strong brand consistency while tailoring the experience to a specific audience, message, and platform.
These projects lived across both WordPress and HubSpot, two systems with very different constraints and capabilities. Rather than forcing visual uniformity, I treated each platform as a design environment with its own rules. Through layout decisions, image treatments, and content structure, I created responsive campaign microsites that felt distinctly Vernier while allowing each initiative to stand on its own.
Working on a small, highly collaborative team, I contributed across illustration, print, web design, and email, while becoming the primary designer for web and email projects. Over time, this role allowed me to shape Vernier’s digital campaigns end to end, from creative direction through production. The result was a flexible, cohesive set of campaign websites that supported Vernier’s educational mission while strengthening its evolving digital presence.
ROLE
LEAD WEB DESIGNER, UX/UI DESIGNER
2023-2025
TIMELINE
TOOLS
WORDPRESS, HUBSPOT, PHOTOSHOP, ILLUSTRATOR
MARKETING LEADERSHIP, ART DIRECTOR, COPYWRITER, PROJECT MANAGERS, CONTENT STRATEGISTS
TEAM
DELIVERABLES
RESPONSIVE MICROSITES, LANDING PAGES, CAMPAIGN VISUALS, PROMOTIONAL ASSETS
WEBSITES
MOODBOARDS
2025 GREEN CHEMISTRY MOODBOARD
2025 GEARUP MOODBOARD
2025 NSTA MOODBOARD
“Building difficult scientific concepts into something tangible and beautiful.”
CREATIVE DIRECTION
Translating live, hands-on energy into purposeful digital experiences
Vernier’s campaigns come to life in physical spaces through conference booths, live demonstrations, and direct conversations with educators. My role was to translate that sense of discovery and momentum into a digital environment, where interaction happens through scrolling, clicking, and visual cues rather than in-person engagement.
Each campaign page needed to do more than present information. It had to spark curiosity, guide users through a story, and encourage meaningful action, whether that meant exploring new lab tools, learning about sustainable science initiatives, or engaging with Vernier at a major conference.
THE BRIEF
“What does it take to translate the energy and storytelling of
in-person campaigns into a clear, accessible web experience?”
To answer that question, I leaned on strong visual hierarchy, immersive imagery, and moments of motion to create rhythm and emphasis throughout the page. Layouts were designed to feel dynamic without sacrificing clarity, balancing visual excitement with usability and accessibility.
Each campaign site functioned as a focused digital extension of the live experience, reinforcing Vernier’s brand while adapting to the goals of the specific initiative. The result was a set of campaign pages that felt active, engaging, and intentional, mirroring the enthusiasm of educators and students interacting with Vernier in the real world.
PRODUCTION + DESIGN
Building flexible systems for distinct campaign goals
Design and production focused on creating campaign pages that felt energetic and engaging while remaining practical to build and maintain across WordPress and HubSpot. Because each platform imposed different constraints, the work required thoughtful planning early on to ensure designs translated smoothly from concept to implementation.
Rather than treating each campaign as a standalone build, I approached them as parts of a broader system. The goal was to establish shared structure and visual logic that could flex based on content, audience, and technical limitations without sacrificing brand clarity or usability.
Research, planning, and system decisions
-
I reviewed how previous campaigns were built in both WordPress and HubSpot to understand what could be reused and where limitations existed. Since components rarely carried over between platforms, identifying constraints early allowed me to design layouts that worked within each system instead of fighting against them.
-
Each campaign served a different audience and purpose, from conference promotion to educator resources and student engagement. I mapped content priorities and user intent for each initiative, which helped shape page flow, hierarchy, and calls to action. This ensured key messages were clear and easy to find regardless of campaign type.
-
With shared templates unavailable, consistency came from visual and structural choices. I relied on consistent grids, typography, spacing, and color usage to create cohesion across campaigns. Brand became the connective tissue, allowing each page to feel distinct while still clearly part of the Vernier ecosystem.
-
I analyzed past Vernier campaigns alongside other education-focused websites to identify patterns that supported clarity and engagement. Clear hierarchy, concise messaging, and purposeful imagery consistently helped communicate complex ideas quickly. Subtle interaction cues added a sense of discovery without overwhelming the experience.
-
Some earlier campaigns leaned heavily on bold visuals, which occasionally affected navigation clarity. My approach balanced visual excitement with simplicity, ensuring every design choice served both aesthetics and function. Pages needed to feel dynamic while remaining intuitive and accessible.
-
I reviewed how assets and content moved between design, development, and marketing teams. This helped clarify which elements should remain fixed and which could adapt per campaign. Aligning early on technical and content needs reduced friction later and supported smoother builds and updates.
FINAL DESIGN OVERVIEW
Clarity and cohesion emerged through iteration
As the designs evolved, it became clear that the original layouts needed stronger flow and hierarchy. Through design reviews, feedback from the marketing team, and my own observations, I refined each page to better support how users scanned, navigated, and engaged with the content. The focus shifted toward clear storytelling paired with practical usability.
Because I handled both design and front-end implementation, every decision accounted for real constraints within WordPress and HubSpot. I adapted layouts to existing themes and modules, finding creative solutions that preserved flexibility while maintaining consistency across campaigns. This hands-on approach helped ensure that what was designed could be built accurately and maintained over time.
The final pages feel intentional and user-centered. Each campaign supports its specific marketing goals while still feeling unmistakably Vernier. Clean structure, consistent visual language, and thoughtful pacing create an experience that is engaging without being overwhelming.
This phase reinforced my growth as a designer working in production environments. Refinement became less about visual polish alone and more about clarity, usability, and long-term sustainability. Small adjustments added up to a stronger foundation for future campaign work.
View the final projects below!
FINAL DESIGN | 2025 GREEN CHEMISTRY
Expressing sustainability through clarity and structure
The Green Chemistry campaign highlighted Vernier’s commitment to sustainable science education. I approached the page with restraint and intention, allowing the message to set the tone. A natural color palette anchored the design, with greens, chartreuse, teal, and neutral grays supporting a calm and credible visual system. Clean typography kept the focus on the educational story rather than decorative elements.
FINAL DESIGN | 2025 GREEN CHEMISTRY | HEADER
Built in HubSpot, the page used a modular grid that supported flexibility and reuse. Each section was designed to stand on its own while still feeling connected to the whole. This structure allowed the marketing team to update content, adjust messaging, or reuse components in future campaigns without redesigning the page from scratch.
I established hierarchy through spacing, measured color blocks, and clear content groupings. These choices helped guide users through the narrative, moving from high-level awareness into product context in a way that felt natural and trustworthy. The layout encouraged exploration while keeping the experience approachable and easy to scan.
FINAL DESIGN | 2025 GREEN CHEMISTRY | MID-SECTION
FINAL DESIGN | 2025 GREEN CHEMISTRY | FOOTER
This project reinforced the value of simplicity in service of message. By prioritizing structure, flexibility, and visual restraint, the final page communicated confidence and credibility while aligning closely with the campaign’s sustainability goals. It remains one of my favorite examples of how thoughtful web design can support both marketing needs and educational values.
FINAL DESIGN | 2025 GEARUP LANDING PAGES
Presenting Vernier as a trusted partner in STEM education
The GEARUP 2025 landing page was built in WordPress and designed to align with the conference’s bold visual theme. I leaned heavily on the established event branding to create a digital experience that felt cohesive with the in-person conference presence. Rather than focusing on individual products, the page emphasized Vernier’s role as a long-term partner supporting educators, institutions, and student pathways in STEM.
FINAL DESIGN | GEARUP 2025 LANDING PAGES | HEADER
The page was designed to echo the excitement of the in-person experience while keeping usability at the forefront. The page emphasized Vernier’s ongoing collaboration with educators and institutions. Each section was carefully structured to highlight partnership stories, shared goals, and resources that support STEM programs.The structure prioritized clarity and storytelling. Each section highlighted collaboration, shared goals, and educational impact, using concise content blocks and strong visual cues to guide users through the page. Large imagery and clear typographic hierarchy helped maintain energy while keeping the experience easy to scan and navigate.
Responsive behavior was central to the design. The layout translated cleanly across screen sizes, ensuring the page remained usable and engaging on mobile devices where much conference traffic occurs. Thoughtful spacing and simplified interactions encouraged exploration without relying on motion or complex effects.
FINAL DESIGN | GEARUP 2025 LANDING PAGES | MID-SECTION
FINAL DESIGN | GEARUP 2025 LANDING PAGES | FOOTER
FINAL DESIGN | GEARUP 2025 LANDING PAGES | MOBILE
This project reinforced how design can shift focus from products to relationships. By centering partnership and mission, the page supported Vernier’s presence at GEARUP while reflecting the values that drive its work in education.
FINAL DESIGN | 2025 NSTA LANDING PAGES
Designing a cohesive digital hub for a large-scale education conference
For the NSTA 2025 campaign, I designed and built a multi-page event experience in WordPress to support Vernier’s presence at the National Science Teaching Association conference. The goal was to create a clear, engaging hub that connected sessions, products, and resources while still feeling aligned with Vernier’s broader digital ecosystem. Each page played a specific role, but together they formed a unified experience that felt intentional and easy to navigate.
FINAL DESIGN | NSTA 2025 LANDING PAGES | MAIN PAGE HEADER
FINAL DESIGN | NSTA 2025 LANDING PAGES | MAIN PAGE MID-SECTION
FINAL DESIGN | NSTA 2025 LANDING PAGES | MAIN PAGE FOOTER
I structured the pages around a modular system that allowed content to stay organized and flexible as the conference details evolved. Schedules, session information, and supporting assets could be updated without disrupting the overall layout. This approach helped maintain consistency while still allowing the content to adapt as needed leading up to and during the event.
FINAL DESIGN | NSTA 2025 LANDING PAGES | WORKSHOPS HEADER
FINAL DESIGN | NSTA 2025 LANDING PAGES | WORKSHOPS MID-SECTION
FINAL DESIGN | NSTA 2025 LANDING PAGES | WORKSHOPS FOOTER
Visually, I leaned heavily on the established booth design and event signage to guide the look and feel of the pages. Color, layout rhythm, and hierarchy echoed the in-person experience, helping bridge physical and digital touchpoints. Every page was designed to be fully responsive, ensuring the experience translated cleanly across devices and supported how educators accessed information on the go.
FINAL DESIGN | NSTA 2025 LANDING PAGES | GIVEAWAYS HEADER
FINAL DESIGN | NSTA 2025 LANDING PAGES | GIVEAWAYS MID-SECTION
FINAL DESIGN | NSTA 2025 LANDING PAGES | GIVEAWAYS FOOTER
FINAL DESIGN | NSTA 2025 LANDING PAGES | MOBILE
This project highlighted the importance of structure as a creative foundation. By building repeatable components within WordPress and grounding the design in consistent visual cues, I created a system that encouraged exploration while keeping content clear and approachable. The result felt cohesive, flexible, and closely tied to the energy of the live event.
VERNIER AT 2025 NSTA | STEM MEETS WORLD
OUTCOME
Strengthening Vernier’s digital presence through clarity, consistency, and intention
Across all three campaign websites, the final designs created a more cohesive and confident digital presence for Vernier. Navigation felt clearer, layouts translated more effectively across devices, and each page aligned more closely with the brand’s evolving visual direction. These improvements helped the campaigns feel connected, even when the goals and audiences differed.
Working across WordPress and HubSpot reinforced the importance of adaptable systems and thoughtful structure. By focusing on consistency, hierarchy, and responsive design, I was able to support the marketing team’s campaign goals while preserving Vernier’s identity. Looking back, these projects affirmed how intentional web design can simplify complex initiatives and strengthen connections between content, brand, and audience.
REFLECTION
Refining my process through structure, adaptability, and trust
Working across these campaign websites pushed me to refine how I think about systems, consistency, and collaboration. Each project came with different goals, audiences, and technical constraints, which required me to stay flexible while protecting the integrity of the brand. Designing across WordPress and HubSpot sharpened my ability to make thoughtful decisions within limitations, and to see constraints as an opportunity to improve clarity rather than a barrier to creativity.
Key Takeaways:
COLLABORATION SHARPENS DECISION MAKING
Close partnership with marketing and content teammates helped me align design choices with campaign goals early on. Clear communication reduced friction later in the process and led to more confident, intentional outcomes.ADAPTABILITY IS STRENGTHENS DESIGN SYSTEMS
Moving between platforms reinforced the importance of building flexible layouts that could adjust without losing cohesion. Each project strengthened my ability to adapt structure, hierarchy, and visuals to fit different tools while maintaining quality.CONSISTENCY BUILDS CONFIDENCE
Maintaining a unified visual language across campaigns created a sense of trust and familiarity for users. Repeating patterns, grids, and brand elements allowed each page to feel distinct while still clearly part of the Vernier ecosystem.
These projects marked meaningful growth in how I approach digital design. I became more confident balancing storytelling with usability, and more intentional about building systems that support both creative expression and real world needs. The experience reinforced my belief that strong design comes from clarity, consistency, and a deep respect for both the audience and the tools used to reach them.