A mobile app that provides individuals with an easier and more efficient way of keeping track, planning, budgeting, and finding inspiration for current and future landscaping projects.
Welcome to GreenScape, your all-in-one solution for turning your landscaping dreams into reality! Whether you're a seasoned gardener or a landscaping novice, GreenScape is here to help you budget, track, plan, and get inspired for your next stunning landscape project.
My Role
Sole UX Designer
Tools Used
Figma
Figjam
Miro
Adobe Illustrator
Zoom
Timeline
8+ Weeks
8+ Weeks
The Problem
Landscaping can be both expensive and a challenge for new beginners. Having to use multiple different apps or even wasting paper writing down a budget for projects can become overwhelming. Not to mention not being able to find information that you need for a project can become a hassle as well.
The Solution
GreenScape is an app that is there to help guide homeowners or landscaping enthusiasts throughout their landscaping projects. Whether that’s tracking their project budgets or viewing past budgets to finding inspiration or tips/tricks for their current or future projects. GreenScape has both beginners and experts in mind when helping their users!
Secondary Research
With the research that I’ve gathered, I believe that even though there are great resources out there that help provide tips on how to grow or design landscaping for a yard or even the cost of what a homeowner could put out for landscaping, the majority of the information is the same. This regurgitating information can pose a problem because it doesn’t allow for new information to be seen by a user or reader who may need it for their projects. Knowing the cost of a garden or landscape design, different factors that could affect the plants, and thinking of future needs for the landscaping project to stay beautiful year-round could be difficult for someone new to landscaping and would need further help in keeping track of their projects.
Here are some findings from my research:
The hard truth of what landscaping could cost someone with an average-sized yard either paying per hour, project, square foot, and the type of landscaping they want.
How different regions could affect the growth of some plants and the person needing to know what can/can’t grow in their yards beforehand.
Potentially hiring a landscaping company to either help with designing the layout for the landscaping project or simply doing the future upkeep.
The benefits of increasing the home’s value with landscaping.
The problem that a person thinks they need to have specific items to complete their landscaping project when in reality it’s probably unnecessary.
Primary Research
Using my secondary research to support my primary research, I created and organized a research plan that consisted of user backgrounds, an objective, questions to ask, methodology, participant characteristics, and recruiting methods. The target audience chosen for this were people who have never started a landscaping project before and those who had experience with landscaping.
Using Google Forms to create a survey, I distributed this to friends and family. Two people responded to the survey.
These two respondents agreed to be followed up for a scheduled interview using Calendly. The tools used to conduct the interviews were Zoom and OtterAI. The interviewees were questioned about their pasts with landscaping, if they enjoyed or had an interest in landscaping, and any hardships with completing a landscaping project.
Affinity map research/brainstorming process
Affinity Mapping
With the information I gathered from the primary research interviews, I created an affinity map with the following topics:
✦ Project Budgeting
✦ Landscape Knowledge
✦ Project Purchasing
✦ Project Reasoning
✦ Project Inspiration or Tips
✦ Living Situation
Using this knowledge, I was able to group my findings that correspond with each topic making this easier for me to narrow down what pain points needed to be prioritized.
Empathy Mapping
Using the research listed in the affinity map, I created an empathy map, which allowed me to identify two different users for GreenScape:
✦ Joan the Budgeter
✦ Anthony the Play-it-by-Ear
These two users embodied two different types of users. 1) a user who likes to plan things and 2) a user who likes to go with the flow. This information helped me combine my secondary and primary research and connect the dots between the user's motivations and overall behavior better.
Empathy map for Anthony the play-it-by-ear
Anthony, the play-it-by-ear
Persona
After identifying who the users were for GreenScape, I created two personas:
✦ Joan the Budgeter enjoys structure in her life and personal finances.
✦ Anthony the Play it by Ear enjoys a more mellow approach to life but feels the need to organize himself on specific aspects.
The information from the empathy map helped in creating these personas because now I was able to provide a face to each user. The personas created are to help me gain inspiration to what the design of the application should be and the information that should be within the application as well.
How Might We (HMW)
Based on the information for the personas and the research that was gathered, I created five How Might We (HMWs) questions that I could use to help solve the user's problem.
✦ How might we relieve users' overwhelming feelings when starting a landscaping project?
✦ How might we help make users keeping track of their landscape projects more fun?
✦ How might we create a way to keep track of landscaping budgets?
✦ How might we create tips and tricks for landscaping projects more engaging?
✦ How might we reduce back-and-forth searching for resources?
These questions helped me with creating solutions to possible problems or pain points that a user would have/think about when either starting or completing a landscaping project.
Brainstorming
Ideation was a great way for me to get all of my ideas out at once on paper. Using the crazy 8’s method, I created 8 ideas that focused on providing a solution for my How Might We (HMW) questions. During this stage, I focused on what the users would want the layout to be like and sketched out the ideas within the crazy 8’s time frame.
Crazy 8's sketches
User Stories
Using user stories to empathize with the users of GreenScape, I ranked each user story from high, medium, and low making it easier for me to narrow down which stories were most important.
As Budgeter Joan, I want to keep tabs on my project’s budget so that I can prepare my finances for projects more effectively.
As Play-by-Ear Anthony, I want to plan my projects so that I can know exactly what products to buy.
As Play-by-Ear Anthony, I want to keep track of my past projects so that I can complete my yearly landscape project goals.
As Budgeter Joan, I want to have reminders for the upkeep of my landscaping projects so that I can consistently take care of the work I put into my landscaping.
Sitemapping
After prioritizing what the application should offer the user, I mapped out where each screen and section of the application should be located. This helped me see the layout of the app to ensure that the flow was clear and easy for the user.
User Flows
Based on the information from the sitemap, I created 3 user flows to show a representation of what the function and purpose of the application should be. This allows me to see what these 3 user flows could look like for a user to complete each action. The user flows are as follows:
✦ Update my reminders to track plants that have been watered.
✦ Save an idea for later use.
✦ Increase the project’s budget.
One of the user flow sketches
Sketching
Using sketching as my next method, I was able to work out each screen and put further thought behind the layout for each screen and what was essential to make the flow seem seamless. I tried to empathize with the user and anticipate what they would need.
Wireframing
Creating mid-fidelity wireframes helped me provide a realistic visual representation of the user interfaces and functionality of the 3 user flows. Using Figma to create these wireframes helped me determine how each element should be placed on the screens and how the visual hierarchy looks. Also implementing UI patterns to efficiently design the screens so that the user isn’t overwhelmed with the application and help them learn how to use the application as well.
Brand Mood Board
Using a mood board to set the brand’s vision and tone, the GreenScape company was able to come to life. Expressing to the user that the company is friendly, trustworthy, informative, and inspiring. Providing the feeling of nurturing and growth through the greens and oranges of the color palette and the beautiful photography specifically chosen to inspire creativity for users.
Brand mood board
Brand style guide
Style Guide
Once the mood board was created I knew what the application should feel like. I chose Gilroy as the main font family for the entire application, including the logo. I compiled all the colors from the mood board, making sure to place them into the primary and secondary spots. Choosing the appropriate icons for the application to best represent the brand. And finally creating the buttons that the user would be using throughout their whole experience using the application.
High-Fidelity Wireframing
To create the high-fidelity screens for GreenScape, I used all the research I had previously done and included the brands' overall look and feel in the design concepts. I also looked at examples of other designs that were following best practices and including accessibility in their designs so that I was considering all avenues for my designs. Each screen needed to look realistic by following a grid, using UI styling that created consistency, each design element was proportional, and the screens included real text and the iconography from the style guide.
Prototype
Utilizing Figma, I was able to create a high-fidelity, fully functional prototype. The high-fidelity screens are laid out using the user flows from my research. I created this prototype by linking the screens together to show how the user flows worked as a user-friendly experience. Prototyping was eventually used by real users to see if there were any underlying issues that the users could potentially encounter.
Usability Testing
Before usability testing could begin, I created a research plan that served as an outline for me to use through the testing phase. I then conducted usability testing to discover any possible usability issues that were faced by 5 participants I had recruited. By observing the participants, I was able to identify their main pain points and where they struggled the most within the application. This helped me identify if the designs were functional and if they were user-friendly, efficient, engaging, and free of any errors.
I completed 5 usability tests with 5 different participants. The participants were asked to complete 3 tasks:
✦ Update my reminders to track plants that have been watered.
✦ Save an idea for later use.
✦ Increase the project’s budget.
🔎 Issue #1
3 out of 5 participants could not complete the second task (Save an idea for later use). My recommendation to solve this problem would be to replace the “lessons” section on the home screen with “posts you may like” or label it “inspiration”. As well as adding a search bar to the Home screen to allow users to search throughout the application.
🔎 Issue #2
All 5 users expected to use the reminder button on the Home screen as the main button to edit the reminder. My recommendation to solve this problem would be to create the reminder as a button for the home screen and add an edit button to the reminder itself to change more than just the completion of the reminder.
🔎 Issue #3
All 5 users expected to use the add button on the Track screen for the budget section to add more to the amount of the project’s budget. My recommendation to solve this problem would be to create the ‘add’ button into a workable button on the Track screen to have a better user flow and change the buttons on the project’s budget section of the Track screen to be easier to understand.
Redesign
After learning what I needed to change in order to make the user experience better, I went into Figma and made design changes to solve the problems uncovered from the user testing.
Solution #1
📍Solution #1
When looking to redesign the Home screen, I reflected on what the user would want to see. The user originally had easy access to view the reminders and lessons that the application had, but restricted the user from doing and seeing additional things. A user pain point was having to go through hoops to update their reminder and not being able to search the application or have a curated feed of recommendations for inspirations or lessons. So, I took that feedback and added a search bar at the top of the Home screen, created the reminder as a button and gave it an edit button to make any types of changes to the reminder, and added a ‘posts you may like’ section for curated posts that are reflected from what the user had saved in the past.
📍Solution #2
When looking to redesign the Track screen, I reflected on what the user would want to see. The user pain point for this screen was that they were confused as to why the add button wasn’t usable and they had to jump through hoops to be able to change the amount of the project. So, I took this feedback and changed the look of this section by adding a project name to the top of the layout, changing the color of the amount to black to be easily readable, and changing the buttons to be more recognizable and noticeable for the user.
Solution #2
Solution #3
📍Solution #3
When looking to redesign the Project Budget screen, I reflected on what the user would want to see. The user pain point for this screen was that they were confused as to why there was a ‘suggestions’ section and not being able to see past project budgets for the overall year. So, I took this feedback and removed the ‘suggestions’ section by adding a ‘past project budget’ section with each budget ready to be made into a future button that leads to its own page and making sure to keep the ‘current project budget’ section has the same layout on the Track screen except for removing the ‘view summary’ button.
Reflection
As the sole UX designer for this project, I am proud to see the final look of this project. Through this project, I have gained and expanded my skill set as a UX/UI designer and created an even greater love and appreciation for designing user experiences.
I created a product design that is innovative, inclusive, convenient, resourceful, and informative. I was able to make this possible by being thorough in my research, using my professional and educational knowledge of brand and graphic design, and using any feedback given to me to further evolve my iterations and redesign.
My biggest takeaway from this project was to gather as much research as I possibly can through interviews and credible resources and use the feedback given by peers as a step closer to bettering my designs rather than viewing it as a possible negative thing.
