NOTE: This is a mock design sprint and is not affiliated with Beautiful Bastard or Philip Defranco. This is an example of my creative process and design prowess
Project Summary
Founded by Youtuber and online personality, Philip Defranco, Beautiful Bastard is a lifestyle brand that prides itself on its Los Angeles roots, eco-conscious fashion, and high quality products. The client is looking to turn their one-page fan merch store into a modern and innovative streetwear brand. In this hypothetical scenario, I have been tasked with the branding and design of their new e-commerce website. In this case study, I revamp their entire site to have a cool, , clean and professional look while also increasing accessibility to Level AA WCAG 2.2 standards whereever possible.
Contents:
Empathize
— Demographics and Audience
— Inspiration and Competition Research
— User Personas
Define
Ideate
Design (in progress)
— Wireframes and Site Map
— High Fidelity Static Prototypes
— Interactive Prototypes (coming soon)
Test (coming soon)
Empathize
User Demographics and Audience
Age Range: 18-42, with narrower focus on ages 26-40
Gender: Predominately male, with 60% of users identifying as male. Products are unisex and should appeal to all genders.
Target Audience: Young adults looking for a unique way to express themselves, elevating their wardrobe from the basic graphic tee to something that will stand out in a crowd and make them feel good. Our ideal customer follows the trends, has a sense of humor, and cares about where their products come from and who their hard-earned money supports. Our ideal customer shops consciously and supports independent creators with pride.
Things to keep in mind:
— 10% of men are colorblind*
—Gen Z prefer shopping on their smartphones, with only 45% of users using their desktop as their primary device when shopping,**
— Gen Z and Millenials prefer short-form visual content with structured and concise bodies of text
— Gen Z and Millenials are more likely to pay a higher price for a product if it is sourced ethically, supports a small business, and has sustainable practices.
Inspiration and Competition Research
Beautiful Bastard is looking to compete with the top streetwear brands, so I looked at brands such as Bape, Stüssy, The Hundreds, and Undercover for inpsiration. Due to Beautiful Bastard’s emphasis on being Los Angeles-based, I also looked at athleisure brands that also pride themselves on their Los Angeles roots, such as Vans and Juicy Couture (Stüssy and The Hundreds are also LA-based).
Conclusion: The current trend is to have clean, white e-commerce sites with simple graphics and product flats, with straighforward navigationa nd searchable content.
User Personas
With secondary research of buying habits of Gen Z and Millenials, the target audience of Beautiful Bastard, I have compiled these User Personas to use as reference throughout the design process
Define
Now that we empathize and understand the user, it’s time to define the problems that obstruct the user from having the best experience possible. Below are screenshots of the current Beautiful Bastard website as of December 10, 2024.
Here are some of the pain points users might encounter:
• Currently there is little to no navigation, with only a dropdown menu that organizes the products into Collections, subcategories being Core, New, Bestsellers, and Sale. This does not allow users to find the specific product they are looking for or browse by product type.
• There is currently no search function, and products are not equipped with tags to make products easier to find for users who prefer to use the search function. Tags not only help customers find products, but it also improves SEO and informs crawlers of what your store is all about, potentially helping new users find your product.
• Product images are beautifully displayed, but not up-to-date with current trends, with a simple white backgrounds. Contrasting white backgrounds also help low vision users shop with ease.
• Speaking of low vision users, the entire website lacks alt text. making the entire site inaccessible, barring a large population of users from being able to use the site with screen readers and other assistive technology.
• On some products. colors are listed, but on others, descriptions lack visual description, including color, and when it is described it’s hidden in the collapsed details tab. This can make it difficult for colorblind users to shop confidently.
• There is a size guide in a collapsed menu on each product, but all other e-commerce sites researched also have a link to the size guide in the footer. Users might be accustomed to this and might have expectations to find the size guide there.
• The About page is currently wordy, and doesn’t tell us too much about the company and its mission, pledges, or goals. An about section can be a great place to pitch to the user why they should buy from you. This is where users expect to find information on how the company can assist the user in achieving their goals, which can include expressing themselves through what they wear, pledging to support small business or eco-friendly practices, or commitment to buying sweatshop-free.
Ideate
After much brainstorming, here are the solutions I hope to impliment:
• Proper navigation will be implemented, separated by product type. This will help users like Ashleigh, who get overwhelmed without proper navigation, and it will help users like Shaun find his favorite products quicker and easier.
• A search function at the top of the page, implementing each product with tags and alt text so they are searchable within the searchbar.
• Implement alt text on all images, logos and icons. If there is a slideshow banner, implementing a play/pause option. and a way to move to each slide individually. Also, adjust the website to be navigable without a mouse. These features will help increase accessibility and reach some WCAG 2.1 standards.
• Feature product descriptions that describe the product specifications — currently the details are hidden in a collapsed tab.
• A consice About section, highlighting small business, eco-consciousness, sustainability, and pledges whenever applicable.
• Add a link to the size guide in the footer
• Showcase each product as a flat with a white background for consistency and cleanliness. On the product page, photos of models in the products will be featured to show size and fit.
• For users like Shaun, it might be helpful to implent a user profile system so users can save their favorite products and their shipping information.
Design
Wireframes and Site Map
Below are the initial wireframe of the home page for both desktop and mobile as well as a site map. The design is on a grid, making it responsive. Next, if the client doesn’t have any corrections on the wireframe, we will mock up a static high fidelity prototype of the homepage to make sure the client approves of the produch visually before moving on to an interactive prototyoe,.
In certain scenarios, it might be beneficial to create an interactive wireframe to test the product before moving on to high fidelity prototypes, but since this is a basic e-commerce site, the client has chosen to move forward without this step.
Static High-Fidelity Prototypes
To get a good idea of the look and feel of the website, I made this static high-fidelity prototypes pf the desltop and mobile home screens to make sure the design is on the right track before moving on to interactive prototyping. All product photos were made by me to show the products as flats with a plain white background. In the final product, actual photos of the products would be used. Hero images are products of Beautiful Bastard.
Mobile Website
Here is a static high-fidelity prototype of the mobile site so the client can get a feel for the finished product. The “screen” on the right shows the products as the section scrolls to the right
Next up…
Next, I will take my high-fidelity prototypes and make an interactive prototype in Figma to test tge navigation of the site with users. Check back soon for the next part of this project!