Build-A-Brand Website
The Problem
The 99% Invisible podcast producers wish to create a website to promote their new pop-up shops based on their “Knockoffs” episode. The episode explores the history and accessibility of counterfeit products. The website’s primary objective is to provide e-commerce access to knockoff merchandise.
The Process
Research & Inspiration
To guide the website development process, I listened carefully to the “Knockoff” podcast episode and took detailed notes. I drew inspiration from the prominent personalities featured in the episode who experienced both ends of the knockoff process.
Decisions
While the website was intended to sell knockoffs online, I wanted to make the site more unique and appealing to users. I decided to make the knockoffs for purchase customizable by the users for greater autonomy.
While driving users to the website aids in sales, it was important to inform the users of the benefits of going to the pop-up shop in person. Therefore, I combined both in-person events and online shopping. The two speakers provide a sense of reasoning behind selling knockoffs and how their lives were shaped by the production and distribution of counterfeit products. This helped bolster the site’s purpose.
Design
Making a multipage website requires navigation, information, and interface design. To successfully gather information in a way users can understand it, creating information architecture was my first step. This provided a solid foundation for the layout.
The next step was to create wireframes of all the webpages for the site. This helps visualize how navigation and interface design intertwine to create a seamless website.
It is crucial to have a consistent color palette and design throughout so that the user can easily navigate the site. Before designing, creating a visual language document that showcases color, typography and interactive elements can help speed up the design process.
For my homepage’s initial design, my idea was to have a featured section displaying the key speaker of the pop-up shop. However, this made it confusing for the users because it did not provide an explanation for the goal of the site. I enhanced the design by illustrating the process of creating a knockoff, thus allowing the users to recognize the site’s function.
Moving on to the other pages, I built a consistent design that needed few adjustments before becoming the final product.
The Solution
Insights
On the “workshop” page, when customizing a knockoff design, the generator creates a basic example of what the website would produce. To make this more appealing and realistic, I constructed a mockup of a more accurate knockoff. I also learned that grays can be difficult to work with depending on their tint. At first, it was my vision to use light grays. I realized that can often look too drab and not show enough contrast, so I chose a shade of gray making the design elements more noticeable.