This design was finalised after a lot of A/B/n testing to understand what was working and what did not work, and you can check out some of the previously designed landing page screens.
GrowSquares
_upscaled%20(1).png)
Services
Strategy, Concept, Web Design, Marketing
Team
João Prado Kat Machin Will Osborn Javier Squia
Tools
Figma Principle Photoshop After Effects Hot Jar Google Analytics
At a Glance
GrowSquares is a personalized garden that helps you grow fresh food easily. Their technology finds the best plants for your environment and provides you with modular, biodegradable square toppers that include everything your chosen plants need to thrive.
Their app also offers customized watering, harvesting, and troubleshooting tips, so you can cultivate a healthy and fruitful garden.
Team goes to work
This project was both exciting and challenging. Despite facing tight deadlines, limited resources, a small team, and numerous uncertainties, we were able to work together cohesively and achieve our goals.
The biggest obstacle we encountered was effectively communicating a compelling narrative to our users and effectively leading them through the website. However, with perseverance and creativity, we were able to overcome this challenge and develop a seamless and engaging user experience.
Overall, the project was a rewarding experience that taught us valuable lessons about teamwork, problem-solving, and the power of determination in the face of adversity.
Process
At a Glance
GrowSquares is a personalized garden that helps you grow fresh food easily. Their technology finds the best plants for your environment and provides you with modular, biodegradable square toppers that include everything your chosen plants need to thrive.
Their app also offers customized watering, harvesting, and troubleshooting tips, so you can cultivate a healthy and fruitful garden.
Team goes to work
This project was both exciting and challenging. Despite facing tight deadlines, limited resources, a small team, and numerous uncertainties, we were able to work together cohesively and achieve our goals.
The biggest obstacle we encountered was effectively communicating a compelling narrative to our users and effectively leading them through the website. However, with perseverance and creativity, we were able to overcome this challenge and develop a seamless and engaging user experience.
Overall, the project was a rewarding experience that taught us valuable lessons about teamwork, problem-solving, and the power of determination in the face of adversity.
Challenge
How might we collect and use datasets to raise awareness of the negative impacts of social media in Gen Alpha?
Outcome
Unhook is a digital product that monitors user’s social interactions and daily activities to prevent them from getting depressed by using social media.
Discover
We recruited participants to learn about their jobs, health, and behaviors. We used affinity mapping to organize our observations and determine the sources of pain.
Findings
They all had at least two projects on the go. Four of them have worked from home since the first lockdown, and three of them are business owners or freelancers. Five of the eight participants found it difficult to be productive when working from home. We came to the following conclusion based on our research:
1. Struggling to be efficient and effectively control their time.
2. They were having trouble coordinating and planning various tasks.
3. Missing getting other professionals around to network with and collaborate with.
Following their meetings with targeted users, each team member compiled a comprehensive list of issues -
The team collaborated on Miro Board to group problems of similar nature.
Our team assembled a list of possible features to include in the product based on the affinity mapping
We used the MoSCoW approach to narrow the reach of the product and get closer to our MVP
Competitive Analysis
Our competitor research was divided into two categories: communication and productivity. We compared the features and identified the benefits and drawbacks of products like Asana and Monday.com, Zoom, and Discord that solve similar problems.
Our team agreed that our product should improve productivity, digital wellness, and communication in the workspace. These must-have features were then grouped and simplified into three groups.
Product Statement
Workspace streamlines multiple workflows and builds meaningful connections to encourage overall wellness for professionals who work remotely
Product Principles
Persona
We developed two personas, each with their own user journey, to represent the needs and pain points of our target users (They are technologically advanced and eager to learn new skills. Because of the product's concise and thoughtful tone of voice, they should feel accomplished, encouraged, and in charge) that we learned during the user interviews. Each persona focuses on a feature.
Feature 1
She (Sofia) is currently finding it difficult to be productive and is easily distracted when working. Sofia needs a method to better control her time and increase her productivity at work.
Feature 2
He (Kevin) misses being surrounded by other professionals with whom he can network and who will push him to work harder. Kevin needs a way to engage in human interactions in an online environment.
User Testing
We created a low-fidelity prototype based on Sofia and Kevin's requirements and ran usability tests to identify areas for improvement. Here's what we discovered
1. The dashboard seemed to be overworked and attempting to do too much.
2. In the sense of digital wellbeing, the project management tool seemed anticipated, almost unnecessary.
3. The role of "Time Manager" was ambiguous, and the explanation was lengthy.4. Tools break down- users felt oppressed and had no idea what it meant or why.
1. Users wanted to see a Pomodoro timer and an advanced
portion with timer settings that could be customized.
2. The snooze button and the ‘+60/+90 minute' buttons were both confusing. Some users were puzzled as to what the differences were.
1. The user interface felt easy, but participant would like to see more interesting design.
2. The term "workrooms" was a bit misleading.
Final Designs
Homescreen
This screen gives you a quick rundown of what's going on. It includes a calendar, a daily personalized post, easy access buttons, and time trackers. Details may be extended based on the user's preferences. The illustration along with the motivational text adds a humane element to the product.
Dashboard
A dashboard page is hosted by each workspace . This page displays details about the amount of time spent in a specific workspace. This feature allows users to better manage their time and display a report of it, reducing pain points.
Timer Feature (A)
The _workspace; timer feature allows users to set a time limit for their work or supports in the concentrating process. It has three key features: a timer, an app limit, and the ability to start a pomodoro cycle. Users may also change their Slack status to Away, mute email messages, and clock in/out before and after the timer in the advanced settings.
Timer Feature (B)
Allowing users to set an app limit is another function we suggested to combat distractions. Users may choose a method and set a time limit on how long they use it.
Meet Feature
Meet is a function that enables users to form meaningful connections with other professionals in a virtual setting. Users should look for rooms based on their interests and book a meeting space. In addition to an Activity function, we developed a Reaction component that allows participants to communicate and connect more effectively.
Design Guidelines
As a five-person team, everybody must work together, and the work done must be of high quality. As a result, we developed a design checklist to help in improved communication and teamwork during the design process
Research Stats -
In the wake of the pandemic and the lockdown, there has been a drastic increase in the use of social media inducing fear, anxiety, paranoia and the pressure to get attention.
According to an article published by the World Health Organization -
Deaths by suicide in the USA are up 70% in older teenage girls compared with the first decade of the century. In pre-teen girls, suicide has risen by 151 per cent.
New Product Branding
The GrowSquares team recognized the need for a rebrand that would reflect their mission to promote a healthy and fulfilling lifestyle. The new look would embody confidence, simplicity, and vibrancy, with a focus on providing a premium experience.
The new branding, called "Stealth," features a moody and high-end design with soft lighting and shadows. This new design captures everything GrowSquares stands for and brings a breath of fresh air to the gardening space. With the Stealth rebrand, GrowSquares aims to inspire people to embrace gardening as an integral part of their lifestyle.
.jpg)
.jpg)
.jpg)
Revamping the Website
The previous iteration of the GrowSquares website had been built on an outdated bootstrap theme that had undergone numerous modifications over time, resulting in a somewhat cluttered and unpolished user interface. The need to frequently update website pages made it imperative for us to take this opportunity to revamp the website with a more contemporary web stack.
With this in mind, we embarked on rebuilding the website from scratch, leveraging the latest web development technologies and design practices to create a more seamless user experience. Our aim was to create a website that is not only visually appealing but also easy to navigate, making it easier for visitors to find the information they need and engage with the brand.
By using a modern web stack, we were able to build a website that is responsive, fast-loading, and optimized for search engines, ensuring that it provides a consistent and engaging experience across all devices. We believe that the new GrowSquares website reflects our commitment to excellence and will help us better connect with our customers and partners.
Analysis
Instead of using the traditional STEEP (social, technological, economic, environmental, and political) analysis to speculate what the future may be, we swapped economic to educational to examine how each area affects Gen Alpha.
.png)
.png)
Turn on the lights!
Turn off the lights!
%201.jpg)
Multi-generational Personas
Sketches & Early Drafts
Watch user interface -
%201.jpg)
Dopa Pill
We further developed Dopa-pill’s brand identity to envision its existence on the market.
GrowSquares landing Page before the revamp
%201.jpg)
.jpg)
Design System
To maintain consistency and ensure efficient design to dev handover, we developed a modular design system based on reusable components and their states, such as cards, list items, and graphs. Every component can be rearranged and combined with others while maintaining design consistency and recognizable UI patterns for the users.
Landing Page
As we looked in the google analytics data, we realised that the bounce rates are high for the landing page and there could be multiple reasons for it. The aim was to reduce bounce rates and guide the user accurately through one page. A good landing page should be able to answer any initial questions the person might have. It’s important because it drastically improves customer conversion.
The idea behind using pop orange color on call to actions was to direct users attention to it, this call to action button serves as the first step for a user to achieve product conversion. The copy on call to action button is effective and does give the idea as to what they could achieve when clicked.
Once the user passes the hero section, they are introduced with the product and its features, followed by a product gallery that would let the user buy the product. Since, purchasing the product involves following a fun location based analysis, we designed the how it works section in a way that would guide the user through the complete experience from buying a GrowSquare to harvest.
Finally for credibility we added quotes from organizations that believe in the technology
Product Page
The product details page was outdated. We designed a new product details page with multiple features which gave in detail insights about the selected plant. The main screen was designed to hold information like the product picture, description, growscore and the add to cart button.
The second screen is dashboard which gives information about how the plant will grow in the selected location - growscore, growth forecast, factors affecting plant’s GrowScore.
This screen was the most challenging part of the project since, this is the part which makes GrowSquares a smart gardening product, The final screen you see below was a result of multiple iterations that were tried and tested out.
To make our users understand what exactly a GrowScore is, we introduced an interaction, when clicked on it - a pop up is designed to convey the meaning behind the GrowScores.
To get accurate data, a user must go through the analysis. Hence, we designed a pre analysis screen with the aim of directing users to start their analysis. The screen gives novice users a hint of the details that they would be able to unlock post analysis.
Analysis Page
We designed the core experience of GrowSquares - Personalised plant recommendation flow based on your location. To introduce customers to the service, we built an onboarding flow that provides helpful context throughout: teaching as much as it learns. Through an interactive analysis, the flow guided users to the plants that would perform the best in their space.
Once the user finishes analysis, we recommend them with plants that perform the best in their space. However, sometimes there could be a chance that the user might be allergic to one of the plants that has been recommended or might not want that particular plant, to tackle this problem the below interaction was designed and developed.
FAQ Page
One of the most visited pages on the GrowSquare website was the Frequently asked questions page. To make it easier for the users, the page was designed in a manner where the search box given highest priority and icons were used for the sub categories, this was done to enhance the user experience.
Outcome
+45%
Unique Page Views
+65%
Website Traffic
+60%
Website Performance
Conclusion
Within three months of starting the project, we successfully launched the new brand identity and website for GrowSquares. With the new visual identity and customer experience architecture, GrowSquares will be able to expand its reach to other customer bases and scale its operations.
©2021 - Preet Gangrade. Made with Love, Figma, and Webflow.
.jpg)
.jpg)
.png)