The design process began with conducting user research, quantitative research, and a competitive analysis to understand the key performance indicators of a good e-commerce product, identify best practices within the industry I was designing the product for, and to identify the aesthetic tastes, values, and location of my user base.

From there, I created a user persona for my primary audience, an empathy map, and her ideal user journey. During this stage I made sure to make note of potential pain points my user could run into which would cause transaction friction or site/cart abandonment. This helped to inform and optimize my card sorting and overall information architecture.

The first stage in my ‘design’ phase was to use my marketing skills to create a built-out brand template for my imaginary company and design a line of imaginary products utilizing said template. From there, I created high-quality brand image assets and product display images to utilize on my site. To create my logos and brand template I used Adobe Illustrator and InDesign, to create my branded product mockups I used Adobe Photoshop, Illustrator and Canva, and to create my high-quality brand assets and product display images I used Adobe Illustrator and Canva.

From there, I created my page wireframes, my interactive components, and my high-fidelity live page prototypes. I created my wireframes and site prototypes using Figma and my knowledge of HTML, CSS, and JS. My interactive components are all written in React. I utilized Figma Make and LeetCode to test and edit my original components to improve loading times and usability.

Finally, in the testing phase, I ran through my prototypes, using my test results to reduce friction and improve navigation and usability.