Background
Gangala Landscaping is a construction focused Landscaping business. Offering patio, lawn maintenance, and masonry services for commercial and residential properties.
ROLES
Interface Design
Experience Design
Wireframing
User Research
Development
Tools
Figma
Webflow
Challenge
• Complicated CJM ( Customer Journey Map).
• Low conversion rate
• Bad site navigation
• Not user focused
‍
Research
The client’s main concern for this site was improving the conversion rate and that the previous site was hard to use. Naturally at first I was lost and overwhelmed by all the possible directions in which I could take the project. To narrow down the scope, I first focused on how to improve the conversion rate and gain more traffic. I conducted a usability testing to understand the market more and their needs. Through the research, I found that most users are looking for masonry, patio, and planting services. When creating the portfolio section, I kept this in mind and is why I highlighted these services.
For the user interface, I found not many designs in this industry have great framing. The sites are mostly static and don’t have many features for the user. When designing the structure and making a pleasant experience, I took inspiration from many tech companies. I chose this inspiration because many landing pages highlight their services and showcase previous work. This works perfectly for this site and it provides what the client wanted to highlight. With the combination of this and the research findings, the design work could begin.
Design Goals
Deliver user-friendly & responsive web design
Our goal was to create a site were the user doesn't need to click on many links to gather all the information they would need. Also to have a portfolio based filter CMS system in which the user could fluidly browser various types of landscape/construction designs.
Process
Brainstorming
Upon reviewing the client’s goals and building a structure to deliver on that, a landing page with minimal navigation to other pages seemed to be the ideal choice. The idea was to provide a have a landing page that works as an information page on common FAQ and services the client provides.
The presentation and pacing were important as I wanted the information to not seem overwhelming or cluttered. This was done through creation of buttons and icons to give visual representation, rather than just rich text.
The decision to add a link for the portfolio section was taken to accommodate clutter and prevent the user being overwhelmed with images. This is why the section is present in the landing page but accompanied by a link to view more pictures at a time.
Development
The biggest challenge the site faced was the portfolio section. The client wanted the portfolio to have a filter system were when clicking a filter button, only particular images of jobs would appear. For example, a button called “Landscape Design” will only show lawn based projects. “Masonry” would show construction based jobs. There was a bit of HTML/CSS required to be able to accomplish a filter CMS system to make that section fluid.
To deliver this, a filter based CMS system was required. This was done through Webflow, the development tool the site was created in. To have the items organize properly, CMS items were needed to be created and with field properties that worked as a dynamic list. For example, a field was created in Webflow called “Job” and there were 3 options, Masonry, Landscape Design, and Planting. Every picture needed to be assigned to be assigned a job. These jobs were used as a dynamic list and from there I applied an embedded HTML code that would populate each given category.
Branding
I chose the color pallet and typography based on the logo and using natural colors that reflect landscape and construction projects.
Typography
Color
Final Design
Review
The site was very rewarding to create. I was able to incorporate development and design skills together to build a beautiful and dynamic site. The porfolio and how information was presented is very fluid. The client was very pleased with the outcome.