Team: I was the lead designer. Worked with 1 UX researcher, 1 content strategist, 1 product manager, and 2 front-end developers.
Groupon’s mission is to be the daily habit in local commerce. It provides an online marketplace that connects consumers with local merchants who sell deals on activities, services, travel and goods.
I find the presentation of offers on Groupon’s homepage to be
overwhelming and without guidance for how to find something of interest.
- Groupon User
• The homepage didn’t feel welcoming but was rather overwhelming with no categorization or personalization
• The homepage was not optimized for screen sizes. It wasn't responsive nor was it full-width
• The homepage didn't inspire users and was boring to browse Groupon's inventory
HOW MIGHT WE
How might we elevate the experience of Groupon homepage to be more easy and fun to browse?
New Groupon Homepage
As a designer on the discovery team, I led the end to end design of the new homepage. The new design is intended to have modules that help with the organization of content. The content that goes into these modules was thoroughly thought through, intended to make the browsing experience inspiring. Also, in the process, we designed the new homepage to optimize based on the users’ screen size.
The new homepage design has personalized collections which make the deal offers organized. This makes the page less overwhelming for the users to browse. At the onset, The page greets the user to make them feel welcome. And then it leads into the top three recommended deals for them based on their past browsing history. It further presents the user with other collections- Recently Viewed Deals, Popular on Groupon, Goods under $25 and then All Deals. The collection types are based on user past interaction with Groupon’s content.
Inspirational Category Cards
Majority of the clicks on the past navigation came from the first three local categories. We decided to create three inspirational cards for the top local categories to make them stand out and enhance their visibility. This also aligned with the company’s goal to become a daily habit in local commerce. I collaborated with the individual vertical product managers from those categories to finalize the design of the cards.
The new homepage is full-width which optimizes it for a majority of the desktop screen sizes that Groupon users use. It is responsive and scales down for a smaller screen size to adjust layouts. The full-width homepage makes the optimum use of screen real estate available to the user.
New Carousel Design- GIVING BACK TO DESIGN SYSTEM
We created a new carousel design for a full-width homepage since our existing carousel designs were for a smaller width. I worked with the design system team to design the new carousel, contributing to the design system with a new carousel. We decided to have the carousel headers be bold for easy wayfinding and draw user’s attention. The new carousel was designed to have a card peeking from the end as it helps with the affordance of the carousel. We also designed a new deal card for the carousel since we wanted the metadata to be left-aligned which makes it easier to read.
RESULTS AND LEARNINGS
The feature was shipped and A/B tested. The primary success criteria for the project was increased engagement on the homepage. The experiment was successful and was fully rolled out in North America. Here are some insights:
• After the launch, we saw engagement on the homepage increase by 1.2% driving 10M annual revenue impact.
• The bold category cards saw very high engagement due to their prominence but users were dropping off once they visited the category pages.
This posed an opportunity in testing a version with a less prominent approach.
Collaboration is the key: This project involved working very closely with the backend algorithm team and the data analytics team. Collaborating with them really helped inform a lot of our design decisions.
Contributing to Design System: Our carousel component on the design system was outdated and wasn't designed for a responsive layout. Working on a new card and carousel component with the design system team was a lot of fun. It was my first contribution to the design system. I learned a lot in the process.
Worked with the UX researcher to conduct interviews to understand users' browsing behavior on Groupon. This is when we observed new users experiencing this problem.
We did an extensive competitive inspiration gathering to see what other players are doing on their homepage. This helped us gather a bunch of ideas to give us a head start into the design process.
Iterative Design Next, we started putting our ideas together and refining our thought process. We also started getting feedback indesign critique and stakeholder meetings. This helped us arrive at our final design.
Prototyping Once we had narrowed down to a design, I prototyped the designs and the interactions for a final design handoff.
Shipping I then worked with engineers to build out the design. I also went through one round of design QA to make sure the feature works as expected and looks pixel perfect.
A/B Testing & Analysis We then ran an A/B test for the feature and it was successful. Based on the analysis done by the data analytics team, we decided to test a couple of more iterations of this feature.
Personalization on Groupon
Designed an experience for new users on Groupon to help them start seeing more relevant offers from day one by providing their preferences through an in-feed card.
Buyer Connect is a buyer and seller communication feature for Flipkart's Seller Platform. It helps sellers to answer buyer queries in a fast and efficient way and thus help them reduce returns and incease orders.