Pam Callaghan
Horticulturist
A modern, responsive and engaging website for Pam Callaghan’s gardening business.
Project
Overview
Pam is a horticulturalist based in Anderson Valley who focuses on locally suited plants and prioritizes water conversation and the ecosystem.
Goal
Redesigning Pam’s website to attract local clients and making the browsing experience user friendly.
Challenge
Pam’s clients are very private people, so I was not able to conduct user interviews. I had to design a user centered website without ever actually speaking to the user.
Where to Start?
First things first, I wanted to understand Pam’s business brand, and expectations. This helped me customize my strategies for research, design, and deployment.
My Research Approach
Interview Subject Matter Expert, Pam
I kicked off the research process by interviewing Pam who, after 45 years of experience, is an expert on her clients.
Design Audit
I identified some obvious usability problems of Pam’s original website by conducting a design audit.
Secondary Research
I conducted an in-depth review of Anderson Valley residents who have purchased similar services from Pam’s competitors, by doing that, I was able to gauge the needs and expectations of the customers.
Competitive Analysis
Through my competitive analysis learned how Pam‘s competitors present themselves online, and noted which elements on their websites did and did not work well.
Product Roadmap to Design Plan
By gathering and organizing all the insights I collected, I pinpointed user pain points and strategically identified my design priorities.
Insights to Ideation
Taking the insights I collected, I generated ideas for my design, planned my design process, sketched wireframes, and conducted testing.
I learned that
competitors did a better job telling their story, displaying their work, and their sites were less text heavy.
So I decided to
re-organize the information architecture of Pam’s website to ensure a seamless flow. I added titles to divide large chunks of text and added symbols to allow users to grasp the information at a glance.
I learned that
Pam’s clients are usually elderly people who live in areas with poor cellular service and explore Pam’s website on their own.
So I decided to
increase the text size and select color contrasts that meet the WCAG standard. On top of that, I added an ADA accessibility widget to ensure the site is usable for all visitors.
I also
optimized the size of photos while building the site to allow for faster loading speeds, and included a loading animation which indicates that the page is loading.
I learned that
Pam has a special, integrative, environmental approach as a horticulturist, but the current website’s layout does not highlight this.
So I decided to
redesign the home page entirely to emphasize Pam’s Approach at the very beggining of the landing page, present her services, show off her portfolio, and introduce Pam.
Before
After
I learned that
The mobile site poorly integrated, but 50% of Pam’s clients access the site on their phones.
So I decided to
the website is responsive and properly optimized for all screen sizes. The orientation of the portfolio images is vertical rather than horizontal to accommodate phone screens.
Before
After
I learned that
People in Anderson Valley value professionalism, punctuality, quality, responsiveness, value
So I decided to
include an FAQ on the website to allow Pam to begin building rapport with her clients before the first interaction.
Prototyping
Because I didn’t have experience building the whole product, and there was no one that is more senior than me in the company, I was unsure if the steps I was taking were correct, after talking through with mentor got some validation from him.
Before I kick off the visual design,
I converted the information architecture to wire frames to display how the information was going to be presented on the screen. Visualizing the site allowed me to share my vision with Pam.
After that,
I turned the paper wireframe into a digital wireframe prototype which allowed me to include interactions, and to test the navigation with Pam and other users.
At the same time,
I also created the mood board with photos of Pam’s previous works, as well as a color palette that reflects California’s local plants, and typefaces that reflects Pam’s personality and connection with plants.
Testing and Iterations
To ensure the design is user-centric, I conducted usability tests alongside the wireframing and prototyping process. With two rounds of usability tests I aligned the design with both Pam’s and her clients’ needs.
I observed that
users did not see the “Learn More” button in the portfolio section on the landing page because they were focused on the photos and the text on the left side of the screen.
So I redesigned
the layout for the portfolio section on the landing page that it is less overwhelming which allows users to find the Call to Action buttons.
Before
After
I observed that
combining Pam’s approach- and services sections into one page did not work as expected. Users were confused about which page they were being sent to.
So I redesigned
Pam’s approach to the homepage completely. This allowed visitors to understand Pam’s approach at the first glance and eliminated the confusion.
Before
After
Deploying
Since there was no developer on this project, I deployed Pam’s website myself.
Using Wordpress
Pam’s previous website was built based on WordPress, so she was familiar with the CSM system. During the deployment, I made sure to design a better experience for Pam so she can manage the site easily.
Customized Portfolio
Using a WordPress plugin was not possible for building the easy to use and informational carousel, so I utilized my skill in web development to build the portfolio section from scratch.
One more thing...
In addition to the online experience, I also customized Pam’s letterhead and business card for a consistent experience across her brand offline and online.
Letterhead
The letterhead is an important component of Pam’s brand as she utilizes it every time she interacts with her clients. It highlights Pam’s professionalism. The design is based on the color and theme of the website.
Business Card
I chose an organic, no bleach paper theme as the base. Together with a clean and simple layout this not only reflects Pam’s approach to horticulture but also connects the physical representation of Pam’s work to its digital page.
The Result
“I’m very happy with the Web Site. Folks have given me nice comments about it.” says Pam.
Three Clicks
This design allows users to get to anywhere on the site within three clicks, no matter the starting point.
Fully Responsive
Pam’s clients are now able to browse her website on mobile with fully optimized performance and experience.
And I learned
When the target user is not available, I can interview my client and utilize them as subject matter expert to gain insights about the target user.