Let It Grow
is an e-commerce mobile website that allows people to become
successful first time gardeners in 3 easy steps.
The Problem
The entire world turned upside down due to COVID-19. Throughout quarantine people needed to entertain their minds and be productive while in a stress-free environment. Let It Grow was envisioned with this in mind.
The Solution
We thought about how we could provide a hobby in a stress-free environment for people in quarantine. Let It Grow would provide a digital solution that could allow anyone to purchase a home gardening kit online. As you'll see in the Homepage scroll below, the garden kits range in different sizes and prices to cater to the needs of our customers.
Made in Keynote
A preview of the final look...
Made in Adobe XD and Sketch
The Framework
Following a design process or framework is key to ensuring that the user is kept at the center of the design.
It is a process that has no end. Each product iteration is just a continuation of solving a problem for the user.
Made in Sketch
In our Discovery Phase we learned about the competitive landscape, conducted audits, explored what people were saying through social media, gathered important data from online resources and found inspiration through our desk research.
Competitive Audit + Best In Class
Made in Sketch
Social Listening + Data Analysis
Made in Sketch
Direct Quote from @gardenandhealth via Twitter:
Navigation + Checkout Process Inspiration
Made in Sketch
Discovery Phase Take-a-ways
After reviewing our research, we were were able to put a plan together to define who our potential user would be and how we would go about building our digital solution.
In our Define phase we gathered information from our desk research and put together a persona that would help us understand who we were building our solution for. We also constructed our Site Maps and Flow Charts to help future developers understand how the design should be set up and how the user would maneuver between pages.
Persona
Made in Figma
Site Maps
Low Fidelity Site Map
High Fidelity Site Map
Made in Sketch
Flow Charts
Find a Product Low Fidelity Flow Chart
Made in Miro
Find a Product High Fidelity Flow Chart
Made in Sketch
Define Phase Take-a-ways
Through the Define Phase we were able to figure out what pages would need to be designed, understand where the pages lead to and how Penelope, our persona, would complete a task throughout these pages.
Now that we have established what pages are needed from the previous phase, we are able to begin the Design Phase. In the Design Phase we begin to sketch out our ideas with a sharpie and a piece of paper and eventually transfer the sketches to grayscale wireframes.
Hand Drawn Sketches
Made in Figma
Wireframes
Made in Adobe XD and Sketch
Wireframes Best Practices - Checkout Flow with Annotations
We implemented UX Design Best Practices and Heuristics within our checkout process to guide Penelope though a quick and seamless experience. We want to make sure it is as stress-free as possible.
Made in Adobe XD and Sketch in collaboration with my partner, Valery Vasquez
Design Phase Take-a-ways
In our Design phase, we were able to take a sharpie and a piece of paper to draw out all our ideas and put them into grayscale wireframes. We were able to see that our designs were following best practices and that we could now proceed in testing our designs to make sure we were heading in the right direction.
Testing is the most important phase of the UX Design framework. Testing allows us to make data driven design decisions based on user feedback. It also allows us to understand multiple user pain points within our design.
Homepage Testing and Iteration
Made in Sketch
Final Wireframe Prototypes After Testing
Find a Product Flow
Checkout Process Flow
Menu Open
Moodboards
Moodboards are used to create a look and feel for the design. After testing our wireframes, we begin to explore our moodboard colors, typography, images and buttons to bring our grayscale wireframes to full mockups.
Made in Adobe XD
Mockups
Made in Adobe XD and Figma
Made in Sketch
Test Phase Take-A-Ways
Testing allowed us to move the design from wireframes to mockups based on user feedback. We explored our look and feel on our moodboards and color injected the wireframes to full blown color designs. We tested these mockups and will iterate based on more user feedback.
The Iterate Phase in UX Design Thinking is a continuous process. All iterations of our design were based on themed user feedback insights through multiple rounds of testing.
Made in Adobe XD and Figma
Iterate Phase Take-A-Ways
All iterations to our design were based off of user testing. Each design decision took into account all the feedback to help improve the overall user experience. We have successfully developed a solution to our problem of finding more things to do with our time during quarantine. Penelope's needs and pain points were met and she can now order her kit online and begin her journey in home gardening.
Here is a final look through our Let It Grow Full Flow Mockup...
Made in Adobe XD and Sketch
Final Find a Product Flow
Final Checkout Flow
Full Mockup Prototype
