top of page

Groupon
Enhancing Usability Features on Groupon’s UI & Introducing Dark Mode 

Groupon case study thumbnail (6).png

***Disclaimer: I am not affiliated with Groupon in any capacity. This is not a real project. This is a reimagining of the app and suggesting design improvements.

What is Groupon?

 

Groupon is an e-commerce marketplace with a website and mobile app available for iOS and Android that allows subscribers to browse/purchase products and services for deals and discounted prices. While the majority of deals help promote small local businesses, even a few international conglomerates use Groupon deals to promote their establishments or to purchase their products. Vouchers available include activities, goods and services, and travel. 

Below is a screen recording showing the features of the Current Groupon IOS App:

Current Groupon IOS App

Personal Objectives

I had two main motives for this case study:

  • Create a smoother user experience for Groupon’s app by improving the user interface which is outdated and unorganized.

  • Take full ownership of the various roles involved in designing this product.

role and tools (5).png

Design Process 

groupon design process.png

Target Audience Demographics

Groupon’s current demographic consists of users aged around 18-34 with 77% female users.  Therefore, Groupon aims to provide coupons for services that have the same or a similar target demographic (outdoor activities, massages, restaurants, hotels and other products the current youth like to use.  

Qualitative Research

Aside from collecting app store reviews, I conducted an in person survey with seven Groupon users with five women and two men. Three women were in their 20s to 30s and two teenagers ages 15 and 17. The men were ages 24 and 30. These ages seemed to be a fair representative sample of Groupon’s customer base. In the survey, I asked fellow Groupon users questions about their outdoor activity and online purchasing consumer habits:

  • What motivates you to pay for outdoor activities, travel, goods & services?

    • Cost / Deals 

    • Preferred Type of activity 

    • Meeting Friends

    • Family time 

    • Date / Date Night

    • Birthday / Anniversary

    • Personal Me Time

 

  • Where do you find deals and buy tickets for events or activities, travel, goods & services?

    • Directly from the company website (ex. Theme Parks, Go Kart racing or Spas) 

    • In person kiosk same day /cashier purchase / prior reservations

    • Through influencer discount codes

    • Tik Tok promo links 

    • Instagram promos / Instagram Shop

  • Do you usually research activities, travel, goods & services using the mobile app or website before you make a purchase? 

    • 7 out of 7 (100%) said they browse or shop through apps during downtime or out of work hours.

Quantitative Research

User Survey Results

User survey- validation testing2 - important.png
User survey- validation testing - inconveninet.png

Going Through The IOS App Store Reviews

 

I started looking for reviews on the IOS App Store. There were over 450k+ ratings for the app. While it was difficult to look through a lot of them, I filtered the reviews to look for the most recent up to 2 years old relating to the pain points of user experience and interface. Finding reviews related to these issues was difficult since they were more oriented around the purpose of the app than the experience and design. But I was able to find some reviews where users pointed particularly to their experience navigating through it and the overall design.

Groupon App Reviews - Main (3).png

Usability Testing

To test the app’s user experience, I conducted in-person user research and asked them to perform a few predefined tasks in the iOS app. I also spent a significant amount of time collecting Groupon App reviews in the App Store, singling out reviews related to the User Experience and Interface. I chose the in-person research to get a better understanding of user behavior for the app and see where people instinctively struggled.

Some of the tasks were:

 

  • Find some Groupons you like from the home page.

  • Find your recently purchased or past Groupons.

  • Turn on Dark Mode

  • Use the search bar

  • Find Groupon redeeming instructions

  • Add 10 deals to “Saved” list

  • Remove 4 deals from “Saved” list

  • Find your recently browsed.

  • Remove a cart item / move it to saved list

  • Find a used Groupon you would buy again

  • What do you want to see first as you open the app?

  • Get to the bottom of the home page

  • Find a Groupon deal’s address 

  • Apply a promo code in checkout

  • Check how much you spent overall

 

User responses during the usability tests:

 

  • “Where do I find my purchased Groupons?”

  • “Where’s the night mode?”

  • “There should be a quick save option.”

  • “There’s no dark mode.”

  • “Where’s the address?” (regarding deal containers)

  • “I “Saved” a lot of deals but can’t find the one i'm looking for, too much scrolling”

  • “These [Ended] deals are taking up all the space. Not able to delete all ended deals at once. 

  • “I wanted to see just available saved deals”

  • “Why is this over here?” (regarding notifications tab)

  • “Can't find what I recently viewed” 

  • “How do I go back to the top [from home page]?

  • “One deal takes up the whole home page”

  • “This looks so old, wish it looked cleaner.”

  • “Nothing caught my eye yet (while scrolling), too much scrolling and refresh rate is making me impatient to keep looking. 

  • “How do I remove this?” (regarding cart item)

  • “Why isn’t there a search bar here?” 

  • “Can’t find how much I spent and saved.” 

  • “How do I use this? (Regarding purchased voucher redeeming instructions)

Affinity Map 

I created an affinity map and used it to surface several key issues common amongst participants.

Groupon Affinity Map - Affinity diagram.png

Affinity Map (made on Lucid)

Defining the Problem - Pain Points and Needs

 

After identifying and analyzing pain points through user research, I defined the following pain points that most users had trouble with along with their needs.

Pain Points 

Pain Point 1- Poor Organization & Cluttered Home Page 

Most users clearly stated that the home page was cluttered and not user-friendly. All the users said they had to endlessly scroll the home page to view one deal at a time which later crashes once they go too far; making them start over and lose what they previously viewed. The deals were also uncategorized making it more tedious and time consuming to keep scrolling and looking for a deal they would like. There was no end to the scrolling, resulting in a lag for the next offers to show up. 

Users also wished they could “save” multiple deals that catch their eye while scrolling without having to open the deal page and add it from there. None of them experienced problems with the website version but users preferred to scroll on the app during their down time and mostly used their laptops/computers for work. 

 

Pain Point 2 - Misplaced Purchased Groupon Vouchers

Most users found the location of their purchased vouchers was inconvenient. It was located in the “My Stuff” section with only the thumbnail of one Groupon visible until you click “view all” which opens the whole screen with all purchased Groupons. Some users realized they had some expired Groupons which they didn’t know about because they couldn’t quickly access them when they opened the app. 

In the main Groupons screen, users found the layout a bit confusing. The instructions were at the bottom of the page which most users don't scroll to check until they’re ready to redeem. Due to this, they didn’t know most Groupon activities require appointments in advance before redeeming. The addresses were also unavailable for quick access which was inconvenient when users were ready to go to the location. 

 

Pain Point 3 - Saved list Overflow

Most users said they add a deal they like to the “Saved” list before adding their final choices to the cart. But once they opened the list, there were too many to scroll through that were assorted with the deals that ended that they saved previously. They couldn’t scroll through all and find a specific one they wanted. One example was of a user that had 33 available saved items combined with 19 ended deals. There is no search or filter to find a specific deal they saved. Removing a saved item is also tedious as it has to be swiped or selected one at a time instead of multiple at once.

 

Pain Point 4 - Dark Mode Unavailable

All users said, “Where is the dark mode?”. Unfortunately there is NO dark mode.  When I asked users when they would casually browse shopping apps, almost all of them said they browse Groupon when they are available outside of work hours or at night when scrolling from bed or living room. I asked them if they wished there was a dark mode and they all responded with “YES”. Users stated that most of the apps they use are enabled to dark mode if that feature is available for the app as it’s easier on the eyes and lets them spend more time on it without strain. 

Pain Point 5 - Cart Editing and Notifications Placement 

All users said they didn’t care for the notifications as part of the main bottom navigation bar. They would look at it once but not frequently. The notification alert was always in the way in the bottom nav bar. 

In the cart, users stated that they were unable to remove any items unless the quantity was reduced all the way down to one, which then enabled the “remove” icon. The location was not invisible in the item thumbnail before checkout which prompted users to open the deal and verify before purchase. There is no feature to move the item to the “saved” list if users decided to remove the item and purchase them later, meaning they would lose the item unless they had previously had it in their “saved” list. There is no quick way to apply promo codes during checkout since certain ones work for specific deals and the codes that are entered have to be remembered by the user which is inconvenient. 

Needs of the users

Need 1 - Organization & Customization

Users expressed that they want more deals visible when they open the app and land on the home page. These deals would also prioritize what they previously searched for and what their suggestions could be based on their preferences in a broader view. This would also include reorganizing the layout of certain aspects for easier access and further usability. A quick way to save multiple deals would encourage them to come back to a deal they saw in the thumbnail and look further into the full detail page later. The saved items should also be organized to show what’s available and which have ended. 

Need 2 - Dark Mode

 

Users want to be able to scroll and check out as many deals as they can while in dark mode which provides visual comfort and less eye strain. This would encourage increased user activity in the app.

User Persona  

I created a user persona to put a face on Groupon’s target user and visualize various aspects of their behavior and motivations. This persona was chosen roughly based on the users interviewed during the usability testing.

User Persona - Hasna (6).png

The Redesign

Style Guide And Typography

Frame 241 (4).png
Frame 242.png
Typography (3).png

 

Information Architecture (IA)


Current Information Architecture (IA)

Most users were having trouble finding certain features of the current app. Therefore, in order to redesign the app, I built the information architecture to understand its structure.

CURRENT IA GROUPON.png

Revised Information Architecture (IA)

The revised IA shows an improved reorganization of the app’s key features and add ons within certain features that make it easier for users to navigate within.

Revised IA Groupon.png

Ideation & Low-Fidelity Wireframes (Paper Sketches)

I researched different shopping apps and made observations on which layouts were user friendly. I created sketches for the primary tabs to guide me towards creating the high fidelity designs. This allowed me to prototype the new updates and add ons to differentiate the current interface.

IMG_6724.jpg
IMG_6726.jpg
IMG_6722.jpg


High Fidelity Wireframes - UX Suggestions & Redesign
 

Experience #1: Logo , Landing Page , Sign Up, and Login

landing page logo - groupon.png

Sign Up

Sign up page.png

Login

Login Page (1).png

I’ve decided to redesign the logo to give the app an updated fee and make it stand out. I’ve kept it minimal and easy to understand when it’s spotted. The current groupon logo is just a green “G” which looks very similar to the Google “G” logo. I’ve created an abbreviated lowercase version that spells “grpn”. The design shows  a gradient and the gradient is emphasized on the right side of the “p” to the “n” to highlight the conjoined word “pon”.


I’ve also created a landing page which Groupon currently doesn’t have. The current layout is that after a slight delay it lands directly on the “Sign In” page. I’ve created a new layout that looks more bold and gives the ability to choose the login method. 

Experience #2: Home Page

Home Page - groupon.png

Images Designed by Freepik

Home Page-full scroll (10) - groupon.png

The home page had the most changes for the design. The current home page layout consisted of the location, search bar and cart located on the top bar. The rest of the screen consisted of infinite scrolling of one deal in view at a time. These deals were not categorized and were assorted randomly, which made it hard to navigate and help the user find what they wanted.

 

I added horizontal carousels with better deal previews of multiple products in multiple categories, such as recently viewed, featured, suggestions, etc . These carousels can also be expanded in a new page when the user clicks “see all''. This allows users to see more than one deal when opening the app in a cleaner format.

 

The thumbnail of each deal also includes a quick “save” icon to add to the “Saved” section when scrolling fast without having to take time to open the app and like it and go back to the home page. This would help users come back to the deals they are potentially interested in and view them in detail when it’s convenient for them, following with a purchase of at least one. This would really benefit Groupon in their sales and promote app usage.

Experience #3: My Groupons 

My Groupons (2).png

I moved the notifications icon and replaced it with “My Groupons”; a new icon for the purchased Groupons placed into the bottom bar for quicker navigation. Within this section, I placed a segmented control tab above (“All Groupons”, “Available Groupons” and “Used / Expired Groupons”). The “All Groupons” segment within the “My Groupons” section is where the user can see all the Groupons they have available to use and those already redeemed/expired. The original location to find “My Groupons” was located within the “My Stuff” section followed by multiple clicks to access the bar code to redeem.  Many users felt that this location didn’t help them find it easily or access the app and quickly be able to check if they have any Groupons before they expire. 

The other segments of the “My Groupons” section are Available and Used/Expired. All three segments exist in the current version, but I've added the search bar and filter option to avoid more scrolling. The redesigned thumbnail of the vouchers shows more detail of the voucher such as the address link which helps the user quickly access the location on Google maps or Apple Maps without having to go within. This particular section was the most appreciated by users to quickly access their purchased Groupons and redeem bar codes when opening the app and also see the location without so many steps.

Experience #4: Purchased Voucher Detail Screen

Voucher Page (3).png

I’ve reorganized the layout of the purchased voucher detail screen. The priorities were moved to the top of the scroll for easy access when users access the screen. Many users had trouble figuring out how to redeem their voucher. They also didn’t know an appointment was required 24 hours before heading to many merchant locations to redeem. I’ve also added the address link on top of the screen where users can quickly navigate to maps. 

Experience #5: Saved

Saved (2).png

Groupon has included a “saved” section for users to “save” an item, which adds the product in the “Saved” section in the bottom bar like an essential wishlist to purchase later or look at later. It was easy to “save” an item since there is a heart icon provided on the individual deal detail page. However, the active deals and ended deals would pile up in this list. There was no search bar to search for a particular deal and more people saved more items than they added to cart so they could look back at it later.
 

I added three segments within this section similar to the “My Groupons” screen. This shows “All Saved”, “Available Saved” and “Deal Ended” Saved. I also included a search bar and filter icon, along with a “Select” option that lets the user select multiple to remove at once. I’ve also added the “heart” icon on each deal to quickly remove a deal they no longer want. 

Experience #6: Cart

Cart.png

I added the cart icon to the top bar of each screen for quicker access without having to constantly return to the home page to access it. I gave the items on this screen a visual makeover for coherency, such as including the location. The notification icon is also included on the top if users want to have a look for any updates before checkout.  The quantity button was confusing and the delete option only showed up if the quantity was reduced all the way to one. In each cart item, I've added a “meatball” menu pop up that included the options to “Buy It Now”, “Move to Saved”, and “Remove Item”. I’ve also included a drop down menu of applicable promo codes for the cart items, so users can directly click “apply”  instead of having to remember typing it in or missing out on the additional discounts because they didn’t see the code existed. 

Experience #7: My Stuff (Account)

Account (2).png

This section contains the purchased Groupons, Groupon+ info, account settings, preferences, etc. “My Groupons” are currently accessible only in this section. It was also only displayed as a thumbnail. Users didn’t like that this was practically hidden especially since it’s the main component of the app. I modified this section and removed “My Groupons” since I created its own section. I’ve now added Purchase History in its place so people can check order info and expense if they want.

 

I’ve added four small containers on top that show, “My Groupons quantity”, “Promo Codes quantity”, “Available Groupon Bucks”, and Savings.  These show the number of Groupons available to use (which is clickable and goes to the “My Groupons'' section), number of promo codes available to use (which shows the discounts applicable with a special code), how much Groupon bucks they have, and how much they saved using Groupon. Account Settings and Preferences were also segregated into two different sections. The “Sign Out” button has been separated and displayed more prominently. 

Experience #8: Introducing Dark Mode

dark mode promo (7).png

The current version of Groupon doesn’t include a dark mode feature. Users found it inconvenient as the majority of them have enabled night mode on most of their apps. Users would not be able to leisurely browse. I’ve created the dark mode versions of all the screens and it can be enabled and disabled with ease from the “Account” screen. I’ve created variables for the dark mode reducing the intensity of the colored texts. This would bring more users to use groupon for a longer period of time and more frequently than they normally would.

Functional Prototyping

I used Figma to create a functional prototype of all the screens. 

*** All deal images used for demo in containers were Designed by Freepik.***

Check out the functional prototype HERE.

Usability Testing / Validation Testing

To validate the changes I made, I surveyed the same 7 users I got feedback from. I asked the same questions from my initial testing phase and noted down their behavior and feedback.

Here’s what the 7 users had to say about the redesign:

 

“This is so much quicker to access” (regarding My Groupons screen)

“This [new home page] looks so much better. I can see so much more.”

“I love how organized this is.” [regarding home segregated scroll sections]

“Less scrolling, thank god.” [regarding home screen]

“Love the home page.”

“I love seeing more options here.” [regarding home screen ]

“Wow the dark mode is so cool .”

“Finally , a dark mode.” 

“This looks much more cleaner and organized” (regarding Saved screen)

“I’m glad I can see the addresses in the thumbnail.” (regarding My Groupons & Saved)

“I can access the search bar from any screen?”

“So much cleaner not seeing the ended deals mixed with the active deals”. 

“Glad the notifications tab isn’t here anymore. I barely look at it.” [regarding notifications changed to an icon]

“I can finally remove this”. [regarding removing cart items and moving it to the Saved list.]

“I'm glad I can apply the codes here instead of searching for it. [regarding applying codes directly instead of finding it to type out or copy pasting it.”

“This looks so much cleaner.” [overall redesign]

Results from validation testing:

As a result of the redesign, the success rate for tasks increased to 100%.

User survey- validation testing2 (4).png

Main Challenges

The most challenging part was collecting as many user reviews from the app store less than two years old while trying to spot the ones related to user experience and app interface. Getting enough people for the user research to perform various tasks in front of me was also a challenge but it had gone the way i expected and i’m glad i chose this method. I chose the in-person research to get a better understanding of user behavior for the app and see where people struggled and what they had to say. 

The Groupon voucher information was so detail oriented regarding all the deals that the most challenging part was making sure all the important details were visible for each deal without making it feel cluttered and uninformative. I was nervous but I love being creative and I knew this was the perfect opportunity for me to show my design skills that just keep improving. 

Reflections 

I was excited to redesign this app because I love to design and get a creative opportunity to envision my ideas on an app I've used. But I was nervous because I knew it was going to require a lot of work to make sure I kept the core values and components of Groupon since it contained very detail oriented text descriptions about the deals and less reliance on product visuals. I believe I achieved this while making it look appealing and informative.  

Redesigning this app and working on this case study reminded me that users are the focus of every design decision.  I’ve also seen the impact even the smallest change can have, such as relocating an icon from the bottom nav bar. I learned through each design step what works and what could use improvement. 

I had a great time working on this project and learned so much while working on it. I hope you enjoyed reading about it too. Be sure to check out the functional prototype to see all the changes and check out the new dark mode feature!

The End! Thank you for reading!

bottom of page