Tortoise Club Gardens

Project Overview
This project is an editorial style portfolio website conceived mostly as a visual experience while informing prospective clients through text and images about Tortoise Club Garden’s landscape design services. Clean visuals set the tone aiming to create a lasting impression that will inspire users to contact Tortoise Club Gardens to learn more about their services. Mack Kearns of Tortoise Club Gardens contacted me to design a website that resonates with his style while also welcoming prospective clients.
View Prototype
Task: Creating a responsive site
Role: UX/UI Designer / Photographer
Duration: Ongoing
Tools: Adobe XD, Sketch
Challenge
Mack Kearns of Tortoise Club Gardens receives clients through word of mouth referrals yet he would like clients that align with his whimsical aesthetic. Through secondary and primary research, I am challenged to uncover insights regarding landscape design services in Austin, Texas and to implement those insights to create a responsive prototype. The end result is a website that will attract Tortoise Club Gardens target client.
1. Research
2. Ideate
3. Design
4. Protoype
Process
Research
I spent some time comparing websites of landscape designers in Austin. I found that all landscape design websites contained images, a contact page and testimonial section.

Throughout the research phase which included primary and secondary research methods, I inquired, how can we design a website that includes these elements in a way that reaches more users?
Competitive Analysis
I conducted a competitive analysis to understand the landscape design market in Austin and uncover any design components necessary for an efficient responsive design website.
Findings
1. Images and testimonials are the primary features landscape design websites use to advertise their services

2. Landscape design websites in Austin lack updated UX/UI functionality as websites are not heavily relied upon to book jobs.

3. Austin’s Landscape design industry is widely diverse with varying specializations including and not limited to commercial, residential, and a holistic approach
User Interviews
I spoke with four individuals who at some point in the past, present or future plan to use a landscape designer for their home. I wanted to discover their motivations for hiring a landscape designer, positive and negative experiences, as well as any personal stories that would enrich my data. Participants mentioned reliability, communication and a portfolio as important factors that set landscape designers a part.
“I chose a landscape designer for my family ranch house based on his achievements. He won an award by reinvigorating the downtown of my hometown in South Texas. His services were expensive, but he knew a lot about the unique plants that would thrive in the desert conditions in that area.”
Persona Development
I compiled and synthesized the competitive analysis and interview data to formulate two personas who highlight the user’s main goals of wanting efficient and concise information regarding landscape design services. These two personas represent two main population sets in the growing metropolis of Austin; the young professional and head of a family household.

Meet Ivan
Ivan is a young professional who moved to Austin in the last five years. He recently purchased his first home in Austin and seeks help with landscape design as a way to pursue a new hobby of learning to care for native plants in the area while becoming engaged in the community.
Meet Jennifer
Jennifer is a stay at home mom who prioritizes her community and family. She views the exterior of her home as an extension of her home, a place for her children and guests to enjoy.
Interaction Design
Synthesizing the research and creating a product feature roadmap helped create a foundation for the information architecture of the website. With the aid of vivid research from users who have used landscape designers in the past, I began to see with rich context, what is most needed for this portfolio.

After identifying user needs, I made a list to define the hierarchy of features will be on Tortoise Club Gardens site. From my research, I uncovered that users want to be able to find what they are looking for quickly, especially if they are short on time. However, it would be helpful, according to interview participants, to be able to see a project from beginning to end so users can learn a landscape designer’s process.
How can we organize information in such a way that users can look through and read through description of services efficiently without limiting the amount of content?
Sketches
Before designing wireframes in Adobe XD, I roughly sketched out the pages to determine how the pages would interact with each other.
Wireframes
After drawing some rough sketches, I designed low fidelity wireframes in Adobe XD that allows users to filter content on the Work pages. The wireframes indicate that this site will primarily be image driven with the opportunity for users to delve further into each project.
Look and Feel
One of the reasons I chose this project aside from the honor of helping a friend is that I would be able to determine the colors, typography, and imagery for the website. In my work as a photographer, I constantly hone my craft by paying attention to color, structure, and spacial organization.I knew the UI component would be a crucial part of this website. I chose natural colors for the background and vivid, earthy images as well to give off the feel of a modern yet nature focused visual tone.
Design
After several iterations from the wireframe stage and consulting with Mack, I finalized the high fidelity design. These responsive pages are for desktop, tablet and mobile devices.
UI Kit
The UI kit details typefaces, colors, iconography that will be used for Tortoise Club Gardens branding.
Prototype
I created a prototype for desktop, tablet and mobile and asked friends, family, and fellow designers for feedback to evaluate the usability of the product. Each of three participants gave excellent feedback to inform the design. While conducting user testing, the topic of accessibility arose in the discussions. Issues such as small font size that affected readability and font contrast. Also, cognitive overload in case studies is something that I need to be aware of when designing future iterations.

Click the links below to scroll through the prototypes.
DesktopTabletMobile
Next Steps
For my next steps I will build, design, test and iterate to continuously improve the product to meet the user’s needs. This was a fun project that will allow me real world experience of creating a website for a client. We will continue to add to the website (with updated photos and text) and iterating the design as the needs and demands change from both business owner and users.