E-Commerce Website Branding & Redesign
E-Commerce Website Branding & Redesign
In this freelance project, the business owner reached out to me for help with redesigning her website. Before we started the redesign, I worked with her to define the brand identity, focusing on building customer trust and offering tips for her social media strategy. In just one month, the website's click-through rate went up by 15%, and social media engagement increased by 7%.
In this freelance project, the business owner reached out to me for help with redesigning her website. Before we started the redesign, I worked with her to define the brand identity, focusing on building customer trust and offering tips for her social media strategy. In just one month, the website's click-through rate went up by 15%, and social media engagement increased by 7%.
In this freelance project, the business owner reached out to me for help with redesigning her website. Before we started the redesign, I worked with her to define the brand identity, focusing on building customer trust and offering tips for her social media strategy. In just one month, the website's click-through rate went up by 15%, and social media engagement increased by 7%.
MY ROLE
MY ROLE
Product Designer, Brand and Content Strategist
Product Designer, Brand and Content Strategist
TIMELINE
TIMELINE
July 2023 (2 weeks)
July 2023 (2 weeks)
BACKGROUND
BACKGROUND
Bongart Designs is a creative business founded during the pandemic, offering personalized and handcrafted items such as tote bags, shirts, cups, cards, stickers, and acrylic signs. With a focus on quality, originality, and customization, their mission is to provide a unique and tailored experience that reflects your individual style and personality.
Bongart Designs is a creative business founded during the pandemic, offering personalized and handcrafted items such as tote bags, shirts, cups, cards, stickers, and acrylic signs. With a focus on quality, originality, and customization, their mission is to provide a unique and tailored experience that reflects your individual style and personality.
THE CHALLENGE
THE CHALLENGE
The client's original website had navigation issues, inconsistent design, and unclear product messaging, which led to potential customers dropping off and abandoning the site.
The client's original website had navigation issues, inconsistent design, and unclear product messaging, which led to potential customers dropping off and abandoning the site.
HOW MIGHT WE…
HOW MIGHT WE…
redesign the website to improve navigation, better showcase their personalized, handcrafted products, and highlight their commitment to their craft?
redesign the website to improve navigation, better showcase their personalized, handcrafted products, and highlight their commitment to their craft?
THE FINAL PRODUCT
THE FINAL PRODUCT
Navigate through the updated website below:
Navigate through the updated website below:
How did we get here?
How did we get here?
How did we get here?
Well let's first review the previous website:
Well let's first review the previous website:
At first glance, the site lacks a clear brand identity. The design feels disconnected— from the hero image to the color palette and product photos—while the copy doesn’t clearly communicate what the business offers. But rather than making assumptions, what do users actually think? To find out, I turned to usability testing and user interviews.
At first glance, the site lacks a clear brand identity. The design feels disconnected— from the hero image to the color palette and product photos—while the copy doesn’t clearly communicate what the business offers. But rather than making assumptions, what do users actually think? To find out, I turned to usability testing and user interviews.
USABILITY TESTING
USABILITY TESTING
I conducted usability tests where participants explored the site and shared their thoughts on its design and functionality.
For the landing page, I asked questions like:
• What is this site about?
• What stands out?
• What is it missing?
• What could be improved?
To evaluate usability, I assigned the following tasks:
• Browse the site
• Add an item to the cart
• Proceed to checkout
I conducted usability tests where participants explored the site and shared their thoughts on its design and functionality.
For the landing page, I asked questions like:
• What is this site about?
• What stands out?
• What is it missing?
• What could be improved?
To evaluate usability, I assigned the following tasks:
• Browse the site
• Add an item to the cart
• Proceed to checkout
The following are insights from the usability tests:
The following are insights from the usability tests:
Enhance Product Photos to Build Trust
Enhance Product Photos to Build Trust
• Users suggested using consistent backgrounds, showing models from different angles (especially for clothing), and including close-up shots to highlight product details.
• Users suggested using consistent backgrounds, showing models from different angles (especially for clothing), and including close-up shots to highlight product details.
Improve Communication of Product/Services Offerings
Improve Communication of Product/Services Offerings
• Users experienced confusion regarding what the business offers and specializes in.
• The phrase "customized items" was unclear and failed to specify which items were available for customization.
• Users experienced confusion regarding what the business offers and specializes in.
• The phrase "customized items" was unclear and failed to specify which items were available for customization.
Connect with Users Through Design and Storytelling
Connect with Users Through Design and Storytelling
• Users were worried the website's inconsistent design made it look cheap and unprofessional, leading them to question the quality of the products offered.
• Users wanted to learn more about the business's story to feel more connected and motivated to buy.
"I'm interested in learning why this person started this business. It would give me a more compelling reason to buy something."
-Jenn, User Research Participant
• Users were worried the website's inconsistent design made it look cheap and unprofessional, leading them to question the quality of the products offered.
• Users wanted to learn more about the business's story to feel more connected and motivated to buy.
"I'm interested in learning why this person started this business. It would give me a more compelling reason to buy something."
-Jenn, User Research Participant
• Users were worried the website's inconsistent design made it look cheap and unprofessional, leading them to question the quality of the products offered.
• Users wanted to learn more about the business's story to feel more connected and motivated to buy.
"I'm interested in learning why this person started this business. It would give me a more compelling reason to buy something."
-Jenn, User Research Participant
Increase Accessibility
Increase Accessibility
• Users found the text on the hero image and text buttons difficult to read.
• The CTA buttons were hard to see due to poor contrast.
• Users found the text on the hero image and text buttons difficult to read.
• The CTA buttons were hard to see due to poor contrast.
What I learned from competitors
What I learned from competitors
To better understand e-commerce website design, I explored different websites and social media pages of small business owners. This helped me spot common branding strategies that successful creators use. I then shared these ideas with my client as possible ways to shape her own brand.
To better understand e-commerce website design, I explored different websites and social media pages of small business owners. This helped me spot common branding strategies that successful creators use. I then shared these ideas with my client as possible ways to shape her own brand.
Laying the Foundation
Laying the Foundation
Laying the Foundation
defining the brand identity
defining the brand identity
Branding is important as it sets a business apart from competitors, fosters trust, and establishes meaningful connections with the target audience.
To get a clear idea of the client's business goals, values and target audience, I asked her questions like:
• In one sentence, tell me what your business is all about.
• What do you want to achieve with your business?
• What are your vision and values?
• Who is your primary audience?
Branding is important as it sets a business apart from competitors, fosters trust, and establishes meaningful connections with the target audience.
To get a clear idea of the client's business goals, values and target audience, I asked her questions like:
• In one sentence, tell me what your business is all about.
• What do you want to achieve with your business?
• What are your vision and values?
• Who is your primary audience?
EXPERIMENTING WITH THE RIGHT COLORS
EXPERIMENTING WITH THE RIGHT COLORS
The client preferred a muted color palette with earth tones, so I developed a color scheme to match her vision.
Throughout the process, I prioritized accessibility by using Adobe's Color Contrast Analyzer to ensure readability and inclusivity. I also explained the importance of designing with accessibility in mind to accommodate users with visual impairments and other limitations.
After multiple revisions, I discussed the potential challenges of a muted color palette, particularly in driving user engagement and actions. Based on our conversation, we decided on a neutral base while incorporating vibrant call-to-action buttons, striking a balance between aesthetics and usability.
The client preferred a muted color palette with earth tones, so I developed a color scheme to match her vision.
Throughout the process, I prioritized accessibility by using Adobe's Color Contrast Analyzer to ensure readability and inclusivity. I also explained the importance of designing with accessibility in mind to accommodate users with visual impairments and other limitations.
After multiple revisions, I discussed the potential challenges of a muted color palette, particularly in driving user engagement and actions. Based on our conversation, we decided on a neutral base while incorporating vibrant call-to-action buttons, striking a balance between aesthetics and usability.
The client preferred a muted color palette with earth tones, so I developed a color scheme to match her vision.
Throughout the process, I prioritized accessibility by using Adobe's Color Contrast Analyzer to ensure readability and inclusivity. I also explained the importance of designing with accessibility in mind to accommodate users with visual impairments and other limitations.
After multiple revisions, I discussed the potential challenges of a muted color palette, particularly in driving user engagement and actions. Based on our conversation, we decided on a neutral base while incorporating vibrant call-to-action buttons, striking a balance between aesthetics and usability.
I presented the client with different options and found that keeping her involved throughout the process made collaboration smoother and more efficient. Ensuring the client feels heard and valued is key to creating a design that truly reflects her vision.
I presented the client with different options and found that keeping her involved throughout the process made collaboration smoother and more efficient. Ensuring the client feels heard and valued is key to creating a design that truly reflects her vision.
CHOOSING A FONT THAT FITS THE BRAND
CHOOSING A FONT THAT FITS THE BRAND
When selecting a font, I carefully considered the client’s values, target audience, and brand personality. To ensure the design aligned with her vision, I provided multiple font options for her to choose from.
The font highlighted in red represents her final selection.
When selecting a font, I carefully considered the client’s values, target audience, and brand personality. To ensure the design aligned with her vision, I provided multiple font options for her to choose from.
The font highlighted in red represents her final selection.
EXPLORING LOGO OPTIONS
EXPLORING LOGO OPTIONS
With a clear understanding of the client’s preferences, I sketched a variety of logo concepts, from simple and minimalist to more intricate designs.
To achieve a trendy, artsy feel, I incorporated natural elements and clean lines.
In the end, the client chose option #4 as her final logo.
With a clear understanding of the client’s preferences, I sketched a variety of logo concepts, from simple and minimalist to more intricate designs.
To achieve a trendy, artsy feel, I incorporated natural elements and clean lines.
In the end, the client chose option #4 as her final logo.
With a clear understanding of the client’s preferences, I sketched a variety of logo concepts, from simple and minimalist to more intricate designs.
To achieve a trendy, artsy feel, I incorporated natural elements and clean lines.
In the end, the client chose option #4 as her final logo.
Diving into Website Design
Diving into Website Design
Diving into Website Design
Sketch, Design,
and TESTING
Sketch, Design, and TESTING
I began the website design process by sketching wireframes, focusing on user-friendly layouts and drawing inspiration from other e-commerce platforms.
Next, I created low-fidelity wireframes in Figma and conducted a second round of usability testing.
The feedback and suggestions from users played a key role in refining and finalizing the website design.
I began the website design process by sketching wireframes, focusing on user-friendly layouts and drawing inspiration from other e-commerce platforms.
Next, I created low-fidelity wireframes in Figma and conducted a second round of usability testing.
The feedback and suggestions from users played a key role in refining and finalizing the website design.
FINaL TOUCHES
FINaL TOUCHES
Before adding the final touches, I reviewed my designs to ensure they aligned with the project goals and addressed key issues in the existing site. I then shared user feedback with the client, highlighting usability concerns and areas for improvement that shaped my design approach.
Before adding the final touches, I reviewed my designs to ensure they aligned with the project goals and addressed key issues in the existing site. I then shared user feedback with the client, highlighting usability concerns and areas for improvement that shaped my design approach.
EXTRA CREDIT??
EXTRA CREDIT??
In addition to revamping the website, I highlighted the importance of making the client's social media presence more engaging to drive traffic and boost sales.
To achieve this, I suggested the following strategies:
Adding the website link in the bio
Using icons as story highlight covers
Writing SEO-friendly post captions
Expanding reach by creating more reels
Engaging followers through giveaways, interactive posts, and encouraging shares and likes
Including a clear call-to-action (e.g., "Buy now," "Visit my website," "DM for details") in every post
Switching to a business account to track analytics
View the images below to see the old Instagram story highlight icons alongside the new designs I created:
In addition to revamping the website, I highlighted the importance of making the client's social media presence more engaging to drive traffic and boost sales.
To achieve this, I suggested the following strategies:
• Adding the website link in the bio
• Using icons as story highlight covers
• Writing SEO-friendly post captions
• Expanding reach by creating more reels
• Engaging followers through giveaways, interactive posts, and encouraging shares and likes
• Including a clear call-to-action (e.g., "Buy now," "Visit my website," "DM for details") in every post
• Switching to a business account to track analytics
Check out the images below to see the old Instagram story highlight icons alongside the new designs I created:
BEFORE
BEFORE
AFTER
AFTER
What I Learned
What I Learned
What I Learned
KEY TAKEAWAYS
KEY TAKEAWAYS
Overall, I'm genuinely satisfied with the outcome of this project.
Some key takeaways from this experience:
• Set clear boundaries and communicate proactively - Defining project deliverables in advance and maintaining open communication throughout the process helped create a smoother and more collaborative working relationship.
• Encourage client involvement - Providing a variety of options allowed the client to feel more engaged in the decision-making process while ensuring their preferences were reflected in the final outcome.
• Understand platform limitations early - Reviewing the website’s capabilities before starting the design process is crucial. Some of my initial font choices and design components couldn’t be implemented due to platform restrictions, which could have been avoided with early planning. See examples below.
Overall, I'm genuinely satisfied with the outcome of this project.
Some key takeaways from this experience:
• Set clear boundaries and communicate proactively - Defining project deliverables in advance and maintaining open communication throughout the process helped create a smoother and more collaborative working relationship.
• Encourage client involvement - Providing a variety of options allowed the client to feel more engaged in the decision-making process while ensuring their preferences were reflected in the final outcome.
• Understand platform limitations early - Reviewing the website’s capabilities before starting the design process is crucial. Some of my initial font choices and design components couldn’t be implemented due to platform restrictions, which could have been avoided with early planning. See examples below.
Overall, I'm genuinely satisfied with the outcome of this project.
Some key takeaways from this experience:
• Set clear boundaries and communicate proactively - Defining project deliverables in advance and maintaining open communication throughout the process helped create a smoother and more collaborative working relationship.
• Encourage client involvement - Providing a variety of options allowed the client to feel more engaged in the decision-making process while ensuring their preferences were reflected in the final outcome.
• Understand platform limitations early - Reviewing the website’s capabilities before starting the design process is crucial. Some of my initial font choices and design components couldn’t be implemented due to platform restrictions, which could have been avoided with early planning.
WHAT I WOULD'VE DONE DIFFERENTLY
WHAT I WOULD'VE DONE DIFFERENTLY
Looking back, it would have been more efficient to review the website template upfront and identify any limitations. Doing so would have saved time, as I later had to adjust my design to fit within Square's template constraints.
Looking back, it would have been more efficient to review the website template upfront and identify any limitations. Doing so would have saved time, as I later had to adjust my design to fit within Square's template constraints.
Applying What I’ve Learned in My Job
Applying What I’ve Learned in My Job
This project has taught me the importance of effectively communicating user insights that shape design decisions. In my current role as a UX researcher, I prioritize gathering meaningful feedback through user interviews to better understand their needs, goals, and motivations.
I then share these findings with stakeholders, ensuring that my designs align with both user needs and business objectives. While I provide expert recommendations, I also keep stakeholders involved by offering them choices when appropriate, fostering a more collaborative process.
Additionally, I work closely with the development team throughout the project to identify potential technical challenges early on. Their input helps me assess the feasibility of each feature within the project’s timeline, ensuring a smoother design and development process.
This project has taught me the importance of effectively communicating user insights that shape design decisions. In my current role as a UX researcher, I prioritize gathering meaningful feedback through user interviews to better understand their needs, goals, and motivations.
I then share these findings with stakeholders, ensuring that my designs align with both user needs and business objectives. While I provide expert recommendations, I also keep stakeholders involved by offering them choices when appropriate, fostering a more collaborative process.
Additionally, I work closely with the development team throughout the project to identify potential technical challenges early on. Their input helps me assess the feasibility of each feature within the project’s timeline, ensuring a smoother design and development process.