Close icon
Case Study

Frenzy Product Page—Redesigning the Shopify Flash Sale Experience

Company / Shopify

Role / Sole designer and front-end developer

Tools / Sketch, Principle, HTML/CSS

Timeline / 4 weeks

Frenzy App screenshot

Context

Frenzy

Frenzy is Shopify's flash sale app used by top streetwear brands. With Frenzy, merchants (brands selling on Frenzy) can sell high demand products like limited edition sneakers through a secure and bot-free platform.

Arrow right

Product Page

The product page is a preview of a specific product advertised by merchants on social media. For example, if Billionaire Boys Club wanted to sell a new pair of Yeezys on Frenzy, the link to the Yeezy product page would be shared on their social media accounts. When the link is tapped, users with Frenzy installed will see the product directly in the app, while those without Frenzy will see the product page.

Arrow right

The product page helps brands convert followers into buyers.

Problem

Frenzy Previous State screenshot on mobile
Frenzy Previous State screenshot on desktop
Frenzy Previous State screenshot on mobile

To scope the problems with the existing solution, I collected feedback from the brands on the platform, first time buyers, and fellow team members.

Buyer

Merchant

Shopify

The product page lacks information buyers need and is difficult to skim through.

The product page looks outdated and boring. Merchants don't want their products showcased like this.

The product page can harm user trust with the company and has no resemblance to the Frenzy mobile app.

Goal

Increase conversion rates by engaging visitors and showing them all the important information of the sale.

Primary KPI

Download button taps relative to new page visits

Competitive Analysis

To gain a better understanding of the branding and architecture of sneaker/streetwear product pages, I explored the websites of Adidas, Nike, as well as multiple high-fashion streetwear brands.

Frenzy Competitive Analysis

Takeaways

Challenges

User Flow

Frenzy User Flow

Sneaker and streetwear brands use Frenzy by first creating a Frenzy sale through their Shopify account. After the sale has been approved, the link to the product page for their sale is provided, and the merchant shares this link through social media. If the user has the Frenzy app installed, the page directly takes them to the product inside Frenzy. On the other hand, those without the app installed see the product page, designed to be a preview of the product that leads users to the app. For this reason, the product page is the most important funnel for user acquisition.

Wireframes

Frenzy wireframes

From my initial sketching, I narrowed the design options down to three main concepts. The first (top left) takes advantage of a large hero image used to capture the user's attention. As merchants choose the best photos to showcase their products, highlighting the product image was an important consideration during the design process.

The second design option (top right) focused on emphasizing Frenzy branding with its wavy line pattern, creating strong visual ties with the page and the mobile app.

Finally, the third option (bottom left and bottom right) focused on balancing emphasizing the value proposition of the Frenzy app with the branding and content of the merchant. In the end, elements of all of these wireframes were used to create the final designs.

Design Options

Option 1

Frenzy option 1 mobile
Frenzy option 1 desktop
Frenzy option 1 mobile

The product image grabs the user's attention and clearly indicates what product is available for purchase, but it also hides the CTA below the fold. For users who want to purchase or view the product in the app, this hero image makes it harder to find where to go through the checkout flow.

Strengths

Limitations

Option 2

Frenzy option 2 desktop

This option puts an emphasis on keeping the download button clearly visible to help users go through the checkout flow faster. Users with context from social media posts can quickly find the link, while those who aren’t exactly sure what Frenzy is can get a sense of the app before committing to download it.

Strengths

Limitations

Option 3

Frenzy option 3 mobile
Frenzy option 3 desktop
Frenzy option 3 mobile

Option 3 was selected for the final designs as the content is easily skimmable and left aligned. The countdown and product name are displayed prominently, drawing attention to the details of the product and next steps to purchase.

Strengths

Limitations

Final Designs

Arrow right
Frenzy final design mobile
Frenzy final design mobile
Frenzy final design mobile
Frenzy final design mobile
Frenzy final design mobile Frenzy final design mobile

Results

The redesigned product page is shipped is now live. The screenshot below is from when Billionaire Boys Club dropped Pharrell's new Human Race NMDs!

Conversion rate increase of over 10% from new page visits

Played key role in driving Frenzy into top 10 in the App Store for Shopping category (from the top 100)

Exceedingly positive feedback from merchants and increased activity from social media shares

BBC drops the new NMD Human Race

October 20, 2018

Frenzy live site

More Projects

Creating a space for Quora's trending content

Picture of Quora Explore page

Designing a productivity app for individuals

Picture of productivity app