Gangala Landscaping

Hassle free approach to landscaping
Market ResearchUser SurveyPersonaLow-Fidelity UIHigh-Fidelity UIPrototypeAccessibility Evaluation
Where
New Jersey, USA
What
Mobile responsive website
Why
Get more jobs
Role
Designer, Researcher,
Developer
Category
Client services,
Landscape & Construction
When
April 2023-
June 2023
Why I made this project
When working on projects, there is a lack of understanding between the landscaper’s vision and the client’s understanding of how it will turn out. Clients want to see previous work with similar projects to understand what potential Gangala Landscaping’s services provides and want ideas on what they want.
Market Research
The Claim
The market size of landscape services for the past 10 years has been growing at a rate of roughly 3.2% annually. The US market size in 2023 is projected at $176.5bn.
The Problem
There is a disconnect between landscaper’s vision and what client envision a project will turn out. Clients want to see previous work with similar projects to understand what potential Gangala Landscaping’s services provides.
User Survey
I conducted a quick survey emailing all of Gangala Landscaping’s clients asking which projects they would like done within the next 12 months. I provided a list of all the services that Gangala offers and below are the services that stood out.
What are your home landscape goals for 2023?
53 participants
Landscape Design
43%
Masonry Work
32%
Planting
23%
Other
2%
Notable Comments
I see a bunch of different projects in the portfolio but none for what I want.
Jennifer H.
I really want to get a patio done in my backyard but not sure how it will look.
Karen P.
The site has a lot of information but no samples I am looking for.
Kyle C.
Research Conclusion
There is a growing need for for landscaping services and understanding of how the final outcome of the services will come out through a fast, easy to navigate solution to showcase previous work.
Persona
I created a persona based on the user of the website. The homeowner that is trying to find the best landscaper that aligns with her goals and quality.
Time to start designing!
Once I went through all my research data, it was time to sketch out the initial low-fidelity wireframes and overall structure of the website.
Low-Fidelity Wireframes
I started creating the low-fidelity wireframes to illustrate some ideas for the main page.
High-Fidelity UI Design
Once the initial flow was complete, I started by creating a couple of the main screens of the website, I started by defining the fonts and colors.
Color Pallet
Primary, secondary, accent, tertiary, background.
Font
Mulish
Light, Regular, Bold
AaBbCcDdEeFfGgHh
Organic Look & Feel
The style was achieved by using natural colors to resemble leaves and grass.
High-Fidelity Designs
Two different navigation patterns (hamburger menu and tab bar) were created that could be used for A/B testing.
I also tested different backgrounds. A version with a white background and green overlay and one with two different shades of green to give an organic look & feel.
Prototype
I connected the high fidelity designs into a clickable prototype. That will allow me to test the site on a first group of users.
The live prototype can be found at link
Prototype Validation
I validated my prototype with 3 users. Each were given a subset of the prototype dedicated to the portfolio. I wanted to be sure users understood how to react with the portfolio section while also understanding if the design needing more categories (ex Landscape Design, Planting, ect) in this section.
This was tested in person were I introduced the users to the site and asked them questions. The questions were dedicated to finding out whether the portfolio was easy to navigated and overall impressions.
Study Results
33% of the users (1 out of 3) felt that there were enough categories but couldn’t access all images. They wanted to browse all images, not just specific job types. They all quickly understood how to access the category view via the tabs.
Prototype Update Concept
After reflecting on the study findings, I made a change to the original design to allow users to first view all portfolio images. This was achieved by having them enter this section without a category tab being populated.
Accessibility Check
The site has been checked for contrast to match AA standards and WCAG. There were some changes to improve the contrast.
One specific example I would like to share is background color/submit button in the estimate form. My initial idea was to differentiate the button from the background to contrast. But the choice of background color didn't contrast well and a change needed to be made.
Project Summary
During this project, I managed to evaluate the market, do a user survey, perform usability study, create a set of low fidelity, wireframes, connect them into a prototype and build them out to high fidelity beautiful UI designs. In the last checkup round I also did an extensive QA audit focusing on consistency and color with regards to accessibility.
Looking back at the objectives of the site, it was challenging and took a lot of understanding of the users to be able to put the site together. I needed to know what they were looking for and how it can be put together in an easy and quick way for them to see and find what they were looking for. If I were to continue working on this project, I would want to do more research on other features I could add to the site and perhaps streamline it to the portfolio section to bring in more clients.
Gregorio Gangala
HomeAboutResume