Driving a 45% increase in sign-ups for The Garden, a creator community platform
Driving a 45% increase in sign-ups for The Garden, a creator community platform
TEAM
TEAM
3 Product Designers
3 Product Designers
DURATION
DURATION
2 months
2 months
TAGS
TAGS
UX & UI Design, User Research, Usability Testing, Product Strategy, UX Writing
UX & UI Design, User Research, Usability Testing, Product Strategy, UX Writing
Introduction
About The Garden
About The Garden
The Garden is a platform that provides individuals with a space to showcase their talents and connect with a supportive community of like-minded people, fostering growth and collaboration across diverse categories. It's a place where creativity thrives, and the journey is as valued as the destination.
The Garden first started as a Discord server and eventually a website was launched where users could share their work. The discord server currently has 50,000+ members.
The Garden is a platform that provides individuals with a space to showcase their talents and connect with a supportive community of like-minded people, fostering growth and collaboration across diverse categories. It's a place where creativity thrives, and the journey is as valued as the destination.
The Garden first started as a Discord server and eventually a website was launched where users could share their work. The discord server currently has 50,000+ members.
What do users think?
User Pain Points
User Pain Points
We conducted some interviews with users of the existing platform and these were some of their thoughts. Along with user interviews we also conducted an audit of the website internally.
We conducted some interviews with users of the existing platform and these were some of their thoughts. Along with user interviews we also conducted an audit of the website internally.
Key Findings
Issues to address
Issues to address
Issues 1 & 2
Lack of feed personalization
Lack of feed personalization
The problem
4/5 users complained about the lack of personalization on the homepage and not being able to see posts from people they follow on The Garden.
4/5 users complained about the lack of personalization on the homepage and not being able to see posts from people they follow on The Garden.
The solution
We broke down the IA and split the homepage into a FYP and an explore page designed to enhance both follower engagement and content discovery.
We broke down the IA and split the homepage into a FYP and an explore page designed to enhance both follower engagement and content discovery.
How should posts be shown to users?
How should posts be shown to users?
List View
Posts will be displayed one below the other
More details like title, description, engagement stats can be viewed.
Equal emphasis on media and the written details.
Focuses on content consumption in a sequential manner.
More suited for a for you page where the main objective is to view posts from people you follow in detail.
Posts will be displayed one below the other
More details like title, description, engagement stats can be viewed.
Equal emphasis on media and the written details.
Focuses on content consumption in a sequential manner.
More suited for a for you page where the main objective is to view posts from people you follow in detail.
Grid View
Posts will be displayed in a grid format.
Title, description, engagement stats can not be viewed.
More emphasis on visuals/ media attached.
Focuses on showing user more content in a single frame.
More suited for an explore page where the main objective is to discover new content and give users an easy browsing experience.
Posts will be displayed in a grid format.
Title, description, engagement stats can not be viewed.
More emphasis on visuals/ media attached.
Focuses on showing user more content in a single frame.
More suited for an explore page where the main objective is to discover new content and give users an easy browsing experience.
Issue 3
Nested Navigation
Nested Navigation
The problem
The older version of the website had a side navigation bar with icons which would have more navigation options that appear on hover. This led to users reduced traffic on pages that were nested under the main page.
The older version of the website had a side navigation bar with icons which would have more navigation options that appear on hover. This led to users reduced traffic on pages that were nested under the main page.
The solution
The side navigation bar had to be retained because of development constraints. So we decided to bring the nested components out into a top navigation bar.
The side navigation bar had to be retained because of development constraints. So we decided to bring the nested components out into a top navigation bar.
Issue 4
Restricted creative expression
Restricted creative expression
The Garden's vision was to support artists with diverse skills. Some of the talents supported are -
The Garden's vision was to support artists with diverse skills. Some of the talents supported are -
The Problem
The platform’s limited file formats restricted how users shared their creativity, leading many to hold back on posting videos, audio, or 3D models. This hindered the diversity of content and expression.
The platform’s limited file formats restricted how users shared their creativity, leading many to hold back on posting videos, audio, or 3D models. This hindered the diversity of content and expression.
The solution
By adding support for more file formats, we made it easier for creators to share their work in the way that best suits them. This change has helped us create a more inclusive and vibrant space where diverse content and creativity can really shine.
By adding support for more file formats, we made it easier for creators to share their work in the way that best suits them. This change has helped us create a more inclusive and vibrant space where diverse content and creativity can really shine.
Images
Images
Audio
Audio
Video
Video
Code
Code
Text
Text
3D Model
3D Model
Card Designs
Supporting diverse file formats wasn't just a technical implementation. We carefully crafted individual card designs for each file type to optimize content presentation. We began designing cards for different file formats by listing the different data points to cover under each card type.
Supporting diverse file formats wasn't just a technical implementation. We carefully crafted individual card designs for each file type to optimize content presentation. We began designing cards for different file formats by listing the different data points to cover under each card type.
Evolution of Card Designs
Evolution of Card Designs
Final Card Designs
Issue 5
Honoring creative integrity
Honoring creative integrity
The problem
4/5 users were frustrated when their content was automatically cropped, altering the way they intended it to be seen. It felt like the platform wasn’t respecting their creative work.
4/5 users were frustrated when their content was automatically cropped, altering the way they intended it to be seen. It felt like the platform wasn’t respecting their creative work.
The solution
To retain user's aspect ratios in thumbnails, we decided to use a dynamic grid where the widths of thumbnails are fixed and the heights are adjusted based on the media attached. This approach also helps cater to the various file formats we have.
To retain user's aspect ratios in thumbnails, we decided to use a dynamic grid where the widths of thumbnails are fixed and the heights are adjusted based on the media attached. This approach also helps cater to the various file formats we have.
To create a more immersive experience on the explore page, we also explored a data overlay iteration, where details appear on hover. However due to development constraints, we couldn't deploy this in this version.
To create a more immersive experience on the explore page, we also explored a data overlay iteration, where details appear on hover. However due to development constraints, we couldn't deploy this in this version.
Final designs
For you page & Explore Page
For you page & Explore Page
Addressing all the user pain points and combining all the design solutions mentioned above, we arrived at the final designs for the for you page and the explore page as shown below.
Addressing all the user pain points and combining all the design solutions mentioned above, we arrived at the final designs for the for you page and the explore page as shown below.
Edge Cases
Edge Cases
Besides designing for a happy path, we also design for edge cases mentioned below -
Home page when a file is being uploaded.
Top navigation bar tabs become sticky as user starts to scroll.
Loading state when a page is loading content
Error state
Besides designing for a happy path, we also design for edge cases mentioned below -
Home page when a file is being uploaded.
Top navigation bar tabs become sticky as user starts to scroll.
Loading state when a page is loading content
Error state
User Feedback
Need for tooltips
Need for tooltips
Since the platform was completely revamped, existing users found it difficult to navigate around the newly designed platform. After a round of usability testing, we decided to ship the onboarding with tooltips on priority with the MVP.
Since the platform was completely revamped, existing users found it difficult to navigate around the newly designed platform. After a round of usability testing, we decided to ship the onboarding with tooltips on priority with the MVP.
Learnings
Learnings
Here are some of my takeaways from working on this project -
Coordinating with developers early in the design process ensures a shared understanding of project goals and technical constraints. This helps prevent costly revisions and delays.
Usability testing helps eliminate biases and see the designs from a fresh perspective and identify errors that were previously missed due to the said biases.
Product design goes beyond designing app screens. Designing a product lifecycle involves marketing, landing pages, launch strategies and much more.
Here are some of my takeaways from working on this project -
Coordinating with developers early in the design process ensures a shared understanding of project goals and technical constraints. This helps prevent costly revisions and delays.
Usability testing helps eliminate biases and see the designs from a fresh perspective and identify errors that were previously missed due to the said biases.
Product design goes beyond designing app screens. Designing a product lifecycle involves marketing, landing pages, launch strategies and much more.