myNature
Responsive Website
Case Study
01
Project Overview
This project stems out of a real business idea I had for a sustainable landscaping service that sold native plants to benefit the local ecosystem and help offset climate change. When my idea aligned with a prompt for my Google UX certificate, I jumped right in to develop the idea further.
Most yards are filled with non-native plants and grasses that require fertilization and irrigation. These inputs can be problematic in areas under drought or if they runoff into sensitive watersheds. Not to mention the time, energy (fuel and manpower), and noise of maintaining large stretches of lawn and their impact on neighbors, home enjoyment, and climate impacts.
If homeowners converted a third to half of their yards to. native plantings, it would benefit local flora and fauna by restoring native habitat, would require less inputs to cultivate, and would allow more enjoyment. This business/website would be the bridge of taking those great scientific facts and making them achievable for the average homeowner.
Problem Statement
Most garden supply centers focus on exotic plants that do not benefit the local ecosystem and are not adapted to the environment. Plants are sold as ornaments rather than part of a lifestyle or a way for homeowners to offset climate change.
The Goal
Create a responsive website for a sustainable landscape company that features plants local to the customer and geared toward lifestyle uses rather than an ornamental function to increase user enjoyment and help benefit the local ecosystem and world climate.
The Team
This project was completed as part of the Google UX certificate. I had access to fellow students and Coursera staff to ask questions, if needed.
My Role
I was the sole UX and graphic designer, handling user research, interviews, ideating, wireframing, and prototyping.
02
Understanding the User
To begin understanding who might visit the website how to meet their needs, I undertook user interviews. From these, I created an affinity map and distilled insights and themes. These results helped me create user personas with problem statements to solve. Finally, I created user journey maps to find additional pain points that could be solved for users.
User Interviews
Six users were interviewed one on one about their use of the garden, how they viewed nature, if creating a positive impact on climate change or offsetting human impacts on nature were important. Pain points as well as a variety of uses were discovered.
From this, a set of four personas were created outlining major types of users and the different types of gardens they were looking for.
Pain Points
Local plant centers do not have native plants
To offset human impact on the environment, native plants are important. However, most centers & online stores offer typical exotic plants without local variety. The landscape store will need to locate native plant resources.
Lack of plant organization
Most of the local stores do not have mixes specifically created to cover blooming times or pollinators attracted. Some online resources are available but are often high end or don’t list sources of plants. This landscape center should solve these two problems.
Online centers ship sick or weak plants
Disreputable sales centers will ship plants that have diseases or pests that can spread to other plants or are poorly grown and weak. Listed garden suppliers need to have a vetting process for inclusion.
Lack of plant variety
The users interviewed had numerous reasons they wanted a garden which involved specific, different uses. Many local stores didn’t understand their needs. The website needs to address many uses with a variety of plans.
Personas
Based on user interviews and pain points, I created four personas to guide the app development.
User Journey Map
I created user journey maps to look for additional improvement opportunities for my two personas that the user interviews had not revealed.
Competitor Audit
As part of the research phase, I completed a competitor audit to see the online options for users who would like to purchase garden plans or plants and areas for improvement.
03
Low Fidelity Wireframes
With the user research completed, I began ideating with several brain storming exercises, developed paper wireframes before moving to wireframes in Figma, and then running a Usability Study on the low-fidelity prototype.
Ideating
To begin to get ideas for how a garden website could cater to lifestyle gardens, I brainstormed how to solve Timothy’s problem of wanting a garden for young children to learn to love the outdoors.
I’m always a little resistant to jump into Crazy8s for some reason, but every time I do, I’m always surprised at the ideas that emerge. From this panel of 8 off-the-wall ideas of making a fun garden space for young children, I realized that themed gardens with specific features like treehouses or play areas could be created and pre-packaged for easy shopping, or components could be sold individually.
How to organize the website evolved in that moment.
Information Architecture
With an idea of how to organize the website, I took a look at its architecture to get an idea of how many screens the website would have before I began developing the wireframes
Paper Wireframes
With the website architecture mapped out, I began working on the design with some ideation of the landing page.
Paper designing continued to extending the idea for the homepage into how it would look on a tablet, phone, and the phone in horizontal mode.
Adobe XD Low Fidelity Wireframes
With the brainstorming on layout complete, I refined the design by creating it in Adobe XD to learn more about it as a UX tool.
Already the idea to utilize hexagons within the website as a nature theme began to emerge. Overall, the landing page is simple and design to welcome the visitor with useful information and stunning designs that they can decide to follow deeper into the website.
With a desktop landing page complete, I created a low fidelity version for mobile users.
Low Fidelity Prototype
The website is design to make lifestyle centered garden planning easy, using as many native plants and environmentally sourced products as possible. The architecture is kept purposefully simple so that the website doesn’t become confusing or overwhelming.
Try out the Adobe XD Low Fidelity Prototype
04
User Testing
With a low fidelity prototype ready to go, I undertook usability testing, starting with creating a test plan and questions, running the usability test, creating an affinity map, and ranking improvements before beginning iteration development.
Usability Study Details
Research Questions
- How long does it take for a user to navigate to designs
- Is it difficult to add items to the cart
- Is the design confusing or easy to navigate?
- Are there additional options or information the user would like to know?
Participants
5 participants
3 women and 2 men in a range of ages from 24 to 70 who have an interest in gardening, spending time in their yard, or protecting the environment (and are also a homeowner)
Methodology
20-30 minutes
USA, remote
Unmoderated usability study
Users were asked to perform tasks in a low-fidelity prototype
Affinity Map
I organized the feedback and reactions from the usability study into an affinity map before creating insights and themes.
Usability Study Themes
Theme 1
3 out of 5 participants thought navigation would be easier with a link to the Shop in the main menu.
“I thought there might be a “shop” option on the menu but there is just designs, which is were I am.”
Before
After
Theme 2
3 out of 5 participants found that adding an item from the shopping area should have taken them to an add-to-cart option and not a design page.
“I thought clicking on an item from the shop area would take me to an ‘add to cart’ screen and not a big page on design. That felt confusing.”
Before
After
Theme 3
2 out of 5 participants clicked images rather than buttons to move to the next phase and were surprised when it didn’t work.
“I’m surprised clicking on the image didn’t work like on the homescreen, but the button did work.”
Before
After
05
High Fidelity Design
With the usability testing complete on the low fideling prototype, I went to work updating the wireframes to high fidelity, making changes recommended by users as I went. Though, to start, a brand guide including colors, fonts, graphics, and a logo needed to be created.
Brand Guide
I wanted the website to have an earthy and natural feel, so a palette of browns, greens, and honey gold was an easy starting point. However, I needed some accent colors. For these, I found inspiration from flowers.
Colors
Fonts
One of my favorite things about designing with Adobe XD is that it syncs with my custom font library. Figma has a lot of choices, but I already have my favorites and some very special additions in my Adobe account. To create a luxurious while simple header, I used Romelio Sans for headers. For body text and buttons, I used Helvetica Neue.
Graphics
I picked the name myNature as I wanted it to reflect the personalized outdoor space for each user. Plus, the “my” is also about taking control, such as choosing to use environmentally sustainable plants and locally made elements.
As a starting point, I decided to create 5 types of gardens to fit the hopes of the personas: a children’s garden, a wonder garden, a foodie garden, an entertainment garden, and a meditation garden.
High Fidelity Wireframes
Responsive designs of landing page
High Fidelity Prototype
Animation of the myNature prototype
Clickable Adobe XD prototype
06
Lessons Learned
Working on this project really made me appreciate my business idea was possible, but would also require a lot of customization and research. Being able to have lookup tables to find native plants to different regions, distributers, artisans… there is a lot to making a national website on garden design! But if I selected just a region to get started, it could be done. Though, specialized coding to be able to make interactive garden maps the user could create like iScape would be nifty… but way beyond simple UX work. I think adding a “book a consultant” option would work instead, allowing users to “hire” a professional designer via the website. Existing garden space could be ground truthed from landowner photos or drone flights from local operators.
For the UX design, I absolutely love how the project came out. The website design was called “refreshing” by one peer reviewer. It creates a more in-depth and organic experience for the user while thinking about gardens in holistic terms, including their role in the environment, habitat fragmentation, and benefits to local wildlife.
Working in Adobe XD instead of Figma was a unique learning opportunity as well. There are a few things XD does differently that are really fantastic, like its clone columns/rows tool or inputing a lot of text in similar blocks with spreadsheets.
The user feedback was very helpful and encouraging. I had some feedback that I found really helpful on the checkout. My first iteration moved people to checkout quickly, but users mentioned they’d rather see each step and take a little longer, but be sure of what they were buying.
From here, the high fidelity design could be user tested and then moved to development. If I wanted to start a new business… 🤔