Our first step was to conduct user interviews, surveys, and competitor analysis to understand user preferences and industry benchmarks for KPIs. From our user interviews, we quickly realized that the normal ecom playbook wouldn't cut it. Acne care and cosmetic products were foreign to our audience, and they needed to know a lot about the product itself to feel comfortable buying it.In similar ecom experiences:
‍
- Standard product pages did little to educate the user
- Users were prompted early on to convert before education could happen
‍
This helped shape our goals for the project:

Our hero product was a medicated concealer that could both treat acne and cover it. This was unlike anything most men had ever seen before. They were familiar with some acne creams but never in a skincolor form.
‍

To account for all user types, we created detailed user personas representing the diverse target audience. We considered factors such as age, preferences, social media usage, and technological proficiency to tailor the design to meet varying needs. In this case, an increasing number of our customers were not the end consumer: more moms of teenage sons were using the site. However, 70% of users were our young male target. As a result, I had to keep both user profiles in mind.

I also analyzed familiar shopping platforms, like Apple.com and Amazon, and other frequently used platforms, like Spotify.

We developed a unique site structure, focusing on presenting the right information at the right time in the user's journey so as not to overwhelm them (a common cause for bounce with the male users). This started out as whiteboarded user flows that we hypothesized would better educate users and optimize for higher AOV and conversion.

I then created interactive prototypes to simulate the user experience in Figma, building out the basic layout and functionality of each page. These functional prototypes we showed to beta users to gather feedback and make iterative improvements to optimize the user flow. Incorporating feedback from usability testing to refine the design and enhance user interactions is essential.

I also worked closely with our engineer Patch Kroll to determine what features would be most difficult to implement technically.

Through a user-centered design approach, our team successfully transformed the FRONTMAN site into a cutting-edge ecommerce platform, providing a delightful shopping experience for customers. Because 75% of traffic was on mobile, we chose a modular block layout similar to Apple that could easily respond to screen sizes and clearly present information.

One of the design's best features broke the cardinal rule of ecommerce: shorten the path from landing to checkout as much as possible. Counterintuitively, we added a page even before the product page where users could not purchase directly.

‍These educational pages had no checkout buttons, rather large mobile-friendly blocks with the product features clearly outlined. We optimized them to hold attention with user videos and gifs.