Overview
The adventure began when a team of four passionate designers, including myself, was tasked with a thrilling challenge: revamping the website of Gully Klassics, a vibrant streetwear company. The mission was clear but ambitious: to elevate the site’s appeal and functionality, drawing in more customers and showcasing the brand's unique style.
My Role
As a UX Design Intern at Gully Klassics, I led the redesign of key website features, including the filter functionality, side cart, and product details page. My role involved enhancing the filter system for better search precision, improving the side cart for clearer item information, and reorganizing the product details page to streamline user experience.
Overview
Overview
The adventure began when a team of four passionate designers, including myself, was tasked with a thrilling challenge: revamping the website of Gully Klassics, a vibrant streetwear company. The mission was clear but ambitious: to elevate the site’s appeal and functionality, drawing in more customers and showcasing the brand's unique style.
The adventure began when a team of four passionate designers, including myself, was tasked with a thrilling challenge: revamping the website of Gully Klassics, a vibrant streetwear company. The mission was clear but ambitious: to elevate the site’s appeal and functionality, drawing in more customers and showcasing the brand's unique style.
Gully Klassics
Gully Klassics
Website Revamp Development
Website Revamp Development
PROJECT DETAILS
Heuristic Analysis
I kicked off our journey by conducting a heuristic analysis to spot any obvious usability issues on the current website. This process was crucial because it allowed me to pinpoint where users were most likely to encounter issues.
User Testing 1
User Testing 1
Armed with knowledge from heuristic analysis, I turned my attention to usability testing of current website. I knew that to truly enhance the user experience, I needed to understand the frustrations and obstacles users currently faced. The target users are primarily millennials and Gen Z, who represent the brand's core audience.
Armed with knowledge from heuristic analysis, I turned my attention to usability testing of current website. I knew that to truly enhance the user experience, I needed to understand the frustrations and obstacles users currently faced. The target users are primarily millennials and Gen Z, who represent the brand's core audience.
Some participants struggled to a product due to incorrect and missing color options on product pages.
Some participants struggled to a product due to incorrect and missing color options on product pages.
All participants highlighted the need for additional filters, such as size, fit, type, sale, product and gender with some struggling to find specific options like color and product type.
All participants highlighted the need for additional filters, such as size, fit, type, sale, product and gender with some struggling to find specific options like color and product type.
They didn't like that the cart overlay view lacked detailed information about the added product, such as size or color options, leading to uncertainty about their selection.
They didn't like that the cart overlay view lacked detailed information about the added product, such as size or color options, leading to uncertainty about their selection.
Product Structure
Product Structure
Product Structure
During redesign, we found the existing site map cluttered and full of non-functional pages and various social media links, complicating navigation. We streamlined the categories in the new site map, ensuring all essential sections had clear, functional links to product pages and crucial information.
During redesign, we found the existing site map cluttered and full of non-functional pages and various social media links, complicating navigation. We streamlined the categories in the new site map, ensuring all essential sections had clear, functional links to product pages and crucial information.
During redesign, we found the existing site map cluttered and full of non-functional pages and various social media links, complicating navigation. We streamlined the categories in the new site map, ensuring all essential sections had clear, functional links to product pages and crucial information.
Updated Sitemap
Updated Sitemap
Updated Sitemap
User Flow
User Flow
User Flow
We focused on creating detailed user flows to enhance the shopping experience. We wanted to see how users would navigate the website to find specific products and add items to their cart.
We focused on creating detailed user flows to enhance the shopping experience. We wanted to see how users would navigate the website to find specific products and add items to their cart.
We focused on creating detailed user flows to enhance the shopping experience. We wanted to see how users would navigate the website to find specific products and add items to their cart.
Find Specific Product Using Filters
Find Specific Product Using Filters
Find Specific Product Using Filters
Find Specific Product Using Filters
Find Specific Product Using Filters
Find Specific Product Using Filters
Add item from one of the collections to the cart
Add item from one of the collections to the cart
Add item from one of the collections to the cart
Add item from one of the collections to the cart
Add item from one of the collections to the cart
Add item from one of the collections to the cart
With our user flows in hand, we transitioned to creating low-fidelity wireframes. This phase was particularly challenging due to our team being spread across different locations. Despite the distance, we used collaborative tools and maintained constant communication to stay aligned.
With our user flows in hand, we transitioned to creating low-fidelity wireframes. This phase was particularly challenging due to our team being spread across different locations. Despite the distance, we used collaborative tools and maintained constant communication to stay aligned.
With our user flows in hand, we transitioned to creating low-fidelity wireframes. This phase was particularly challenging due to our team being spread across different locations. Despite the distance, we used collaborative tools and maintained constant communication to stay aligned.
Home page
Home page
Product list page
Product list page
Product details page
Product details page
User Testing 2
User testing was a crucial part of our redesign process because we needed to ensure our changes would truly enhance the user experience. By getting feedback directly from our target audience we could understand their real-world interactions with the site and identify any remaining pain points.
Filter Feature: 90% of users found it much easier to use, helping them find products more quickly and efficiently.
Side Cart Functionality: We needed to ensure that the improved side cart provided clear and useful information. 70% of users felt more confident about their selections, reducing their likelihood of abandoning their carts.
Product Details Page: We aimed to make key information more accessible and user-friendly. 80% of users said the revamped product details page made their shopping experience better by making important details easier to find and understand.
Smarter Search: Enhancing the search function with better filters, predictive text, and voice search will make finding products a breeze.
Community and Social Features: Creating a space where users can share reviews, photos, and style tips, and integrating social media, will help build a stronger connection between our brand and our customers.
Enhanced Wishlist Functionality: Improving the wishlist feature to allow for easy sharing and notifications for sales or restocks can keep users engaged and returning to the site.
Mobile-Friendly: Optimizing the site for mobile users will ensure that shopping is smooth and easy, no matter what device they use.
Duration
2024 May - June
2024 May - June
team members
4 UX/UI Designers
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
Heuristic Analysis
Heuristic Analysis
We kicked off our journey by conducting a Heuristic Analysis to spot any obvious usability issues on the current website. This process was crucial because it allowed us to pinpoint where users were most likely to encounter issues.
We kicked off our journey by conducting a Heuristic Analysis to spot any obvious usability issues on the current website. This process was crucial because it allowed us to pinpoint where users were most likely to encounter issues.
PROJECT DETAILS
Overview
The adventure began when a team of four passionate designers, including myself, was tasked with a thrilling challenge: revamping the website of Gully Klassics, a vibrant streetwear company. The mission was clear but ambitious: to elevate the site’s appeal and functionality, drawing in more customers and showcasing the brand's unique style.
Heuristic Analysis
We kicked off our journey by conducting a Heuristic Analysis to spot any obvious usability issues on the current website. This process was crucial because it allowed us to pinpoint where users were most likely to encounter issues.
PROJECT DETAILS
My Role
As a UX Design Intern at Gully Klassics, I led the redesign of key website features, including the filter functionality, side cart, and product details page. My role involved enhancing the filter system for better search precision, improving the side cart for clearer item information, and reorganizing the product details page to streamline user experience.
User Testing 1
Armed with knowledge from our heuristic analysis, we turned our attention usability testing. We knew that to truly enhance the user experience, we needed to understand the frustrations and obstacles users currently faced. Our target users are primarily millennials and Gen Z, who represent the brand's core audience.
Participants struggled to a product due to incorrect and missing color options on product pages.
All participants highlighted the need for additional filters, such as size, fit, type, sale, product and gender with some struggling to find specific options like color and product type.
They didn't like that the cart overlay view lacked detailed information about the added product, such as size or color options, leading to uncertainty about their selection.
Updated Sitemap
Home page
Product list page
Product details page
Future Scope
Looking ahead, I see some exciting opportunities to make the Gully Klassics website even better:
Smarter Search: Enhancing the search function with better filters, predictive text, and voice search will make finding products a breeze.
Smarter Search: Enhancing the search function with better filters, predictive text, and voice search will make finding products a breeze.
Community and Social Features: Creating a space where users can share reviews, photos, and style tips, and integrating social media, will help build a stronger connection between our brand and our customers.
Community and Social Features: Creating a space where users can share reviews, photos, and style tips, and integrating social media, will help build a stronger connection between our brand and our customers.
Enhanced Wishlist Functionality: Improving the wishlist feature to allow for easy sharing and notifications for sales or restocks can keep users engaged and returning to the site.
Enhanced Wishlist Functionality: Improving the wishlist feature to allow for easy sharing and notifications for sales or restocks can keep users engaged and returning to the site.
Mobile-Friendly: Optimizing the site for mobile users will ensure that shopping is smooth and easy, no matter what device they use.
Mobile-Friendly: Optimizing the site for mobile users will ensure that shopping is smooth and easy, no matter what device they use.
Future Scope
Looking ahead, I see some exciting opportunities to make the Gully Klassics website even better:
Looking ahead, I see some exciting opportunities to make the Gully Klassics website even better:
Future Scope
Looking ahead, I see some exciting opportunities to make the Gully Klassics website even better:
Smarter Search: Enhancing the search function with better filters, predictive text, and voice search will make finding products a breeze.
Community and Social Features: Creating a space where users can share reviews, photos, and style tips, and integrating social media, will help build a stronger connection between our brand and our customers.
Enhanced Wishlist Functionality: Improving the wishlist feature to allow for easy sharing and notifications for sales or restocks can keep users engaged and returning to the site.
Mobile-Friendly: Optimizing the site for mobile users will ensure that shopping is smooth and easy, no matter what device they use.
gully klassics
Website Revamp Development
Website Revamp Development
role
UX Designer
duration
2024 May - June
teaM MEMBERS
4 UX/UI Designers
My Role
My Role
As a UX Design Intern at Gully Klassics, I led the redesign of key website features, including the filter functionality, side cart, and product details page. My role involved enhancing the filter system for better search precision, improving the side cart for clearer item information, and reorganizing the product details page to streamline user experience.
As a UX Design Intern at Gully Klassics, I led the redesign of key website features, including the filter functionality, side cart, and product details page. My role involved enhancing the filter system for better search precision, improving the side cart for clearer item information, and reorganizing the product details page to streamline user experience.
User Testing 2
Filter Feature: 90% of users found it much easier to use, helping them find products more quickly and efficiently.
Side Cart Functionality: We needed to ensure that the improved side cart provided clear and useful information. 70% of users felt more confident about their selections, reducing their likelihood of abandoning their carts.
Product Details Page: We aimed to make key information more accessible and user-friendly. 80% of users said the revamped product details page made their shopping experience better by making important details easier to find and understand.
User testing was a crucial part of our redesign process because we needed to ensure our changes would truly enhance the user experience. By getting feedback directly from our target audience—millennials and Gen Z—we could understand their real-world interactions with the site and identify any remaining pain points.
Redesign Highlights
Redesign Highlights
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
User Testing
User testing was a crucial part of our redesign process because we needed to ensure our changes would truly enhance the user experience. By getting feedback directly from our target audience—millennials and Gen Z—we could understand their real-world interactions with the site and identify any remaining pain points.
Filter Feature: 90% of users found it much easier to use, helping them find products more quickly and efficiently.
Side Cart Functionality: We needed to ensure that the improved side cart provided clear and useful information. 60% of users felt more confident about their selections, reducing their likelihood of abandoning their carts.
Product Details Page: We aimed to make key information more accessible and user-friendly. 70% of users said the revamped product details page made their shopping experience better by making important details easier to find and understand.
Redesign Highlights
Redesign Highlights
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
FILTER FEATURE
In the original design, the Gully Klassics website's filter feature was quite basic. It only had a simple price slider and availability checkboxes, making it difficult for users to narrow down their choices effectively.
REDESIGN
With the new design, we transformed the filter feature into a much more comprehensive tool. Now, users can filter by size, clothing type, color, gender, collections, and sale items.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
PRODUCT DETAILS PAGE
The original product page for Gully Klassics' lightweight bomber jacket was cluttered, with dense information and multiple images all on one page, making it difficult for users to navigate and focus on key details.
REDESIGN
The new design is clearer and more user-friendly, with organized sections for images, pricing, and color options. The sidebar for size selection and expandable detail sections streamline the shopping experience.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.
SIDE CART
In the current side cart, the design is quite basic. It shows a single product with options to adjust the quantity or remove the item.
REDESIGN
The side cart now includes detailed product information, such as color and size, providing a more comprehensive view of the selected item.