Flash Sale
Product Listing Page during the Flash Frame Sale event
Project details
Date: Q3 2023 | Client: Zenni
Role: Product Designer | Tools used: Figma, Figjam
Skills practiced: UX Research, UI Design, Performance Tracking
Project overview
In September of 2023, Zenni ran a Flash Discounted Frame Sale to drive unit sales and encourage return visits. The merchandising strategy was to promote 45 SKUs per day, with new SKUs added daily over the course of 7 days. Frames were eligible for $1 price once customers reached $24 of add-ons through the checkout flow. As lead UX/UI Designer, this project offered a unique challenge of representing the user while balancing the business rules and development requirements.
Project goals
The goal was to sell through all inventory over the course of the marketing campaign. My priority was our customers. I wanted to make sure the conditions of the sale were clear throughout the order process and that the shopping experience was fun and engaging.
User Personas
Michael: Value Seeker
“My glasses need to fit the first time.”
Age: 55-65
Occupation: Retired Engineer
Location: ConnecticutTech-savvy grandparent with kids that are off on their own. He has worn glasses for most of his life. Retired, he needs his glasses to work with him during all his hobbies. He hates having to figure out fit. He does not want to be tricked into any marketing scams.
Michelle: Fashionable Functionalist
“I love Zenni’s unique styles at good prices.”
Age: 60-75
Occupation: Retired Painter
Location: South CarolinaThe maximalist at heart that practices minimalism. She knows good design both looks good and serves a purpose. Her glasses should do the same. She wants to be able to express herself with her glasses. 60 is the new 40. With Zenni prices, she can buy different styles to match her moods.
Michaela: Purposeful Provider
“So great that I can get glasses for my whole family at the usual price of 1 pair from a brick n mortar retailer.”
Age: 35-45
Occupation: Community Marketing Events Director
Location: ArizonaExisting Zenni customer who learned about this sale via Zenni homepage while shopping for back to school. She plans to purchase glasses for herself, two kids, and spouse, but does not want to spend a lot of time doing so.
Scope of work
As UX/UI Designer on this project, I provided the following services:
UX research, including personas, flow map, and competitive audit
UI responsive design compatible with design system
Wireframe development for multiple breakpoints
Design and behavior documentation for Development
Click on an image below to expand it.
Design process
1. Research
To put our customers front and center, I began with the foundational work of building user personas. This helped me understand user pain points, motivations, and end goals. For example, customers attracted to this sale would be price-motivated, but they could be discouraged from completing the purchase if the sale conditions felt unclear like a scam. Next, I conducted a competitive audit to study ecommerce trends for timed promotions. I wanted to see what major brands were doing well and not so well in communicating the sale through the order journey. Finally, I prepared a flow map to lay out which touchpoints I needed to design for the project.
2. Design
With my flow map in hand, I built wireframes in Figma using auto-layout for desktop and mobile breakpoints. My aim is always to design for mobile first, as Contentsquare data shows us that most of our visitors experience our site from their phone or tablet. During this process, I used components from our UI libraries in Figma, which I help maintain as part of the Design System Team. Coming from Production Design, I know the value of a tidy design file with named layers, clear annotations, and accurate styles, so I always build my files to be pixel-perfect for handoff to Development.
3. Review
In a project like this, ideally we would have time for a moderated or unmoderated usability study. However, since the schedule did not allow for it, we shared our design internally for critique. Fellow UX and Product Designers provided great insights based on their industry knowledge and personal experience as shoppers. For example, one insight was to utilize the graphic design asset to communicate conditions of the sale. In addition, a UX researcher shared a Baymard Institute study that showed customers were more motivated to purchase if the stock of product was low. We incorporated both of these insights into our final design.
It’s important to add that we made sure to share our designs early and often with the Development and Customer Service teams. We wanted to make sure that our product features like the Flash Sale product badge and countdown timer were feasible with Development bandwidth. With the Customer Service team, we valued their insights from previous promotions and their expertise on where we could avoid frustration for both our customers and care representatives.
4. Launch
Thanks to our Development Team, we launched the sale as scheduled and monitored conversion over the course of the campaign.
Final results
Demonstration of purchase path customer touch points updated with Flash Sale UI and Content Design
Product Listing Page: Countdown timer; “Flash Sale” and “Sold out” tags on product cards; Graphical assets communicate conditions of promotion
Product Detail Page: “Final sale” marked under price; Additional “Flash Sale” content to communicate conditions of promotion; Continuing to use the yellow color and lightning bolt icon as visual clue throughout user flow
Lens customization: Banner to remind user how to meet conditions; Frame price updated with slash-through once conditions are met
Cart: “Flash Sale” tag on product card; Frame price shown with slash-through to indicate promotion conditions have been met; If glasses are still in user’s cart after sale ends, banner appears to let them know frame price has been updated in cart
Documentation: Provided to Development for any net new features and built in our Figma file as components
Results and achievements
Reached 100% sell through rate of all sellable inventory and doubled minimum net revenue expectation!
Flash Sale PLP converted at a higher rate than site wide conversion, indicating users engaged with sale messaging and found price threshold & frame assortment compelling.
48% of sessions to Flash Sale PLP were returning visitors and converted higher, indicating that clear and consistent Final Sale messaging helped mitigate potential returns.
Future improvements
During our research, we identified the key feature of adding a progress bar during the checkout flow. This visual indicator can do the heavy lifting of communicating to user if promotion conditions are met, and it can also offer feedback to the user on task completion. Progress bars also offer an opportunity for brand expression and creating a fun experience. If we plan to do this type of promotion again in the future, our goal is to work with the Development Team to build out a progress bar, as our goal is always to provide the best user experience.
Credits
UX/UI Designer: Meghan Martin
Site Merchandiser: Abigail Rivera
Program Manager: Henry Chen
Graphic Designer: Margaret Winkler
Content Designer: Tammy Lee
Developer Liaison: Sebastian Geiger