Yards To Farms
A personalized design system for a real world service.
Client:
Brandon Garza.
Owner & Founder of Yards To Farms
Yards to Farms is a landscaping company that serves the Austin area. The company has been successful in getting steady lawn care work, and would like to reach more customers that want to build a vegetable garden on their property.
Yards To Farms wanted to expand their online presence from just a facebook page to their own website. They reached out to us to design their web site, and to help them define their online brand, in order to create more relevant leads to their business.
Lead Designer:
Emilio Campos Salazar
My Role:
UX Research
UI Design
Copywriting
Branding
Logo Design
Wireframing
Prototypes
Deliverables
THE SOLUTION
THE PROCESS
DISCOVER
DEFINE
MVP
COMPETITIVE ANALYSIS
SURVEYS
INTERVIEWS
PERSONAS
USER STORIES
USER FLOWS
SITEMAP
WIREFRAMES
DEVELOP
CLIENT SURVEY
COLOR PALETTE
TYPOGRAPHY
LOGO
STYLE GUIDE
USER TESTING
DELIVER
FINAL PROTOTYPE
FUTURE IMPROVEMENTS
DISCOVER
MVP
Minimum Viable Product
In an initial interview we received an definition of the MVP from the client.
​
We also agreed that the job would include a redesign of the current Yard To Farm logo
Website needs
Contact Information
Services provided with visual samples
Reviews
Service Area
Quote Request
Mission Statement
About Page
Competitive Analysis
I conducted a competitive analysis of existing lawn care companies that service the greater Austin area, and have an independent website. The research matrix with the full information is displayed bellow
Austin Landscape Pros
Plantscape Solutions
Longhorn Lawns
Adams Lawn Care
Perfect Lawns & Landworks of Austin
Navigation Bar & Headers
Each site displayed all of the most essential information in the header of the page. Often along side the navigation bar. Four out of five sites display phone number, a way to receive an estimate or a quote. Which are clear calls to action which will create a lead for the business.
Niche Services
Some companies perform certain services, besides mowing trimming and general maintenance. These were displayed on the navigation bar or had their own dedicated page. Like the christmas light instalation or the landscape design.
Surveys
We created a survey which accumulated a total of 51 responses from across the United States. We wanted to know about their home, if they have used landscaping services, and their relationship to said provider, their experience with gardening, and the features they would need for a landscaping website.
​
In order to collect responses from a relevant demographic, we posted the survey in facebook groups that target the central Texas community. We received 21 responses from relevant ZIP codes in the central Texas area.
Screening
From our 51 total responses, we screened 48 relevant users.
Current Service
13 Responses have used a landscape service, in the past. Out of those only 4 responses had an active service provider at the time of the survey. We asked them how they hired their service provider, their criteria for selecting a provider, and about any pain-points they may have with their current service.
6 Responses found their providers through a google search while 5 responses found their provider through analog methods, word of mouth, flyers, or directly hiring a friend.
30% Of responses marked that their service provider does not have a website and 46% of responses marked that they are unaware if there is a website for their provider.
General Interest
Lastly we asked all 48 relevant responses about their general interest in back yard gardening, their comfort level producing their own food, and their interest in adding garden maintenance to their landscape services
30 Users said they feel comfortable to extremely comfortable growing their own food
35 Users said they would be intersted to extremely interested in having their on vegetable garden
39 Users said they would be encouraged to keep a vegetable garden with help
29 Users said they would be interested in adding vegetable garden maintenance to their landscaping services.
Interviews & Personas
To get an in-depth understanding of the qualitative data we reached out to some of our survey takers to interview. We collected data from surveys, interviews, and from the information Yards To Farms gave us about their current customer base to create the following personas.
User stories
We identified that there would be three types of users for the site, New users, Returning users, & Administrator. We created user stories for each of these to ideate what needs they would each have for the website.
Due to time and scope constraints we decided to focus our solutions for this project around the New Users. In future iterations of our site we plan on increasing the scope to focus on solutions for the Administrators, and Returning users.
DEFINE
User Flows
By looking at the design patterns of the competitors websites, reviewing the user stories, and interviewing Brandon, we determined that the main interactions with the website would be for two reasons: To find about about Yards to Farms and their services, and to contact Yards To Farms to request a quote for service.
​
We visualized what those flows would look like from the perspective of a new user and the administrator.
Site Map
Keeping the user flows in mind we sketched out and iterated a site map.
Sketched out ideas for individual pages and then turned them into wireframes.
Wireframes
Sketches
Low Fidelity Phone Wireframe
Low Fidelity Website Wireframe
DEVELOP
Brand Survey
With the wireframes laid out it was time to begin stylizing the Yards to Farms website. Considering that this is a privately owned business, we created a branding workshop to help the client define his vision for the company. You can take the branding survey bellow
Yards To Farms Brand Personality
Elite(1) or Mass Appeal (9)
8 Mass appeal
Luxurious
Fun
Efficient
Bold
Appeals to the urban demographic
Shapes
Hexagon
Fonts
Sans Serif
Colors
Orange
Brown
Green
Images
Mainly photograph based
Typography
We chose three sans serif fonts:
Palanquin Dark
Nunito Sans
ABeeZee
Color Palette
Following Brandon's preferences, along with a gardening theme we selected a palette of greens, earth tones, and an orange-red for highlights. We tested the palette through Adobe Color to ensure it is color blind accessible.
LOGO
Redesigning the YTF logo was our favorite task of this project. The original logo had been created with token tool which has limited capabilities. The design s simple, but not balanced, and it is not very recognizable. It could used some cleaning up.
Sketches
We quickly sketched some ideas and translated one to a digital format
Letters
Once we had the basic layout of the logo we started playing with the size and orientation of the three main letters "YTF"
Shape
We experimented with the design by framing the letters in different shapes, to feel which looks best.
Detail
To balance out the top of the logo we added some detail, silhouettes of grasses and grains, to represent the purpose of the company. We played with the arrangement of the grains.
Color Variants
We experimented with the colors of our original palette and submitted to the client to pick the final logo
Final Logo
Brandon picked out his favorite colored logo, with a soft gradient, and the solid black silhouette.
Style guide
Lastly we had to define a look for the website for mobile browsers and web browsers. We created button variants, headers footers and text boxes.
Mobile High Fidelity Wireframes
Web High Fidelity Wireframes
User Testing
Our user testing focused around MVP requirements ease of navigation, recognition of elements and visibility.
User Test Script
Test Feed Back
Navigation bar:
The nav bar takes me to the page I want to be in, but it does not change states when I change pages, and made me confused as to which page I was on.​
Service card:
Instead of the card linking me to the free estimate page I would like it to give me more information on the service I have selected.
The prices on each card says that the "price varies" I wish that YTF could have solid rates so I can compare with other providers
Gallery:
The Gallery page is unresponsive, it shows me what imagine is an album, but I can't see anything else there.
Free Estimate:
The page labeled "Free Estimate" is titled "Contact us" I feel like there should be a different page for just the contact information
Likes:
I like the color scheme, and how it feels dynamic. I can find the services available in two different places. I like that the contact information is easily available in each page. I really like the colors of the landing page.
DELIVER
You can check out our final prototype here!
Mobile Prototype
Web Prototype
Test Subject
Name:
Korina Tien Kinnard
Age
32
City:
Austin TX
Gardening experience:
Some basic plant care
​
Tasks
Find the services provided by Yards to Farms
Complete
Time: 30 Sec
Find the hours of operation for YTF
Complete
Time: 1:24 Min
Contact YTF
Complete
Time: 45 Sec
Find the area of service that YTF covers.
Complete
Time: 25 Sec
Future Improvements
To get Yards to Farms launch ready we will need to:
Get high quality images for all services available.
Develop better copy and content with Brandon.
Create a narrative for big projects and get more customers to submit reviews and feedback to YTF
Discuss with YTF about the best way to create and advertise garden maintenance service plans.
Create a members portal to grant customers itemized lists of jobs that YTF has done for them in the past, as well as an easy payment tool
Create a working calendar for members
Closing Thoughts
Working on Yards to Farms challenged my perception of what I can accomplish in a short timeline. I have historically struggled to see projects through to completion, and I had to handle my mental narrative to complete this project in time.
Through this project I learned how to master Auto Layout on figma. Designing the YTF logo was a fun task to take on, and having it be well received by the client was a big mile stone for me. I continue to search for the next design challenge
​
Thank you for reading.