UX/UI Design
Framer Development
Social Media Management
This project centered on the high-end landscaping market, where clients look for premium, customized outdoor designs to match their lifestyles.
FROM COMPLEX TO CLEAR
Introduction
About The Project
Industry
Landscape Design
Client
Soffi Landscape Design Studio
Alongside designing and developing the website in Framer, I contributed to Soffi Landscapes’ social media presence on TikTok and Instagram.
My primary focus was on Web Design, UX Design, and Framer development. The overall website was straightforward, but the packages page required a unique solution to organize extensive information in an accessible way.
For TikTok and Instagram, I conducted competitive research, scripted reels, and designed Instagram stories/highlights that offered key brand information.
Alongside designing and developing the website in Framer, I contributed to Soffi Landscapes’ social media presence on TikTok and Instagram.
My primary focus was on Web Design, UX Design, and Framer development. The overall website was straightforward, but the packages page required a unique solution to organize extensive information in an accessible way.
For TikTok and Instagram, I conducted competitive research, scripted reels, and designed Instagram stories/highlights that offered key brand information.
Alongside designing and developing the website in Framer, I contributed to Soffi Landscapes’ social media presence on TikTok and Instagram.
My primary focus was on Web Design, UX Design, and Framer development. The overall website was straightforward, but the packages page required a unique solution to organize extensive information in an accessible way.
For TikTok and Instagram, I conducted competitive research, scripted reels, and designed Instagram stories/highlights that offered key brand information.
Skills
Web Design
UX/UI Design
Framer Development
Interaction Design
Copywriting
Branding
Social Media Management
Social Media Content Creation
Competitive Research
Ad Creation (Scriptwriting)
Skills
Web Design
UX/UI Design
Framer Development
Interaction Design
Copywriting
Branding
Social Media Management
Social Media Content Creation
Competitive Research
Ad Creation (Scriptwriting)
Skills
Web Design
UX/UI Design
Framer Development
Interaction Design
Copywriting
Branding
Social Media Management
Social Media Content Creation
Competitive Research
Ad Creation (Scriptwriting)
Role
UX/UI Designer
Framer Developer
General Design Support
Social Media Management
Content Creation
Scriptwriting for Ads And Reels
Competitive Research
Role
UX/UI Designer
Framer Developer
General Design Support
Social Media Management
Content Creation
Scriptwriting for Ads And Reels
Competitive Research
Role
UX/UI Designer
Framer Developer
General Design Support
Social Media Management
Content Creation
Scriptwriting for Ads And Reels
Competitive Research
Time Span
July 2024 – September 2024
Team
Myself
Vule Stefanovic - Project Leader, Brand Strategy, Video Editing
Challenges
1
Information Overload: The packages page required showcasing extensive and detailed information. Unlike typical pricing pages, it needed to explain complex service offerings, particularly for users unfamiliar with industry jargon.
Information Overload: The packages page required showcasing extensive and detailed information. Unlike typical pricing pages, it needed to explain complex service offerings, particularly for users unfamiliar with industry jargon.
Information Overload: The packages page required showcasing extensive and detailed information. Unlike typical pricing pages, it needed to explain complex service offerings, particularly for users unfamiliar with industry jargon.
2
Speaking to a Diverse Audience: With a large client base in Saudi Arabia, where English isn’t the first language, we needed to ensure clarity and accessibility. This meant avoiding jargon and explaining services in simple, straightforward terms.
Speaking to a Diverse Audience: With a large client base in Saudi Arabia, where English isn’t the first language, we needed to ensure clarity and accessibility. This meant avoiding jargon and explaining services in simple, straightforward terms.
Speaking to a Diverse Audience: With a large client base in Saudi Arabia, where English isn’t the first language, we needed to ensure clarity and accessibility. This meant avoiding jargon and explaining services in simple, straightforward terms.
Research Phase
Part 1: Understanding
We started by researching how other landscape design studios present their services and packages. The goal was to find out what worked, what didn’t, and how we could do it better for Soffi Landscapes.
We started by researching how other landscape design studios present their services and packages. The goal was to find out what worked, what didn’t, and how we could do it better for Soffi Landscapes.
We started by researching how other landscape design studios present their services and packages. The goal was to find out what worked, what didn’t, and how we could do it better for Soffi Landscapes.
Research Questions
How can we present a lot of detailed information in a way that’s clear and not overwhelming, while answering two key questions for users:
Which services are included in which package?
What do these services actually mean?
How can we present a lot of detailed information in a way that’s clear and not overwhelming, while answering two key questions for users:
Which services are included in which package?
What do these services actually mean?
How can we present a lot of detailed information in a way that’s clear and not overwhelming, while answering two key questions for users:
Which services are included in which package?
What do these services actually mean?
Research Methods
Competitive Analysis
We studied other landscape design studios' websites (like Yardzen, Integral Designs, and M/s Prabhakar B Bhagwat) to understand how they present their services and packages.
We studied other landscape design studios' websites (like Yardzen, Integral Designs, and M/s Prabhakar B Bhagwat) to understand how they present their services and packages.
We studied other landscape design studios' websites (like Yardzen, Integral Designs, and M/s Prabhakar B Bhagwat) to understand how they present their services and packages.
Research Insights
We found that most competitors didn’t explain their services in much detail, leaving potential clients with unanswered questions. This opened up an opportunity to set Soffi Landscapes apart with clearer, more user-friendly communication.
We found that most competitors didn’t explain their services in much detail, leaving potential clients with unanswered questions. This opened up an opportunity to set Soffi Landscapes apart with clearer, more user-friendly communication.
We found that most competitors didn’t explain their services in much detail, leaving potential clients with unanswered questions. This opened up an opportunity to set Soffi Landscapes apart with clearer, more user-friendly communication.
1
Most competitors didn’t group services into packages or used minimal details. Many had outdated websites that lacked usability.
Most competitors didn’t group services into packages or used minimal details. Many had outdated websites that lacked usability.
Most competitors didn’t group services into packages or used minimal details. Many had outdated websites that lacked usability.
3
Yardzen stood out with a package-based approach but didn’t explain their services, leaving users to guess what each offering entailed.
Yardzen stood out with a package-based approach but didn’t explain their services, leaving users to guess what each offering entailed.
Yardzen stood out with a package-based approach but didn’t explain their services, leaving users to guess what each offering entailed.
2
We identified a need to combine clarity with interactivity, ensuring users could get the details they needed without feeling overwhelmed.
We identified a need to combine clarity with interactivity, ensuring users could get the details they needed without feeling overwhelmed.
We identified a need to combine clarity with interactivity, ensuring users could get the details they needed without feeling overwhelmed.
Challenges Solved
Simple Interactivity
By using tooltips, we made the packages page both detailed and digestible.
By using tooltips, we made the packages page both detailed and digestible.
By using tooltips, we made the packages page both detailed and digestible.
Clear Language
By using simple language and hover-based explanations, we made sure the page worked well for non-native English speakers.
By using simple language and hover-based explanations, we made sure the page worked well for non-native English speakers.
By using simple language and hover-based explanations, we made sure the page worked well for non-native English speakers.
End Product
The final product was a fully developed website, designed and built in Framer, with the packages page that is both visually appealing and highly functional, featuring:
A clean, professional design that matches Soffi Landscapes’ brand.
A detailed service comparison table that’s easy to navigate.
Intuitive tooltips that offer clarity without overwhelming the user.
The final product was a fully developed website, designed and built in Framer, with the packages page that is both visually appealing and highly functional, featuring:
A clean, professional design that matches Soffi Landscapes’ brand.
A detailed service comparison table that’s easy to navigate.
Intuitive tooltips that offer clarity without overwhelming the user.
The final product was a fully developed website, designed and built in Framer, with the packages page that is both visually appealing and highly functional, featuring:
A clean, professional design that matches Soffi Landscapes’ brand.
A detailed service comparison table that’s easy to navigate.
Intuitive tooltips that offer clarity without overwhelming the user.
Takeaways
This project was a great reminder of how important it is to prioritize the user in every decision.
This project was a great reminder of how important it is to prioritize the user in every decision.
This project was a great reminder of how important it is to prioritize the user in every decision.
Small Interactions, Big Difference
Tooltips, like accordions, proved to be a simple yet powerful way to keep the design clean while providing users with the details they needed.
Tooltips, like accordions, proved to be a simple yet powerful way to keep the design clean while providing users with the details they needed.
Tooltips, like accordions, proved to be a simple yet powerful way to keep the design clean while providing users with the details they needed.
Designing for Everyone
Making the page accessible to non-native English speakers was a good reminder to prioritize clarity and inclusivity in my design.
Making the page accessible to non-native English speakers was a good reminder to prioritize clarity and inclusivity in my design.
Making the page accessible to non-native English speakers was a good reminder to prioritize clarity and inclusivity in my design.
Balancing Detail and Simplicity
Finding the right balance between giving enough information and avoiding overload is always a challenge, but this project showed how well it can work with the right approach.
Finding the right balance between giving enough information and avoiding overload is always a challenge, but this project showed how well it can work with the right approach.
Finding the right balance between giving enough information and avoiding overload is always a challenge, but this project showed how well it can work with the right approach.
Recommendations For Future Enhancements
To make the page even easier to use, we could add sticky headers for package names or include expandable descriptions as an alternative to hover-based tooltips.
To make the page even easier to use, we could add sticky headers for package names or include expandable descriptions as an alternative to hover-based tooltips.
To make the page even easier to use, we could add sticky headers for package names or include expandable descriptions as an alternative to hover-based tooltips.
Sticky Headers
Adding sticky headers for the package names would help users keep track of which column they’re in while scrolling or taking a closer look at the details.
Without them, users might forget which column represents which package and find themselves constantly scrolling back up to check.
Adding sticky headers for the package names would help users keep track of which column they’re in while scrolling or taking a closer look at the details.
Without them, users might forget which column represents which package and find themselves constantly scrolling back up to check.
Adding sticky headers for the package names would help users keep track of which column they’re in while scrolling or taking a closer look at the details.
Without them, users might forget which column represents which package and find themselves constantly scrolling back up to check.
Expandable Descriptions
For users who prefer static options, adding expandable descriptions could be a helpful alternative to tooltips.
For users who prefer static options, adding expandable descriptions could be a helpful alternative to tooltips.
For users who prefer static options, adding expandable descriptions could be a helpful alternative to tooltips.
Social Media
TikTok and Instagram Content
Soffi Landscapes wanted to expand its digital presence on Instagram and TikTok.
We developed a comprehensive social media strategy, focusing on engaging, educational content that highlighted the brand’s commitment to eco-friendly and nature-inspired design. This involved thorough research, content creation, and management.
Soffi Landscapes wanted to expand its digital presence on Instagram and TikTok.
We developed a comprehensive social media strategy, focusing on engaging, educational content that highlighted the brand’s commitment to eco-friendly and nature-inspired design. This involved thorough research, content creation, and management.
Soffi Landscapes wanted to expand its digital presence on Instagram and TikTok.
We developed a comprehensive social media strategy, focusing on engaging, educational content that highlighted the brand’s commitment to eco-friendly and nature-inspired design. This involved thorough research, content creation, and management.
Challenges
Soffi Landscapes needed a cohesive social media strategy to stand out in a competitive landscape design niche.
The goal was to create content that not only engaged users but also educated them about landscape design, as well as the brand's philosophy and services.
Soffi Landscapes needed a cohesive social media strategy to stand out in a competitive landscape design niche.
The goal was to create content that not only engaged users but also educated them about landscape design, as well as the brand's philosophy and services.
Soffi Landscapes needed a cohesive social media strategy to stand out in a competitive landscape design niche.
The goal was to create content that not only engaged users but also educated them about landscape design, as well as the brand's philosophy and services.
Research
To develop a targeted approach, I conducted in-depth research within the landscape design niche.
I explored relevant hashtags and analyzed popular content on Instagram and TikTok, focusing on educational videos.
I curated 60-100 high-performing videos, documenting key metrics, including hooks, view counts, likes, and content formats, such as talking-head videos and b-roll with audio and text overlays.
By studying the scripts of top-performing videos, we identified storytelling techniques that resonated with audiences, helping us write content that would effectively engage Soffi’s followers.
To develop a targeted approach, I conducted in-depth research within the landscape design niche.
I explored relevant hashtags and analyzed popular content on Instagram and TikTok, focusing on educational videos.
I curated 60-100 high-performing videos, documenting key metrics, including hooks, view counts, likes, and content formats, such as talking-head videos and b-roll with audio and text overlays.
By studying the scripts of top-performing videos, we identified storytelling techniques that resonated with audiences, helping us write content that would effectively engage Soffi’s followers.
To develop a targeted approach, I conducted in-depth research within the landscape design niche.
I explored relevant hashtags and analyzed popular content on Instagram and TikTok, focusing on educational videos.
I curated 60-100 high-performing videos, documenting key metrics, including hooks, view counts, likes, and content formats, such as talking-head videos and b-roll with audio and text overlays.
By studying the scripts of top-performing videos, we identified storytelling techniques that resonated with audiences, helping us write content that would effectively engage Soffi’s followers.
Final Result
Stories
The final social media strategy for Soffi Landscapes delivered a cohesive and engaging online presence.
We created profile descriptions, stories, and highlights that conveyed the brand’s vision, services, and client success stories.
The final social media strategy for Soffi Landscapes delivered a cohesive and engaging online presence.
We created profile descriptions, stories, and highlights that conveyed the brand’s vision, services, and client success stories.
The final social media strategy for Soffi Landscapes delivered a cohesive and engaging online presence.
We created profile descriptions, stories, and highlights that conveyed the brand’s vision, services, and client success stories.
Reels
We created a series of educational and engaging posts that authentically represented the brand and resonated with their target audience.
Some posts focused on educating the audience, while others showcased Soffi Landscapes’ work through transformation videos.
We created a series of educational and engaging posts that authentically represented the brand and resonated with their target audience.
Some posts focused on educating the audience, while others showcased Soffi Landscapes’ work through transformation videos.
We created a series of educational and engaging posts that authentically represented the brand and resonated with their target audience.
Some posts focused on educating the audience, while others showcased Soffi Landscapes’ work through transformation videos.
Ads
We also created a series of ads for Soffi Landscapes.
I focused on writing scripts that avoided the typical “ad tone” that causes users to immediately scroll.
The challenge was to create hooks that felt natural, sparked curiosity, and invited engagement without immediately signaling that we were selling something.
We also created a series of ads for Soffi Landscapes.
I focused on writing scripts that avoided the typical “ad tone” that causes users to immediately scroll.
The challenge was to create hooks that felt natural, sparked curiosity, and invited engagement without immediately signaling that we were selling something.
We also created a series of ads for Soffi Landscapes.
I focused on writing scripts that avoided the typical “ad tone” that causes users to immediately scroll.
The challenge was to create hooks that felt natural, sparked curiosity, and invited engagement without immediately signaling that we were selling something.
Acknowledgements
Big thanks to Vule Stefanovic for his leadership and branding expertise—it was a true team effort that brought this project to life!
Big thanks to Vule Stefanovic for his leadership and branding expertise—it was a true team effort that brought this project to life!
Big thanks to Vule Stefanovic for his leadership and branding expertise—it was a true team effort that brought this project to life!
Check Out The Live Website
Soffi Landscapes ‣
Soffi Landscapes ‣
Soffi Landscapes ‣