Designing for the Web

Step 1: Develop Your Idea

The problem I am addressing is the pressure to conform to specific identities shaped by social media. While these platforms promote individuality, they often encourage users to adopt repetitive aesthetics and personas in order to gain attention and validation. As a result, self-expression becomes standardized, and people begin to fit themselves into molds. To explore this issue, I will create a conceptual e-commerce website that sells “Influencer Starter Kits.” Each kit represents a different online persona and includes the visual and behavioral elements needed to perform that identity. By presenting identity as a purchasable product, the website highlights how personality and self-image are shaped, packaged, and consumed online. The goal of this project is to make users more aware of how social media encourages conformity under the illusion of individuality, and to prompt them to question how much of their identity is truly their own.

Step 2: Discovery and Research

I visited a variety of successful e-commerce website to gain an understanding of how others are selling their products in a way that is relevent and engaging.

The Glossier website has a minimal but impactful design that captures the viewers attention right away. The name of the company is typed in all caps, a bright yellow font that leaves the viewer with an impact before even getting to the products themselves. The homepage has several different sections, leading into different portions of the website while also leaving customer testimonials at the front so that viewers get a full idea of the brand before needing to leave the page. Is this a good thing? I’m not sure. I want to create a website that intrigues people to engage with the content, not just get a full picture right off the bat. When looking at the individual products, the screen changes to a promotional image when hovering over the box. I like this concept but the rest of the website feels a bit busy so it's difficult to take it in.

Glossier Website Glossier Website

The MSCHF website looks conceptual from the start. The homepage is a list of different items that they sell, and when you click on the names it takes you to another page telling you more about the item. I like this as a use of navigation. It gets straight to the point and there isn’t extra ornament to distract the viewer. Once you get to the information page, the screen is split with information about the product on the left side and pictures on the right. I think this is a good way of dispersing information and is more interesting than the information being on top of one another.

MSCHF Website MSCHF Website

Step 3: Target Your Audience

The primary target audience for this website is young adults and teenagers (lets say ages 16-25) that are frequent users of social media platforms like TikTok and Instagram. This is a group that is exposed to influencer culture, trending aesthetics, and algorithm-driven content, making them more likely to recognize and relate to the personas being commented on. Many of these people are aware on some level of the pressure to present themselves in certain ways, but maybe not of how these identities have become some sort of standard. Another audience includes students, creatives, and people interested in media, design, and internet culture who are more likely to engage with the project on a conceptual and critical level.

Step 4: Introductory Framing and Concluding Call to Action

The website will engage its audience by mimicking the familiar structure of an e-commerce platform, drawing users in with visually appealing “Influencer Starter Kits” that feel recognizable and desirable. By presenting these identities as curated and purchasable, users are encouraged to browse, compare, and even “build” a persona, similar to how they would shop for products online. As users interact with the site, they begin to notice patterns of repetition and exaggeration. This shift from realistic to absurd is intended to make the experience entertaining and unsettling, prompting users to reflect on how these identities are constructed and consumed. After reaching checkout, users will be left to ask themselves whether to proceed with the purchase, or remain themselves. Rather than leaving with a product, the goal is for users to leave with awareness, questioning how much of their identity is influenced by the systems they participate in.

Step 5: Inspiration and Concepts

Moodboard Final

Step 6: Thumbnails and Sketches

Landing Page Thumbnails Ecomm Thumbnails

Step 7: Wireframes and Prototypes

Wireframes Wireframes

Step 8: Photoshop Comps

Web PhotoshopComp Web PhotoshopComp
Phone PhotoshopComp Phone PhotoshopComp
Watch PhotoshopComp Watch PhotoshopComp