Case Study
Responsive Web Design
foundt.com
Responsive Website Re-Design for a Socially Aware Online Store
SCOPE
PROBLEM
GOALS
Restructuring an E-commerce platform to serve as a dual-purpose interface—an avenue for online retail and a springboard for a noble social endeavor.
The customer experience on foundt.com is confusing to navigate, needs better organization, and doesn't look cohesive despite having beautiful products and high-quality photography.
Redesign the website to make it easier to use with better menus and categories in order to increase sales.
Clarify the charitable mission of foundt.com and improve personalized customer service.
Update UI elements for a more consistent look.
Role UX Researcher, UX Designer, UI Designer, Branding
Timeline 6 Weeks
Tools Figma, Illustrator, Photoshop
SCOPE
KEY PHASES
DISCOVER
What We Know
According to a report by the World Economic Forum, companies that prioritize sustainability see a 16% increase in profitability over their peers
63% of Americans express hope that businesses will lead the charge in driving social and environmental change - Cone Communications
33% of consumers now prefer to buy from brands they perceive as doing social or environmental good - Unilever
66% of global consumers are willing to pay more for products from brands committed to positive social and environmental impact
DISCOVER
WHAT WE KNOW
According to a report by the World Economic Forum, companies that prioritize sustainability see a 16% increase in profitability over their peers
63% of Americans express hope that businesses will lead the charge in driving social and environmental change - Cone Communications
33% of consumers now prefer to buy from brands they perceive as doing social or environmental good - Unilever
66% of global consumers are willing to pay more for products from brands committed to positive social and environmental impact
Examples of the original site:
lack of focus / point of view
lack of flow
clashing color palette
Examples of the original site:
lack of focus / point of view
lack of flow
clashing color palette
Improvements to be made:
Cleaner UI elements…
improved overall design
clearer focus of the purpose of foundt.com
more focus on products with improved layout and categorization
IMPROVEMENTS TO BE MADE
Cleaner UI elements:
improved overall design
clearer focus of the purpose of foundt.com
more focus on products with improved layout
COMPETITIVE ANALYSIS
A competitive analysis was created to highlight noteworthy features of other online stores with humanitarian goals.
This process was essential to understand the competitive landscape and identify opportunities for differentiation.
By analyzing the user experience, design elements, and functionality of similar platforms, we gained valuable insights into industry best practices and emerging trends.
Furthermore, this analysis enabled us to identify unique features and innovative approaches that we can use to enhance the usability and impact of our own humanitarian-focused online store.
Through this research, we aim to create compelling, user-centric experiences that not only drive business success but also contribute to meaningful social and environmental causes.
Notable Findings
Interactivity elements like designing your own pieces
Lots filter options; color, size, etc.
Elements noting global impact and and information regarding unique nature of products
Shopping by location; continent, country, state, etc.
Demonstrating various product uses, for instance, as accessories or as art pieces for the home
Video content and infographics showing how the business model is helping the artisans in their communities
Show users how their purchases support makers and artisans with transparency
Social Media content with users / customers purchasing and interacting with products, bridging the gap between content and actuality
SURVEY
Eight people who regularly buy quality products online were selected to visit foundt.com and test the search and purchase process.
They shared feedback on their general experience using the website and searching for items.
Results yielding that the site as
unorganized
unclear of the philanthropic mission
lacking availability of customer support
lack of clear product descriptions and specifications
Initial Research
COMPETITIVE ANALYSIS
A competitive analysis was created to highlight noteworthy features of other online stores with humanitarian goals.
This process was essential to understand the competitive landscape and identify opportunities for differentiation.
By analyzing the user experience, design elements, and functionality of similar platforms, we gained valuable insights into industry best practices and emerging trends.
Furthermore, this analysis enabled us to identify unique features and innovative approaches that we can leverage to enhance the usability and impact of our own humanitarian-focused online store designs.
Through this research, we aim to create compelling, user-centric experiences that not only drive business success but also contribute to meaningful social and environmental causes.
Notable Findings
Interactivity elements like designing your own pieces
Lots filter options; color, size, etc.
Elements noting global impact and and information regarding unique nature of products
Shopping by location; continent, country, state, etc.
Showing how products can be used in multiple ways, for instance, as accessories or as art pieces for the home
Video content and info graphics showing how the business model is helping the artisans in their communities
Transparency in showing users / customers how much money is actually going to the makers and artisans
Social Media content with users / customers purchasing and interacting with products, bridging the gap between content and actuality
SURVEY
Eight people who regularly buy quality products online were selected to visit foundt.com and test the search and purchase process.
They shared feedback on their general experience using the website and searching for items.
Results yielding that the site as
unorganized
unclear of the philanthropic mission
lacking availability of customer support
lack of clear product descriptions and specifications
Interview Question Samples
How influential is social media in your online shopping decisions for items?
Do you have any suggestions for online retailers to enhance the online shopping experience specifically for women in their 30s?
What are some challenges or drawbacks you have encountered while shopping online for apparel?
In your opinion, what are some benefits of supporting websites that give back compared to traditional online shopping platforms?
USER PERSONA
Creating the user persona helped further understand the participants I interviewed.
The target audience is: young, working, city dwelling, educated woman who cares equally about trends and origin and quality of products.
USER PERSONA
Creating the user persona helped further understand the participants I interviewed.
The target audience is: young, working, city dwelling, educated woman who cares equally about trends and origin and quality of products.
DEFINE
SITE MAP / USER FLOW
The site map was created with feedback in mind, focusing on the site's charitable mission and making it easy to see which items are made by indigenous artisans. It also improves the way users can search for products and log in to their accounts.
HOMEPAGE
DEVELOP
WIREFRAMES
Wireframes were created to address the main features needing improvement; such as homepage, products page, and to visualize the mobile conversion
PRODUCT PAGE
MOBILE
USER INTERFACE
BEFORE
Previous UI elements were inconsistent and poorly planned. Colors were based off of illustrations and photography rather than being created as a foundation to the structure of the site which complicated the experience for the user. Typefaces were also inconsistent, further complicating the cohesion of the site.
AFTER
New colors were chosen to compliment the boldness and vibrance of the products themselves. The softness of the palette works well both as a background and as a guide for following the flow of the sites structure. The logo font will remain the same, but newly selected typefaces provide more coordination and scale to the site.
DELIVER
DESKTOP SCREENS
Simpler landing page
Product navigation bar throughout site
better search system and more info about the maker of the products
MOBILE SCREENS
better clarity and organization for mobile experience
INTERACTIVE PROTOTYPE
Participants were asked to navigate the mobile site with the following instructions:
- From homepage navigate to items made in Tanzania
- Select an item (specifically beaded clutch Pearl Black White) and complete the purchase process.
- Note any key takeaways for the design team to re-asses elementals
USER TESTING INSIGHTS
Based on user testing, an “about” page for Rose, the Tanzanian maker, will be added to the site. The page will include information regarding the profits that will go straight to the artisan Rose.
Each product page will include an picture of Rose to help clarify that she was the maker of the products that people are searching.
This project was particularly interesting because I was the creator of the original website foundt.com therefore approaching the project as stakeholder, product designer, and creative director.
Originally, the site reflected my personal vision, aiming to be artistic, captivating, and different from typical online shopping platforms, with a more personal and relaxed feel.
The site's "homegrown" and "do-it-yourself" characteristics made it endearing and fun, but also made it unclear to users whether it was an online store or more of a blog or journal.
——————————————————————————————————————————————————————-
Through my research and design process it became clearer that the main goal of the site would only be reached if the user experience was the prioritized.
Ease of use, organization, and more palatable design choices became the goals of this project and I feel that the current state of the site is a success.
I look forward to relaunching the site and track the analytics to help grow the brand.
After testing with 4 people, here are the main things we learned that will impact the design.
+ on the plus side users were able to navigate the site and follow tasks with ease.
- on the downside, it was not clear to users that items are handmade and the maker receives a large portion of sales.
ITERATIONS
FINAL PRODUCT
CONCLUSION
Case Study
Responsive Web Design
foundt.com
Responsive Website Re-Design for a Socially Aware Online Store
Restructuring an E-commerce platform to serve as a dual-purpose interface—an avenue for online retail and a springboard for a noble social endeavor.
SCOPE
The customer experience on foundt.com is confusing to navigate, needs better organization, and doesn't look cohesive despite having beautiful products and high-quality photography.
PROBLEM
GOALS
Redesign the website to make it easier to use with better menus and categories in order to increase sales.
Clarify the charitable mission of foundt.com and improve personalized customer service.
Update UI elements for a more consistent look.
Role UX Researcher, UX Designer, UI Designer, Branding
Timeline 6 Weeks
Tools Figma, Illustrator, Photoshop
KEY PHASES
DISCOVER
Research Plan
Research Findings
User Persona
DEFINE
Site Map
User Flow
DEVELOP
Sketches
Wireframes
UI Screens
DELIVER
Prototype
Testing Plan
DISCOVER
According to a report by the World Economic Forum, companies that prioritize sustainability see a 16% increase in profitability over their peers
What We Know
63% of Americans express hope that businesses will lead the charge in driving social and environmental change - Cone Communications
33% of consumers now prefer to buy from brands they perceive as doing social or environmental good - Unilever
66% of global consumers are willing to pay more for products from brands committed to positive social and environmental impact
Examples of the original site
lack of focus / POV
lack of flow
clashing color palatte
COMPETITIVE ANALYSIS
A competitive analysis was created to highlight noteworthy features of other online stores with humanitarian goals.
This process was essential to understand the competitive landscape and identify opportunities for differentiation.
By analyzing the user experience, design elements, and functionality of similar platforms, we gained valuable insights into industry best practices and emerging trends.
Furthermore, this analysis enabled us to identify unique features and innovative approaches that we can use to enhance the usability and impact of our own humanitarian-focused online store.
Through this research, we aim to create compelling, user-centric experiences that not only drive business success but also contribute to meaningful social and environmental causes.
Interactivity elements like designing your own pieces
Lots filter options; color, size, etc.
Elements noting global impact and and information regarding unique nature of products
Shopping by location; continent, country, state, etc.
Demonstrating various product uses, for instance, as accessories or as art pieces for the home
Video content and infographics showing how the business model is helping the artisans in their communities
Show users how their purchases support makers and artisans with transparency
Social Media content with users / customers purchasing and interacting with products, bridging the gap between content and actuality
Notable Findings
Eight people who regularly buy quality products online were selected to visit foundt.com and test the search and purchase process.
They shared feedback on their general experience using the website and searching for items.
SURVEY
Results yielding that the site as
unorganized
unclear of the philanthropic mission
lacking availability of customer support
lack of clear product descriptions and specifications
Creating the user persona helped further understand the participants I interviewed.
The target audience is: young, working, city dwelling, educated woman who cares equally about trends and origin and quality of products.
USER PERSONA
DEFINE
The site map was created with feedback in mind, focusing on the site's charitable mission and making it easy to see which items are made by indigenous artisans. It also improves the way users can search for products and log in to their accounts.
SITE MAP / USER FLOW
DEVELOP
Wireframes were created to address the main features needing improvement; such as homepage, products page, and to visualize the mobile conversion
WIREFRAMES
HOMEPAGE
PRODUCT PAGE
MOBILE
Previous UI elements were inconsistent and poorly planned. Colors were based off of illustrations and photography rather than being created as a foundation to the structure of the site which complicated the experience for the user. Typefaces were also inconsistent, further complicating the cohesion of the site.
USER INTERFACE
BEFORE
AFTER
New colors were chosen to compliment the boldness and vibrance of the products themselves. The softness of the palette works well both as a background and as a guide for following the flow of the sites structure. The logo font will remain the same, but newly selected typefaces provide more coordination and scale to the site.
DELIVER
*Simpler landing page
*Product navigation bar throughout site
*better search system and more info about the maker of the products
DESKTOP SCREENS
MOBILE SCREENS
*better clarity and organization for mobile experience
INTERACTIVE PROTOTYPE
Participants were asked to navigate the mobile site with the following instructions:
- From homepage navigate to items made in Tanzania
- Select an item (specifically beaded clutch Pearl Black White) and complete the purchase process.
- Note any key takeaways for the design team to re-asses elementals
USER TESTING INSIGHTS
After testing with 4 people, here are the main things we learned that will impact the design.
+ on the plus side users were able to navigate the site and follow tasks with ease.
- on the downside, it was not clear to users that items are handmade and the maker receives a large portion of sales.
ITERATIONS
Based on user testing, an “about” page for Rose, the Tanzanian maker, will be added to the site. The page will include information regarding the profits that will go straight to the artisan Rose.
Each product page will include an picture of Rose to help clarify that she was the maker of the products that people are searching.
FINAL PRODUCT
CONCLUSION
This project was particularly interesting because I was the creator of the original website foundt.com therefore approaching the project as stakeholder, product designer, and creative director.
Originally, the site reflected my personal vision, aiming to be artistic, captivating, and different from typical online shopping platforms, with a more personal and relaxed feel.
The site's "homegrown" and "do-it-yourself" characteristics made it endearing and fun, but also made it unclear to users whether it was an online store or more of a blog or journal.
Through my research and design process it became clearer that the main goal of the site would only be reached if the user experience was the prioritized.
Ease of use, organization, and more palatable design choices became the goals of this project and I feel that the current state of the site is a success.
I look forward to relaunching the site and track the analytics to help grow the brand.