First draft-Carole Gardens site case study

Overview

Summary

Carole Gardens is a rapidly growing gardening business in Philadelphia that needed a way to reach new clients and set up initial consultations. Potential clients, in turn, needed a way to view the process and schedule a consultation on their timeline.

Carole Gardens' primary goals for the site were

User experience and flow
Highlighting the product
Building trust in the process
Conversion rate

To date, Carole Gardens has booked 20+ new clients for year-long, recurring contracts through the site.

Duration

The turnaround time on this project was three months, from research and ideation to delivery.

User research

Summary

User research began by working alongside the business owner and listening to the concerns of her clients, as well as her own, on site. This was made easy as the owner of the business is my wife, but enabled me to create very accurate personas and user journeys.

Personas

Cathy

Cathy is a retired teacher who needs her garden redesigned and maintained because, while she loves to garden, her ability to do so is now limited physically.

Phil & Gwen

Phil & Gwen are a couple of busy working professionals who need the garden at their new home redesigned and maintained because their busy lives allow them little time.

User journey map

Cathy is the primary user of the business. I created a journey map to better empathize with her, understand her goals, and uncover any possible pain points.

Design

Wireframes

Beginning on paper, I worked out an idea to animate one of Carole Gardens' hand-drawn designs, filling it with flowers as the user scrolled through descriptions of the services process.

The design was simplified into a single-page layout as the wireframes progressed.

Digital wireframe for the mobile version of the site.

Sitemap

The sitemap remained my north star throughout the process. As the design progressed, I worked to continuously simplify and drive the user to the main goal of the site; requesting an initial consultation.

Animation

Animated GIF of garden design with colored flowers added to circles

These stop-motion animations of the garden design served as the foundation for the scroll-based animation that become the central feature of the site.

Web design

I needed a tool to realize the design I envisioned. I looked at several options and Webflow seemed like a good choice. After watching a few hours of tutorials, I jumped right in.

This was a steep learning curve, but I learned so much about using flexboxes and CSS once I started to get the hang of it. Realizing the similarities between flexbox and Figma’s auto layout informed my use of both and the whole experience helped a lot when it came time to build my own site using the same program.

I recreated the GIF animations in Aftereffects and started laying out the design in Webflow. All the pieces were there, it was now a matter of building it out and making it work.

Copy for the site

I had been writing and refining the copy for the site throughout the process. The content is undoubtedly the most important part of the site; additionally, replacing the lorem ipsum with actual text was crucial to get the spacing right.

The last major piece to design was the all-important consultation form.

The form

Screenshot of the free consultation form

I interviewed Meg as to what information she needed to have, what would be nice to know, and what the prospective client should be thinking about and expecting when requesting a consultation.

I tried to keep the form brief, the content clear, and the placeholder text informative. All information that wasn’t absolutely necessary was left optional.

Success and error messages were kept friendly and brief to reflect the tone of the site.

Refining the design

Screenshot of the final design in desktop format

With continuity and usability in mind, some design choices were made to accommodate screen sizes and orientations.

On larger screens the animated graphic appears next to the scrolling text.

Smaller screens have the animation placed above the scrolling text to fit the portrait orientation.

Screenshot of final design in tablet format

Screenshot of final design in mobile format

Testing and feedback

At this point in the process, I invited trusted friends, family, and stakeholders to preview the site and solicited their critique. I iterated on feedback from my father (developer with 35+ years of experience), close friend (UX project manager), wife (principal stakeholder), and mother (university copy editor). Their advice was instrumental and very much appreciated, each round brought fresh insights and guided the project toward completion.

See the live site

Accessibility considerations

All colors and contrasts meet WCAG AAA accessibility standards
Clearly defined and labeled hierarchy eases navigation for all users including those using assistive technologies
Descriptive alt text throughout the site

Takeaways

What I learned

I learned so much from this project. From the importance of honest evaluation of your work, continued iteration, and the many steps involved in bringing an idea to completion, to the technical aspects of building a website, adjusting layouts to breakpoints, refinement across screen sizes, page interactions, the list could go on.
‍
Most importantly, this project helped to reinforce a belief I've long held; that there is no such thing as sunk cost. While completely overhauling the design halfway through could have felt like starting over, what I had learned along the way informed the final product in many ways and sped up the later process, ultimately leading to a better, cleaner, more usable website.

Next steps

I will continue to maintain and update the site for the business. The immediate next steps will be:

Work on the SEO to drive more traffic to the business
Solicit feedback from clients and iterate to improve the user's experience
Iterate on the form once we have some data about its usability

Back

Previous project

Next project

Let's connect!

Thank you for reviewing my work on (the previous version of) Carole Gardens' website!

Please contact me if you would like to see more work or just say hi.