Product Design Case Study

giftapot

A specialty, home-grown plant gift shop, focusing on plant care
Challenge
We're all sold out!
When a large business bought out all of giftapot's ready-to-sell potted plants in one order, the owners realized that their business was booming too quick & they needed to do something about it.

Giftapot owner realized they needed to scale to meet their growing demand, that's where I came in.
Context
"anyone can grow"

From our first call, I was wowed at the owner's passion and one-of-a-kind vision.
Selling custom made pots & everything from organic carrots to succulents, this one of a kind artisanal plant gift shop combines the nursery & gift shop experiences into one.
I was so impressed by how giftapot was started with a motivation to give back to the community through home-made food and fresh produce. Speaking to the owners, it was clear that their focus was growing healthy plants, this made them stand out from other shops around the world!
Approach
Understanding Needs
Competitive Analysis
User Surveys
User Interviews
Personas
Information Architecture
Wireframes
Logo Design
Style Guide & Branding
User Tests
Affinity Map
High Fidelity Wireframes
Solution
A responsive website was designed to help the business owners better handle their increasing sales, demand & to give a clean and easy way to showcase the product with new and existing customers.

The final design included a product catalogue, plant care information, search filters & online ordering.
first things first... understanding the owner needs.
the owners value healthy plants
above everything else... yes, even above sales.
We love plants &
well loved plants thrive.
We grow & maintain the highest
quality of plants for all level of
plant enthusiasts to enjoy!
Competitive Analysis
A differentiator from competitors because of the emphasis on plant care
9 different competitors were reviewed for their overall usability, plant ordering & gifting opportunities. Direct & indirect competitors were reviewed, by assessing their websites. Local/ small business style shops vs. international plant gifting services were also compared.
Other gifting shops focused less on the health & well-being of their plants... and more on the business of gifting.
User Surveys
91% of participants would be likely to pay for specialty pots & gift wrap/ custom cards
Based on the findings from the preliminary research & after speaking with the product owner, I created a user survey & sent it across many networks over the course of 2 days. 5 participants completed the survey & this information was reviewed to help move forward with the design.
One of the findings was related to specialty gifting, and I ensured that the importance of this service was shown by including it on the landing page of the design.
User Interviews
ALL participants expressed concern quality when shopping online for real plants.
Constructed more in-depth research questions based on the survey results, and interviewed 5 participants to gain a better understanding of user needs & pains.
Needs
Filter by cost
Product pics
Reviews
Wants
Free shipping
Easy Nav
On time
Pain Points
Hidden fees
Lack of info
Poor delivery
Motivations
Competitive price
Dependability
Specialty gifting
The #1 takeaway from all the primary research was that trust of quality was not only a deterrent to buying plants online, but also a key factor to why people would buy online.
Personas
3 personas were created based on the extensive research findings, to truly reflect giftapot target user, an in-depth look at one persona is shown here:
Users wanted trust when buying plants online because it is harder to foster a personal connection with an online shop & products.
Vision
After speaking to the giftapot owner, it was clear that the users needs aligned with the businesses perfectly.
Trustworthy
Real customer photos
Modern
Inviting, calming online space
Effortless
Easy for non-tech savvy customers
Constraint
Due to client request & constraints the planned design flow was modified.
I needed to begin branding, logo, iconography work while still working on the information architecture and wireframing. This did result in some additional back and forth and more changes that had to be made later in the project. However, this was necessary based on the client needs.
Logo Creation
Peers helped pinpoint the final design. Reviews revealed that people valued how the logo clearly showcased the brand identity, while being modern & clean.
Explored many avenues for the logo, iterating some & ultimately deciding to create a hand holding a potted plant.
Branding & Style Guide
Inspired by nature, colour hex codes were pulled directly from real plants, stone & terracotta pots.
Honesty & reliability personified in the clean white background, which green accents symbolizing nature & growth.
Created vector drawings in Figma to add an unique & custom element to the plant categories
Priority Features Matrix
Gifting service, categories section, CTA and many more "must haves" were incorporated.
Compiled “must have” & “nice to have” features with corresponding supporting research in order to best map out the priority feature roadmap to utilize for information architecture & planning.
Only a snapshot of the document is shown in the above image.
Information Architecture
Information architecture utilized to best understand the way users will navigate the site.
User Flow
This detailed user flow is showing the scenario of a user browsing, selecting & buying a plant.
Task Flow
Confirmed flow with product owner, to best understand that their exact needs were being accounted for.
Wireframe Sketches
Sketching potential wireframes helped visualize site structure.
To avoid overwhelming the customer, I had to consider how best to offer the specialized pot and gift wrap features. I utilized the site map to make sure all the necessary features were included.
Mid Fidelity Wireframes
Ensured visual hierarchy & usable design while formalizing these designs in figma.
Select screens shown, some cropped for the purpose of this case study.
Tested with users & implemented feedback onto designs.
Iconography, formatting & site flow
hard to read categories, lacking reviews, redundancy
User Testing & Affinity Mapping
Had 5 participants test the "booking a site" flow using wireframes to gauge feedback on 4 major categories.
Selected participants who fit the personas (i.e. either plant buyers, or gift buyers) & shared a mid-fidelity version of the wireframes for them to walk through without guidance. Specifically honed in on their experiences with the landing page flow, browsing, plant information & ordering.
Highlighted the main positives as well as the main pain points in order to focus on where to improve the experience (indicated with the heart and teardrop icons above).
Reviewed comments, relevant changes implemented on high-fidelity.
Iterate & Improve
Category icons felt ‘squished’
Avoiding carousel/ minimize clicks since it’s the selection & should be clear.
Added breathing room on high-fidelity wireframes
Reviews were overlooked and felt lacking.
Users interviewed had deemed quotes and large clear images very important.
Transformed on high-fidelity, making the cards more informational & trustworthy.
80% of the participants were confused about the ‘pick a pot’ section.
My original design included both a drop down & visual selection. Users felt this was redundant.
Updated UI was clear, usable & well received.
In order to make sure that anyone, anywhere can use the site, it had to be responsive.
Responsive UI Design of High Fidelity Prototypes
Visual hierarchy, responsive design & ensuring the ‘giftapot’ brand was properly reflected.
I used components & auto-layout when constructing various elements & pages. This helped to design for multiple breakpoints to ensure responsiveness & increase reach.
Reflections
Project Reflections
giftapot; a real company in Bangalore, India, asked me to create their online presence.
When working with a real client, it is essential to fail fast & show every step of your process. Next time, I will seek feedback earlier (& more often).
Visual Hierarchy & White Space
I learned how to check that the eye movement follows visual hierarchy. I learned to design for usability instead of “fitting” into confined designs.
Designing responsive screens
It was double effort to make desktop screens & re-create them for mobile.
‍
Next time, I will design for different breakpoints, utilize components & auto-layout more & work “inside to out”, so it’s easier to scale up