Over 15 weeks, we helped Mansfield Gardens—a charming, family-owned business known for its all-natural, pesticide-free plants—grow beyond its physical roots and bloom online. The goal? To increase in-store visits by showing customers not just  how to get there but why they should come. As millennials (ages 26–35, $65k–$95k income) increasingly became plant parents and businesses returned to the office, Mansfield Gardens wanted to capture this fresh audience with a modern, mobile-friendly website. The company also set its sights on the commercial sector, offering landscape design and in-office plant care services to meet the growing desire for greener workplaces.We saw an opportunity to target users like David, a busy data analyst who loves the idea of plants brightening his workspace but lacks the time (and know-how) for plant care. And Hani, an office manager with an eye for detail, balancing her roles as a community leader and small business owner, who wanted her office’s outdoor spaces to reflect professionalism and care. The redesign focused on replanting the website’s information architecture for intuitive navigation, cultivating a content strategy rich in plant care education, and pruning the design for mobile responsiveness. The result? A seamless digital experience that mirrors the warmth and authenticity of Mansfield Gardens’ physical store—inviting users to browse, learn, and ultimately visit. As we helped Mansfield Gardens bloom online just as beautifully as it does in person, this project taught me that designing for the web is as much about empathy as it is about pixels and code.

‍

Research

User Understanding

The target audience included individuals and businesses, with a specific focus on millennials. The redesigned website aimed to capitalize on the returning trend to in-person work, offering indoor plants for individuals and landscaping services and in-office plant care for businesses.

‍

We conducted a business-centered competitive analysis to understand the broader market landscape, identify industry standards, and pinpoint areas where Mansfield Gardens could differentiate itself. This analysis was conducted using data from direct and indirect competitors’ websites.

Mansfield Gardens faces competition from local plant sellers and larger retailers, but distinguishes itself by offering all-natural, pesticide-free products and prioritizing customer education and personalized experiences.

For Hani, local plant sellers may not provide comprehensive landscaping services that align with corporate aesthetics. For users like David, indirect competitors like Walmart and Home Depot offer convenience, but lack the specialized education on plant care he needs. To stay competitive, the focus should be on enhancing online visibility of products and services, emphasizing their unique selling points, and engaging with the community.

‍

Before jumping into design, we needed to understand the soil we were planting, so we conducted a SWOT analysis to determine market positioning, and to define the problem.

Mansfield Gardens' strengths lie in its trustworthiness, sustainability commitment, and unique product offerings, while challenges include limited online presence and decreased store visits. Threats from local and national competitors offering greater scale and convenience, so opportunities involve targeting millennials like David and Hani by emphasizing transparency and expertise.

‍

Preliminary Site Analysis

We conducted a preliminary site analysis to evaluate the website's current structure, usability, and content effectiveness. This analysis helped us identify key usability issues, empathize with the users, and determine how well the existing site supported Mansfield Gardens' business goals.

Navigation Complexity

There was a hierarchy mismatch in the navigation, with the six menu options being Home, About, Plants and Products, Contact, Specials, and Valentines Day. Users like David, who have limited time, would find the content layout within the pages also overwhelming, with a single, excessively long page for all plants, products, and services.

‍

Arbitrary Content Placement

The website arrangement lacked logical coherence and did not align with user expectations. For example, the products page began with a form to request a quote for landscaping services, unnecessarily disrupting the user flow. Hani, seeking specific services, would struggle to find them where she would expect them to be.

‍

Lack of Information

The website had images of only the plants they carry and not any other products. and most of the images were missing product names as well as descriptions. The images were also slow to load and had no alternative image descriptions, causing accessibility issues.

‍

Client Goals

"We want to showcase our plants but not keep track of inventory.  We do not want a full e-commerce page. That’s not who we are. We want our customers to come in so they can see how dedicated we are to our craft. Plant buying is an emotional process, and we hope to provide each customer with a tailored experience."

and asked ourselves:

Ideation

Information Architecture

We started by gutting the entire website, and reimagining the whole information architecture to cater to user like Hani and David. We created a sitemap that would dedicate a page to all potential categories and subcategories within the website, organized in the most logical hierarchy.

‍

The goal was to reduce cognitive load, so we followed Miller’s law by chunking information into manageable group. The navigation bar was streamlined to include 7 main menu options: plants, products, services, special occasions, loyalty program, about us, and contact. We made subcategories for each main category and individual pages for each subcategory.

‍

We planned for simple and singular call to action, following Hick’s Law. We also aimed to use familiar UI elements like cards, banners and forms similar to those used on competitor websites such as homedepot.com, as suggested by Fitt’s Law. Additionally, Law of Proximity guided us to group like elements and concepts together, from subcategories to footer contents.

‍

Wireframes

We designed our wireframes to align seamlessly with their HTML implementation. Here are the key components that are consistently used across multiple webpages:

• Purpose: enable users to easily explore plant categories such as Flowers and Indoor Plants without feeling overwhelmed.

• Responsive Design: Three previews per row on desktop and tablet; one per row on mobile.

• Client Alignment: Sparks user curiosity and encouraging in-store visits by showcasing product variety without requiring inventory tracking.

• Purpose: Present essential product details—name, image, and care information—in one cohesive space.
• Responsive Design: Three vertically oriented cards per row for desktop/tablet. One horizontally oriented card per row for mobile.
• Client Alignment: Provides comprehensive details in one place to empower busy users like David to make informed decisions and reinforce Mansfield Gardens’ commitment to community education.

• Purpose: Highlight in-store and commercial services in serval different places on the site and provide alternative paths to service pages.
• Responsive Design: Horizontally oriented on desktop/tabletVertically oriented on mobile.
• Client Alignment: Boosts service visibility for businesses professionals like Hani, fostering trust and encouraging commercial partnerships for Mansfield Gardens.

• Purpose: Make contact information always accessible on every page.
• Responsive Design: Horizontally aligned content on desktop/tablet vertically stacked content on mobile.
• Client Alignment: Simplifies communication, encourages store visits.

‍

Content Strategy

The content strategy will focus on promoting community engagement and  boosting online visibility in alignment with client goals and user pain points. Mansfield garden will extend their community engagement online by providing forms to promote free consultations and evaluations, and the loyalty program. By showcasing popular selections—Indoor Plants and Plants for Special Occasions—on the homepage for one-click access, the new site will spark curiosity and drives in-store visits, aligning with the brand’s belief that plant buying is an emotional, hands-on experience.

The website will now feature well-organized pages with detailed educational descriptions for each product and service, which will enhance online visibility and SEO. Accessibility will be a core component of the design, with alternative image descriptions, ideal color contrast, and keyboard-navigable forms and buttons.

The website will communicate with transparency and honesty, reflecting Mansfield Gardens’ identity as a family-owned business committed to sustainability and all-natural, environmentally friendly products. Ultimately, the redesigned website will deliver a seamless digital experience that mirrors the warmth and authenticity of Mansfield Gardens' physical store—engaging users, promoting education, and building lasting connections.

‍

Design Process

New Design System

Design isn’t just about aesthetics—it’s about feeling. Mansfield Gardens needed a visual identity that echoed its values. While our primary focus was on navigation and information architecture, we acknowledged the crucial role of visual design in shaping a compelling user experience. To complement our efforts and align with the brand's identity, we proposed a new design system.

‍

‍‍

• Color Palette: Colors were chosen for both aesthetics and accessibility, ensuring sufficient contrast for readability. Dark Slate Gray (#266150),  Antique White #FEEEDD). Dark Spring Green (#127E3F) from the logo, and Dandelion (#FFDF6C) for accents, were introduced to evoke the lush and vibrant nature of a plant nursery. We also used Dark Lava (#483C32) as a nod to the old website. The design aimed to maintain Mansfield Gardens' charm and authenticity.

• ‍Typography: We selected Raleway for body text and Georgia for headings for readability and cross-browser compatibility as well as aesthetics.

• ‍Layout: For the layout, we prioritized consistency across UI elements to build familiarity and added ample white space for a clean and uncluttered design.I nudged the team towards a Bento UI Approach, which uses square and rectangular frames with rounded corners and is one of my favorite ways to compartmentalize contents.

‍

UI Components

As we transitioned from design to development, we faced the typical challenges—code responsiveness, backend considerations, and accessibility. So, the iterations we did were mostly code related. We changed the code to make it responsive to the screen size using media query, and that also was a lot of trian and error. The component above reflect what the design look like for various screen sizes. You can view the full code iteraions on github. Yet, all the challenges made the final product stronger. By thinking like designers and building like engineers, we ensured the website worked as beautifully as it looked.

‍

Solution

Final Information Architecture

In the ideation stage, we proposed a more comprehensive site map with many pages for the various sub categories of plants. However, we saw that as staying further away from our initial goal of simplifying wayfinding for the user. Therefore, we decided to further simplify the sitemap into this.

Learning from successful competitors, Mansfield Gardens will also feature their two most popular selections, the indoor plants and plants for special occasions, on the home page for one click access. it is simple and easy to use, especially for people with low to medium technology competency like Hani.

‍

Outcome

‍

Improved Navigation

The redesigned website features seven clear menu options, adhering to the 5 ± 2 rule for navigation menus to reduce cognitive load. Breadcrumbs have been integrated, allowing users to understand exactly where they are on the site and how to return to previous sections. Users can now explore key sections—Plants, Products, Services, Special Occasions, Loyalty Program, About Us, and Contact—with ease and clarity. Navigating the website feels as intuitive as walking through the physical store itself.

‍

Strategic Content Placement

The new website strategically places the focus on Mansfield Gardens' unique offerings, expertise, and educational content. Elements, such as key forms, namely the free service estimate form on the Landscaping Services page, are now placed where users like Hani would naturally expect them, following the Gestalt principle of proximity for linked concepts. Visitors can effortlessly discover Mansfield Gardens’ value proposition, differentiating it in a competitive market. For professionals seeking meaningful business relationships, such as Hani, the site’s organization encourages trust and engagement.

‍

Detailed Product Information

Every product page now includes comprehensive details, alternative image descriptions for accessibility, and a clean, uncluttered layout. Users can make well-informed purchasing decisions, fostering a more engaging and trustworthy shopping experience without the need for e-commerce functionality.

‍

Emphasized Differentiation

Further adhering to Miller’s law, information is organized into manageable groups. Products are divided into small subcategories within each main category, so as not to overwhelm the user with too many options at once. Potential customers are better informed about Mansfield Gardens’ unique product offerings, their values, and story, which is what sets them apart from competing plant retailers.

‍

Mobile-First Design

Recognizing millennials (like David)’s preference for mobile browsing, the website has been optimized using a mobile-first design strategy. The Bento UI approach organizes content into square and rectangular frames with rounded corners, ensuring a clean and intuitive browsing experience. Following Fitts’ Law, buttons are sized and centrally placed for easy selection on all devices. The website delivers a seamless, enjoyable experience across devices. Mobile-optimization ensures that David can browse effortlessly during breaks, while Hani can access the site on the go.

‍

The redesigned website achieved a more organized and user-friendly structure, showcasing Mansfield Gardens' products and services effectively. The emphasis on transparency, sustainability, and personalized experiences aligned with millennial values.

‍

Conclusion

Transforming the information architecture (IA) felt like performing bone surgery—but more complicated (kidding!). We completely overhauled the website, prioritizing the needs of personas like David and Hani. The website now features a more organized, user-friendly structure that effectively showcases Mansfield Gardens' products and services.  With a strong emphasis on the company's values of transparency, sustainability, and personalized experiences, the redesigned website now serves as a powerful tool for attracting and retaining customers.

‍

If I Could Do It Again:

Because this was a rebuild-focused project with a short timeline, we moved straight from wireframes to building. If I could've taken a different approach to the design process, I would have included interactive prototypes to test user flows and gather feedback before development.

Due to time constraints, we couldn’t engage with users during the design process. If I could do It again, I would engage users early and often by conducting validation tests and feedback sessions during the design phase. That would ensure that our design decisions are holistic- user-centered and aligned with business goals.

As with most industry projects, there wasn’t enough time for comprehensive research. If I could do it differently, I would dedicate more time to research before starting. This would ensure the problem statement is accurate and help me better define the target audience, which in turn would allow me to create tailored experiences for both individual customers and businesses.

‍

What I Learned:

Interdisciplinary Knowledge Integration:


As the only team member with a cognitive science background, I encouraged the team to leverage science-based UI/UX principles. Personally, this project  taught me how to integrate diverse areas of expertise, including psychology, coding skills, and art and design knowledge to contribute a holistic perspective to the design process.

UI ≠ UX:


This project may not have the flashiest UI, but that is precisely why it highlights the crucial distinction between UI and UX. A beautiful interface means little if users cannot navigate the site intuitively or accomplish their goals seamlessly. In this project, we focused on transforming the UX, knowing that a well-designed experience leads to meaningful engagement, customer retention, and ultimately, business success.

Speaking the Language of Developers:

In this project, we had to think like designers and build like engineers. During the design phase, we considered not only the user interface but also backend feasibility. While coding in the backend, we simultaneously thought about what it would mean for accessibility on the frontend. With each code iteration, we ensured our design concepts aligned with technical constraints to create practical and implementable solutions. Today, with tools like Figma Dev Mode, designers don't have to think as deeply about development implications. However, learning the hard skills and understanding a developer's perspective is something I’ll always carry with me. This ability to bridge design and development is what I believe will always set me apart as a designer.

Managing Business Needs:


I learned that balancing stakeholder sentiments with technical requirements is essential for delivering a successful product. Engaging stakeholders throughout the process clarified business goals and expectations, while aligning these with development constraints ensured feasible solutions. Mansfield Gardens' redesign project successfully bridged this gap, and showed me that understanding business needs is just as critical as technical proficiency for creating impactful, user-centered designs.

‍

Future Directions:

To ensure the long-term success of the Mansfield Gardens website, we propose focusing on four key areas:

1. Continued User Research and Testing:

Conduct regular usability testing and feedback sessions to refine user flows and address pain points.Use Kano analyses to prioritize features based on how they impact customer satisfaction.

2. Measure Website Traffic and Activity:

Track key engagement KPIs like retention rate, session duration, and pages per session, focusing on how users interact with the website content.Analyze traffic sources and user journeys to optimize content and encourage physical store visits.

3. Measure Business Impact and User Engagement:

Focus on relevant KPIs such as click-through rates on service inquiry forms and customer satisfaction scores.Monitor business metrics like customer lifetime value (CLV) and revenue per user (RPU) to understand how online engagement translates to in-store purchases and services.

By focusing on user research, performance tracking, meaningful user engagement, and continuous alignment, the Mansfield Gardens website will remain user-centric, adaptive, and impactful without relying on e-commerce functionalities.

‍

Names of study participants have been omitted or changed to protect their anonymity.