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
INTRODUCTION
Vernier Science Education
Vernier Science Education has been creating hands-on tools for teaching science for over 40 years. During my time on the design team, I saw firsthand how deeply the company cared about empowering educators and inspiring curiosity in students. With each project, the goal wasn’t just to market a product, but to make science more approachable and engaging for learners at every level.
I worked on several campaign landing pages that highlighted new products and event initiatives, including the Green Chemistry Hubspot landing pages, the 2025 NSTA Conference, and 2025 Gear Up Conference. These projects allowed me to combine design consistency with storytelling, ensuring each page reflected Vernier’s evolving brand and message. My focus was on creating responsive, visually cohesive layouts that balanced marketing goals with the company’s educational mission.
ROLE
LEAD WEB DESIGNER, UX/UI DESIGNER
TIMELINE
2023-2025
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
OVERVIEW
What does consistency look like when every campaign tells a different story?
Each Vernier campaign website served a distinct purpose. Some promoted upcoming conferences like NSTA 2025, while others highlighted educational initiatives such as Green Chemistry or student engagement programs like GearUP 2025. Despite their differences, every project shared one core challenge: creating web experiences that looked and felt like Vernier while communicating the specific goals of each campaign.
Working across both WordPress and HubSpot meant navigating two very different systems. Each platform had its own quirks, limitations, and ways of handling design elements. Rather than trying to force them into uniformity, I treated each project as an opportunity to experiment within the boundaries of its environment. Finding creative solutions, whether through layout adjustments, image treatments, or content structure, became a way to strengthen my understanding of both the tools and the brand.
The result was a collection of campaign microsites that supported Vernier’s broader mission to inspire curiosity and engage educators through clean, responsive, and accessible design. Each page balanced brand consistency with storytelling, creating a cohesive yet flexible design system that could grow with Vernier’s evolving digital presence.
PROBLEM
Capturing the energy of live campaigns and conferences in a digital space
Each Vernier campaign had a strong physical presence — vibrant booths, hands-on demonstrations, and enthusiastic educators connecting over science. The challenge was bringing that same sense of excitement and discovery to a digital environment, where users interact with a screen instead of people and products.
THE BRIEF
“How might we translate the energy and storytelling of live campaigns into engaging, interactive web experiences?”
The campaign pages needed to do more than share information; they needed to spark curiosity and drive action. Whether it was encouraging teachers to explore new lab tools or showcasing Vernier’s commitment to sustainable science, the digital experience had to feel just as alive and inspiring as the real-world event.
To achieve that, I focused on storytelling through visuals, motion, and hierarchy — building flexible layouts that emphasized key messages and moments of interaction. Each campaign page became a small stage for the brand’s story, designed to invite exploration and reflect the enthusiasm of Vernier’s audience.
DISCOVER & DEFINE
Laying the groundwork for adaptable campaign design
Each Vernier campaign had a strong physical presence — vibrant booths, hands-on demonstrations, and enthusiastic educators connecting over science. The challenge was bringing that same sense of excitement and discovery to a digital environment, where users interact with a screen instead of people and products.
-
I reviewed how past campaigns were built in both WordPress and HubSpot to see what carried over and what didn’t. Each platform had its own quirks, and very little could be reused between them. Understanding those limitations early helped me plan designs that worked smoothly within each system rather than forcing something that didn’t fit.
-
Each campaign served a different purpose. Some promoted conferences, others highlighted new products or educator resources. I outlined the goals and audiences for each one, which helped me see patterns in how people engaged with Vernier’s content. That insight shaped how I structured layouts and prioritized key messages on each page.
-
Since the platforms didn’t share common components, I focused on visual and structural unity instead. Consistent grid systems, typography, and color helped tie everything together. I approached each campaign as part of a connected story, using brand as the thread that made the experience feel cohesive no matter where a user entered the site.
Insights from campaign and site analysis
I analyzed past Vernier campaigns and website features to understand what worked well and where users might be getting lost. The goal was to identify consistent design patterns that could bring clarity and energy to future campaigns, while still allowing room for each one to feel distinct. I also wanted to see how other education-focused brands used digital storytelling to connect with their audiences.
-
Through my research, I noticed that the most effective education sites used clear hierarchy, concise messaging, and strong imagery to communicate complex ideas quickly. Interactive elements, even subtle ones like hover effects or animated icons, helped create a sense of discovery that mirrored the spirit of science education.
-
Some of Vernier’s earlier campaigns leaned heavily on large visuals or bold layouts, which sometimes made navigation less intuitive. My goal was to maintain that same excitement but simplify the structure so the message was always clear. Every design choice needed to feel intentional, both visually and functionally.
-
I reviewed how campaign assets were shared across WordPress and HubSpot, noting where templates or modules could be improved for flexibility. This helped me identify which design elements should remain consistent and which could adapt based on campaign goals. It also clarified the handoff process between design and development, saving time in later stages.
DISCOVER & DEFINE
Laying the groundwork for adaptable campaign design
Each Vernier campaign had a strong physical presence — vibrant booths, hands-on demonstrations, and enthusiastic educators connecting over science. The challenge was bringing that same sense of excitement and discovery to a digital environment, where users interact with a screen instead of people and products.
-
I reviewed how past campaigns were built in both WordPress and HubSpot to see what carried over and what didn’t. Each platform had its own quirks, and very little could be reused between them. Understanding those limitations early helped me plan designs that worked smoothly within each system rather than forcing something that didn’t fit.
-
Each campaign served a different purpose. Some promoted conferences, others highlighted new products or educator resources. I outlined the goals and audiences for each one, which helped me see patterns in how people engaged with Vernier’s content. That insight shaped how I structured layouts and prioritized key messages on each page.
-
Since the platforms didn’t share common components, I focused on visual and structural unity instead. Consistent grid systems, typography, and color helped tie everything together. I approached each campaign as part of a connected story, using brand as the thread that made the experience feel cohesive no matter where a user entered the site.
Insights from campaign and site analysis
I analyzed past Vernier campaigns and website features to understand what worked well and where users might be getting lost. The goal was to identify consistent design patterns that could bring clarity and energy to future campaigns, while still allowing room for each one to feel distinct. I also wanted to see how other education-focused brands used digital storytelling to connect with their audiences.
-
Through my research, I noticed that the most effective education sites used clear hierarchy, concise messaging, and strong imagery to communicate complex ideas quickly. Interactive elements, even subtle ones like hover effects or animated icons, helped create a sense of discovery that mirrored the spirit of science education.
-
Some of Vernier’s earlier campaigns leaned heavily on large visuals or bold layouts, which sometimes made navigation less intuitive. My goal was to maintain that same excitement but simplify the structure so the message was always clear. Every design choice needed to feel intentional, both visually and functionally.
-
I reviewed how campaign assets were shared across WordPress and HubSpot, noting where templates or modules could be improved for flexibility. This helped me identify which design elements should remain consistent and which could adapt based on campaign goals. It also clarified the handoff process between design and development, saving time in later stages.
BUILD & REFINE
Building each campaign site felt like fine-tuning a living system.
Once the direction was set, I moved into building out each campaign site, balancing structure, visuals, and function. Every launch had its own learning curve, especially as I worked across both WordPress and HubSpot.
This phase became a process of constant discovery—seeing how design decisions played out in real environments, refining details in real time, and learning how each adjustment shaped the user experience.
-
Each platform came with its own quirks. WordPress gave me more creative flexibility, while HubSpot required tighter alignment with templates. I experimented with layout adjustments and asset optimization to make sure the designs translated cleanly on both. The goal was to keep the same sense of energy and cohesion, no matter which system powered the page.
-
Throughout the build phase, I worked closely with developers, copywriters, and marketing leads to refine both design and messaging. Sometimes this meant quick feedback sessions where we made updates on the spot; other times, it meant reworking an entire layout to improve clarity. Those moments of collaboration kept the project grounded in real user needs, not just design intent.
-
Every campaign needed to reflect Vernier’s brand values while having its own identity. I played with typography, color, and illustration to give each one its own personality without losing the familiarity of the larger system. It was a balancing act between recognition and freshness, and it kept the work creatively engaging.
Refinement turned into a foundation for future campaigns.
By the time I completed the third campaign, the process had evolved into something far more systematic. I started documenting reusable patterns, defining spacing rules, and establishing a rhythm that made each new build smoother. What began as one-off web projects gradually became a framework for how Vernier could approach all future campaign sites—with clarity, speed, and consistency.
Even with these refinements in place, there was always room to push the designs further.
ITERATION
Refining what works
As the campaigns evolved, I started noticing patterns in what drew users in and what they scrolled past. Some elements that seemed minor at first, like a color shift, the spacing in a callout, or the rhythm of typography, made a big difference in how approachable the designs felt. I learned to pay attention to those small cues, testing and refining until the design felt effortless and intentional.
With each campaign, I took what I learned and applied it to the next, treating every launch as a chance to test an idea or adjust a tone. The process became a rhythm of designing, reviewing, and fine-tuning, less about starting over and more about evolving what was already there.
Looking back, that cycle of iteration is what made the work stronger and more cohesive over time. It wasn’t just about improving the visuals, but about understanding how each piece connected to the larger story of Vernier’s brand and its audience.
FINAL DESIGN
A clear direction came into focus as the design evolved
After several design rounds and careful evaluation of what worked and what didn’t, I realized the original layout needed a stronger sense of clarity and flow. Drawing from user feedback and my own observations, I shifted toward a design that balanced visual storytelling with practical usability. The result was a cleaner, more intuitive experience that aligned with how users actually interacted with the content.
Since I handled both design and front-end implementation, I worked within the framework of HubSpot and WordPress themes to bring the concept to life. This meant finding creative solutions within tight parameters, optimizing each layout for both flexibility and consistency across campaigns.
This final version feels more cohesive and user-centered. It supports the marketing team’s goals while offering visitors a smoother, more engaging experience.
The process reinforced how much thoughtful refinement can elevate a design within real-world limitations. Each adjustment, no matter how small, contributed to a stronger and more reliable foundation for future campaigns.
A. FINAL DESIGN / NSTA 2025 LANDING PAGES
A clear direction came into focus as the design evolved
For the NSTA 2025 campaign, I designed and built a multi-page event experience in WordPress to highlight Vernier’s participation at the National Science Teaching Association conference. My goal was to create a central hub that felt energetic and purposeful while staying consistent with the company’s broader digital presence. Each page worked together to connect sessions, products, and educational resources in a clear, approachable way.
I built the structure around a flexible modular system that kept content organized and adaptable. This approach made it simple to update schedules, session details, and media assets without disrupting the visual flow. Each page element was intentional, designed to lead users through the content naturally while maintaining balance between information and design.
Visually, I drew heavily from the established booth and event signage, translating that same energy into the web environment. The color palette, layout rhythm, and visual hierarchy were all inspired by the in-person experience, creating a sense of continuity between the physical and digital spaces. Every element was designed to be fully responsive, ensuring the pages worked seamlessly across mobile and desktop.
This project reinforced how thoughtful structure can support creativity. By building repeatable, adaptable components within WordPress, I created a campaign that felt cohesive and alive, ready to evolve as the event unfolded while keeping the design rooted in clarity and purpose. The layout invited exploration through strong visual cues and layered sections. The design balanced clarity and curiosity, guiding users to relevant content and encouraging deeper engagement. This project proved that careful structure and consistent branding can unify digital and in-person experiences.
B. FINAL DESIGN / 2025 GREEN CHEMISTRY
Translating a sustainability message into an interactive digital experience
The Green Chemistry campaign focused on promoting Vernier’s commitment to sustainability in science education. I approached the design with an emphasis on balance and restraint, letting the message of environmental responsibility lead the visual tone. The palette drew from natural greens, chartreuse, light blue, and neutral grays, complemented by clean typography that kept the focus on the content.
Built within HubSpot, the layout followed a modular grid that allowed the marketing team to easily adapt and reuse sections across future campaigns. Each element, from callout banners to data highlights, was designed with flexibility in mind, maintaining consistency while allowing for updates without rebuilding the page.
I created clear visual hierarchy through subtle use of color blocks and whitespace, ensuring that the campaign’s goals and product benefits felt approachable and authentic. The page guided users from awareness to action, connecting the educational message with specific product offerings.
This project reinforced the value of modularity and restraint. By focusing on purposeful design choices rather than visual complexity, I was able to communicate a sense of calm confidence that aligned perfectly with the campaign’s sustainability message.
C. FINAL DESIGN / GEARUP 2025 LANDING PAGES
Showcasing Vernier as a Collaborative Partner in STEM Education
The GEARUP 2025 landing page was designed in WordPress to align with the conference’s bold, energetic visual theme while positioning Vernier as an active partner in advancing STEM learning. The design process focused on adapting the event’s visual language into a responsive digital experience that felt connected to the in-person presence.
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 layout was simple but effective, using large imagery, clean typography, and focused calls to action to maintain attention and guide exploration. The responsive design worked seamlessly across devices, reinforcing Vernier’s commitment to accessibility and ease of use.
This project served as a reminder of how thoughtful design choices can extend a brand’s message beyond its products, communicating values and relationships that strengthen trust with educators and partners.
OUTCOME
The final designs strengthened Vernier’s digital presence and created a more unified experience across campaigns.
Each campaign site delivered measurable improvements in engagement and visual consistency. Pages were easier to navigate, more responsive on mobile, and better aligned with Vernier’s updated brand direction. Looking back, these projects reminded me how design can bring clarity to complex initiatives and create cohesion across multiple touchpoints. They also reinforced my belief that thoughtful digital design plays a key role in connecting people to ideas, not just products.
Together, these projects strengthened Vernier’s online presence by improving consistency across platforms, elevating the visual storytelling, and creating more intentional user journeys. The work also reinforced the marketing team’s ability to adapt the brand for specific campaigns while maintaining a cohesive look and feel.
REFLECTION
Strengthening my process through collaboration and consistency
These projects reminded me how design evolves through partnership. Each one required adapting to different goals, audiences, and platforms while maintaining a unified brand experience. Balancing creative flexibility with consistency pushed me to think critically about hierarchy, accessibility, and how design choices impact the story being told.
COLLABORATION SHARPENS CLARITY
Working closely with marketing, product, and content teams taught me how clear communication early on saves time and leads to stronger creative decisions.ADAPTABILITY IS ESSENTIAL
Working closely with marketing, product, and content teams taught me how clear communication early on saves time and leads to stronger creative decisions.CONSISTENCY CREATES TRUST
Moving between HubSpot and WordPress systems required adjusting both design and technical approaches to fit each project’s structure without compromising quality.
These experiences deepened my understanding of how structure, clarity, and collaboration shape meaningful design. Each project refined how I approach complex problems and balance creativity with practicality. I came away with a stronger sense of confidence in my process and a clearer perspective on how thoughtful design can connect people with ideas that matter.
POSITION OVERVIEW
I was a graphic designer on a team of four where my daily duties span from Illustration to print collateral creation, from designing and coding websites to designing and testing marketing emails, and just about everything in between.
Each person on my team brings a great wealth of knowledge and experience. As a mid-level to senior designer, my skills and experience are utilized daily. As a very collaborative team, we come together on the work we do. Generally in this team environment, we all get the opportunity to work on a great variety of different projects and there is a lot of communication involved at every step of the project. Though we all have our strengths. I specifically enjoy designing/coding on the web and take great joy in making webpages and landing pages come to life.
FUN FACTS
I joined Vernier after a couple years as a full-time freelancer. This company has given me opportunity to grow my skills and even branch into UX/UI. I've been able to take courses in product design and UX/UI to widen my skillset.
I have also been allowed immense creative freedom, looked upon as the web design and email design expert, and work collaboratively with my team to create impactful and beautiful pieces.
THE FINE DETAILS
TIMELINE: Hired as an in-house designer in 2019
ROLE: Graphic Designer, Web Designer, UX/UI designer
SCOPE: Print Design, Webpage + Website Creation, UX/UI Design, Page layout
TOOLS: Adobe Illustrator, Adobe Photoshop, Adobe InDesign, Prototyping, Wordpress
ASSETS: InDesign Files, Illustration, Wordpress Pages & Design, PNGs
BROCHURES, FLYERS, + POSTCARDS
2024 New Product Brochures, K–12 and College
2025 KidWind Flyer
2024 Engineering Flyer
2024 GLOBE Flyer
POSTERS + ILLUSTRATIONS
Dr. Elaine Nam Chemistry Laboratory Sign
STEM Integration to Support 21st Century Skills — Infographic & Downloadable poster
CATALOG
LAB BOOK COVERS
WEBSITE, LANDING PAGES, + UX/UI
WORDPRESS PAGES + HEADERS
WEBSITE, LANDING PAGES, + UX/UI
HUBSPOT | LANDING PAGES
DIGITAL
ADVERTISING
DIGITAL
SOCIAL MEDIA
BRANDING + OTHER PROJECTS
WELLNESS CHALLENGE LOGOS
WELLNESS IS IN OUR DNA
Every year, the Health & Wellness Committee plans and organizes the Summer Wellness Challenge. This challenge is to get employees moving and tracking not only their steps, but other fun activities during an 8-week period. Each year a charity (or two) is also selected and the steps are calculated into donations.
For the past four or so years, I have been tasked with creating an engaging and fun logo/brand for the website where employees enter in their steps and track their exercise. Each year I use the overall theme to create these logos. It's a really fun project and I love participating. It is also an opportunity for me to stretch some design muscle (which includes some branding practice.)
2021 Logo
2021 Main Logo
2021 Banner Logo
2021 Web Favicon
2022 Logo
2022 Main Logo
2022 Banner Logo
2022 Web Favicon
2023 Logo
2023 Main Logo
2023 Banner Logo
2023 Web Favicon
2024 Logo
2024 Main Logo
2024 Banner Logo
2024 Web Favicon
CREDITS
Employer: Vernier Science Education
Graphic Designer: Meghan Lewis
©Vernier Science Education | www.vernier.com