Custom Shopify Site
Custom Shopify Site
ludasigns
ludasigns
new orleans, lousiana
new orleans, lousiana
A custom Shopify site for a fair trade, hand dyed garment small business out of New Orleans, Louisiana. I worked closely with the client to determine pain points in the current Shopify site design and execute a complete redesign. My work has given the client the tools to present a more cohesive brand and improve customer experiences.
Bringing the Brand Vision to life.
Bringing the Brand Vision to life.
Bringing the Brand Vision to life.
The client didn't feel like their brand was accurately represented. Here's a snap shot of some changes I made to fix that.
The client didn't feel like their brand was accurately represented. Here's a snap shot of some changes I made to fix that.
The client didn't feel like their brand was accurately represented. Here's a snap shot of some changes I made to fix that.
Brand Colors
Brand Colors
Brand Colors
The client's garments may be full of color but not their preferred color scheme. Here are the adjustments I made to their brand colors to allow the products on their website to truly stand out.
The client's garments may be full of color but not their preferred color scheme. Here are the adjustments I made to their brand colors to allow the products on their website to truly stand out.
The client's garments may be full of color but not their preferred color scheme. Here are the adjustments I made to their brand colors to allow the products on their website to truly stand out.
Logo
Logo
Logo
The Ludasigns logo is sleek and modern, but the color gradient turns the gold and black into a brown that doesn't represent their vibrant garments. Using a brighter gold and a tweak of where the two colors meet changed that.
The Ludasigns logo is sleek and modern, but the color gradient turns the gold and black into a brown that doesn't represent their vibrant garments. Using a brighter gold and a tweak of where the two colors meet changed that.
The Ludasigns logo is sleek and modern, but the color gradient turns the gold and black into a brown that doesn't represent their vibrant garments. Using a brighter gold and a tweak of where the two colors meet changed that.
Defining the Issues.
Defining the Issues.
Defining the Issues.
After creating a Brand Guidelines Document for Ludasigns, I got to work on defining the pain points in the current Shopify site design. In short, from the client- "Everything." These are just a few examples of major issues I found.
After creating a Brand Guidelines Document for Ludasigns, I got to work on defining the pain points in the current Shopify site design. In short, from the client- "Everything." These are just a few examples of major issues I found.
After creating a Brand Guidelines Document for Ludasigns, I got to work on defining the pain points in the current Shopify site design. In short, from the client- "Everything." These are just a few examples of major issues I found.
Uneven Carousels
Uneven Carousels
The carousel in the hero section has drastically different-sized images rendering it nearly impossible to use.
The carousel in the hero section has drastically different-sized images rendering it nearly impossible to use.
The carousel in the hero section has drastically different-sized images rendering it nearly impossible to use.
Undefined Sections & Empty Collections
Undefined Sections & Empty Collections
One of the most significant issues with the previous site is sections left blank with broken links and empty collections, where there was actually inventory of the items missing from the store.
One of the most significant issues with the previous site is sections left blank with broken links and empty collections, where there was actually inventory of the items missing from the store.
One of the most significant issues with the previous site is sections left blank with broken links and empty collections, where there was actually inventory of the items missing from the store.
Footer Section
Footer Section
The full-page footer section features a color and logo that do not represent the Brand. It also has multiple menus navigating to the same places.
The full-page footer section features a color and logo that do not represent the Brand. It also has multiple menus navigating to the same places.
The full-page footer section features a color and logo that do not represent the Brand. It also has multiple menus navigating to the same places.
Product Issues
Product Issues
The client had accidentally created two stores within their Shopify, requiring them to fulfill orders from two "different" shops with different inventories.
The client had accidentally created two stores within their Shopify, requiring them to fulfill orders from two "different" shops with different inventories.
The client had accidentally created two stores within their Shopify, requiring them to fulfill orders from two "different" shops with different inventories.
Before & After
Before & After
Take a glimpse into the before and after shots of the Ludasigns Shopify site after I designed a new custom theme for the client.
Take a glimpse into the before and after shots of the Ludasigns Shopify site after I designed a new custom theme for the client.
Before
Before
With product organization & navigation issues, some collections were presented as empty to customers when inventory was available.
With product organization & navigation issues, some collections were presented as empty to customers when inventory was available.
With product organization & navigation issues, some collections were presented as empty to customers when inventory was available.
After
After
With the collection issues fixed and new professional photos of the garments, customers can easily navigate the site and complete purchases with confidence in the product.
With the collection issues fixed and new professional photos of the garments, customers can easily navigate the site and complete purchases with confidence in the product.
With the collection issues fixed and new professional photos of the garments, customers can easily navigate the site and complete purchases with confidence in the product.
Before
Before
The menu bar and notification bar failed to meet the desired brand standards, and the carousel images were too large to see in full.
The menu bar and notification bar failed to meet the desired brand standards, and the carousel images were too large to see in full.
The menu bar and notification bar failed to meet the desired brand standards, and the carousel images were too large to see in full.
After
After
Now, a more unified brand image is presented with sharp, vibrant visuals that are entirely showcased and a header area that adheres to the brand guidelines.
Now, a more unified brand image is presented with sharp, vibrant visuals that are entirely showcased and a header area that adheres to the brand guidelines.
Now, a more unified brand image is presented with sharp, vibrant visuals that are entirely showcased and a header area that adheres to the brand guidelines.
Before
Before
The full-page footer occupied excessive room on the website and displayed colors along with a logo that were inconsistent with the brand image, in addition to navigation problems.
The full-page footer occupied excessive room on the website and displayed colors along with a logo that were inconsistent with the brand image, in addition to navigation problems.
The full-page footer occupied excessive room on the website and displayed colors along with a logo that were inconsistent with the brand image, in addition to navigation problems.
After
A more compact and streamlined footer adhering to brand guidelines offers a tidier appearance and simplifies navigation for customers.
A more compact and streamlined footer adhering to brand guidelines offers a tidier appearance and simplifies navigation for customers.
A more compact and streamlined footer adhering to brand guidelines offers a tidier appearance and simplifies navigation for customers.
What the users have to say
What the users have to say
What the users have to say
Users were tasked with exploring the home page. Below are a few insights gathered from their remarks.
Users were tasked with exploring the home page. Below are a few insights gathered from their remarks.
Users were tasked with exploring the home page. Below are a few insights gathered from their remarks.
Question 1: Describe your first impressions of the website and what you can gather about the brand. Were you able to locate the product easily? Were there any obstacles or frustrations you encountered during the process?
Question 1: Describe your first impressions of the website and what you can gather about the brand. Were you able to locate the product easily? Were there any obstacles or frustrations you encountered during the process?
Question 1: Describe your first impressions of the website and what you can gather about the brand. Were you able to locate the product easily? Were there any obstacles or frustrations you encountered during the process?
"My first impression is positive, I recognise the tone of the brand and its intention and the arrow pointing down that indicates me that I can scroll down. Then once I scroll, I like how experimental you went with the different alignment for the women with their dresses."
"The website is clear and airy. The products on the homepage are easy to find, and the sorting into categories at the bottom of the page with pictures simply guides you to a specific category."
"My first impression was that the homepage was bright and user friendly. I gathered that the brand sold a range of colorful clothing, and I was able to maneuver the website easily without any issues."
"It’s colorful and eye-catching. I didn’t have any obstacles and thought it was easy to locate the product."
"My first impression is positive, I recognise the tone of the brand and its intention and the arrow pointing down that indicates me that I can scroll down. Then once I scroll, I like how experimental you went with the different alignment for the women with their dresses."
"The website is clear and airy. The products on the homepage are easy to find, and the sorting into categories at the bottom of the page with pictures simply guides you to a specific category."
"My first impression was that the homepage was bright and user friendly. I gathered that the brand sold a range of colorful clothing, and I was able to maneuver the website easily without any issues."
"It’s colorful and eye-catching. I didn’t have any obstacles and thought it was easy to locate the product."
"My first impression is positive, I recognise the tone of the brand and its intention and the arrow pointing down that indicates me that I can scroll down. Then once I scroll, I like how experimental you went with the different alignment for the women with their dresses."
"The website is clear and airy. The products on the homepage are easy to find, and the sorting into categories at the bottom of the page with pictures simply guides you to a specific category."
"My first impression was that the homepage was bright and user friendly. I gathered that the brand sold a range of colorful clothing, and I was able to maneuver the website easily without any issues."
"It’s colorful and eye-catching. I didn’t have any obstacles and thought it was easy to locate the product."
Question 2: Share your thoughts on whether you find the homepage to be informative, visually appealing, and user-friendly. Do you think there's too much content or not enough? What additional information or features, if any, would you expect to see on the homepage to make your shopping experience better?
Question 2: Share your thoughts on whether you find the homepage to be informative, visually appealing, and user-friendly. Do you think there's too much content or not enough? What additional information or features, if any, would you expect to see on the homepage to make your shopping experience better?
"I would expect a brief history of the piece, something that contributed to its creation. But the website clean and elegant. I would buy the Caftan dress easily."
"It probably could be more informative. A sentence or two about the company or its products. But it’s definitely visually appealing and user-friendly."
"Clean, bright, easy to navigate. No additional features needed"
"I liked the little backstory around supporting small producers."
"Homepage is very eye catching, colorful and informative."
"I love it! I had no frustrations and could easily find the product."
"I would expect a brief history of the piece, something that contributed to its creation. But the website clean and elegant. I would buy the Caftan dress easily."
"It probably could be more informative. A sentence or two about the company or its products. But it’s definitely visually appealing and user-friendly."
"Clean, bright, easy to navigate. No additional features needed"
"I liked the little backstory around supporting small producers."
"Homepage is very eye catching, colorful and informative."
"I love it! I had no frustrations and could easily find the product."
"I would expect a brief history of the piece, something that contributed to its creation. But the website clean and elegant. I would buy the Caftan dress easily."
"It probably could be more informative. A sentence or two about the company or its products. But it’s definitely visually appealing and user-friendly."
"Clean, bright, easy to navigate. No additional features needed"
"I liked the little backstory around supporting small producers."
"Homepage is very eye catching, colorful and informative."
"I love it! I had no frustrations and could easily find the product."
Keep reading for the nitty gritty.
Keep reading for the nitty gritty.
Keep reading for the nitty gritty.
I'll go into more detail on the brand guidelines, pain points, and updated features below. If you've gotten all you came for, feel free to head back to my collection of work. Or, go check out the live site.
Thanks for reading!
I'll go into more detail on the brand guidelines, pain points, and updated features below. If you've gotten all you came for, feel free to head back to my collection of work. Or, go check out the live site.
Thanks for reading!
I'll go into more detail on the brand guidelines, pain points, and updated features below. If you've gotten all you came for, feel free to head back to my collection of work, or go view the live site for Ludasigns.
Thanks for reading!
Brand Guidelines
Brand Guidelines
Brand Guidelines
Defining the Issues
Defining the Issues
Brand Cohesion
Inconsistency damaged the brand, failing to reflect the client's objectives. By refining colors, logos, typefaces, and content, the client now showcases a unified brand persona.
Inconsistency damaged the brand, failing to reflect the client's objectives. By refining colors, logos, typefaces, and content, the client now showcases a unified brand persona.
Inconsistency damaged the brand, failing to reflect the client's objectives. By refining colors, logos, typefaces, and content, the client now showcases a unified brand persona.
Navigation
Navigation
The navigation was messy, with multiple menus for the same purpose, sub-menus that separated inventory that was meant to be together, and broken links or sections that had not been set up and lead to nowhere.
The navigation was messy, with multiple menus for the same purpose, sub-menus that separated inventory that was meant to be together, and broken links or sections that had not been set up and lead to nowhere.
The navigation was messy, with multiple menus for the same purpose, sub-menus that separated inventory that was meant to be together, and broken links or sections that had not been set up and lead to nowhere.
Outdated Copy
Outdated Copy
The client had not updated the copy on the site in 5+ years, resulting in misleading or incorrect information. There was also no mention of the fair trade garments used, which is a large selling point for the brand.
The client had not updated the copy on the site in 5+ years, resulting in misleading or incorrect information. There was also no mention of the fair trade garments used, which is a large selling point for the brand.
The client had not updated the copy on the site in 5+ years, resulting in misleading or incorrect information. There was also no mention of the fair trade garments used, which is a large selling point for the brand.
Hero Section Design
Hero Section Design
The hero section spanned two pages in length, rendering it not fully visible upon accessing the site. Additionally, its carousel showcased images of uneven lengths, which impaired user navigation.
The hero section spanned two pages in length, rendering it not fully visible upon accessing the site. Additionally, its carousel showcased images of uneven lengths, which impaired user navigation.
The hero section spanned two pages in length, rendering it not fully visible upon accessing the site. Additionally, its carousel showcased images of uneven lengths, which impaired user navigation.
Product Organization
Product Organization
With the accidental creation of two stores within the shopify site, there was inventory missing from the site as well as duplicated inventory being sold from each store, creating a headache for the client.
With the accidental creation of two stores within the shopify site, there was inventory missing from the site as well as duplicated inventory being sold from each store, creating a headache for the client.
With the accidental creation of two stores within the shopify site, there was inventory missing from the site as well as duplicated inventory being sold from each store, creating a headache for the client.
Broken Links
Broken Links
Due to the theme being severely outdated, there were broken links and bugs that could not be fixed without the implementation of a new theme.
Due to the theme being severely outdated, there were broken links and bugs that could not be fixed without the implementation of a new theme.
Due to the theme being severely outdated, there were broken links and bugs that could not be fixed without the implementation of a new theme.
Footer Design
Footer Design
The footer was excessively large, occupying a full page. It failed to showcase the brand's identity and featured a confusing navigation structure.
The footer was excessively large, occupying a full page. It failed to showcase the brand's identity and featured a confusing navigation structure.
The footer was excessively large, occupying a full page. It failed to showcase the brand's identity and featured a confusing navigation structure.
Photography
Photography
Since the client has moved to professional studio photography for their clothing, not every item featured updated images, resulting in inconsistent visual quality. Additionally, product photos with varying aspect ratios contributed to a cluttered user interface for customers.
Since the client has moved to professional studio photography for their clothing, not every item featured updated images, resulting in inconsistent visual quality. Additionally, product photos with varying aspect ratios contributed to a cluttered user interface for customers.
Since the client has moved to professional studio photography for their clothing, not every item featured updated images, resulting in inconsistent visual quality. Additionally, product photos with varying aspect ratios contributed to a cluttered user interface for customers.
Undefined Sections
Undefined Sections
The undefined sections on the site did not allow users to see all of the collections available, hurting the number of sales seen by the client.
The undefined sections on the site did not allow users to see all of the collections available, hurting the number of sales seen by the client.
The undefined sections on the site did not allow users to see all of the collections available, hurting the number of sales seen by the client.
The finished product
The finished product
The finished product
Browse various features of the revamped site, or explore them on the live site.
Browse various features of the revamped site, or explore them on the live site.
Browse various features of the revamped site, or explore them on the live site.
Dynamic Checkout
Dynamic Checkout
Dynamic Checkout
The updated product screens feature dymanic check out options.
The updated product screens feature dymanic check out options.
The updated product screens feature dymanic check out options.
Interactive hover states for products
Interactive hover states for products
Interactive hover states for products
Updated collections engage customers with interactive product previews.
Updated collections engage customers with interactive product previews.
Updated collections engage customers with interactive product previews.
Customized Checkout
Customized Checkout
Customized Checkout
A customized checkout maintains the brand presence during the entire customer experience, from product exploration to finalizing the purchase.
A customized checkout maintains the brand presence during the entire customer experience, from product exploration to finalizing the purchase.
A customized checkout maintains the brand presence during the entire customer experience, from product exploration to finalizing the purchase.
Thanks for reading.
Thanks for reading.
Thanks for reading.
Feel free to check out more of my work.
Or, go poke around on the live site.
Feel free to check out more of my work.
Or, go poke around on the live site.
Feel free to check out more of my work.
Or, go poke around on the live site.