Industry
Restaurant + Lifestyle
Date
2023
CASE STUDY
Sweetgreen Website UX
Overview
While placing a pick up order from Sweetgreen, I realized how poor their website’s UX was.
Here’s my feedback of the overall experience and ways to optimize the user flow and ordering UI.
Takeaways
Good
UI is on brand
Great product imagery
Needs improvement
Order flow can be shortened
Menu pages are not optimized
Customization experience is confusing
Needs to be fixed
Poor initial homepage hero imagery
Menu images aren’t clickable
Customers are required to make an account to check out
UX Feedback
Homepage
Needs to be fixed: Confusing hero imagery. The first thing users want to see are items to order or brand imagery but instead they’re shown Sweetgreen’s loyalty program. The images of the app lead to more questions, deterring users from placing an order: Is the program only available on the app? What perks are there to joining?
Good: Clear main navigation CTA. The “Order” button stands out in the navigation bar.
Order
Needs to be fixed: Confusing headline. “Welcome. Introducing Sweetpass…” makes users think they clicked on the wrong link.
Needs to be fixed: Confusing CTA. This CTA is the biggest element on the page and takes users away from placing an order - reducing users chance to convert.
Order location
After clicking on the “Order Now” button, users now see a map with locations.
Good: Preselected “Pickup”.
Good: Correct location.
Menu
Selecting a location shows the menu.
Needs to be fixed: No products above the fold. The location details take up 1/3 of the screen height, wasting space. Users can’t order anything without scrolling.
Needs improvement: CTAs take users out of the ordering funnel. Selecting a “Collections” takes users to a new page instead of jumping adds 2 additional clicks to placing an order.
Harvest Bowl
Good: Use of labels. Using labels like “Popular” shows users they’re making a good choice and improved conversion rate.
Good: Great product imagery.
Customizing the bowl
Needs to be fixed: Unnecessary button. This pencil icon doesn’t allow users to customize their order. Instead it allows users edit the name of “Harvest Bowl”.
Needs improvement: Lack of scroll bar and large ingredient tiles hides “Dressing & details” options. The ingredient tiles and photos look nice, but take up so much room.
Needs improvement: Not optimizing space. The image of the salad takes up a lot of space. If it was smaller the left panel could be wider, allowing users to see the “Dressing & details” section that isn’t currently visible.
Reviewing my order
Needs to be fixed: Unexpected UI. Users see the “Order” page again instead of the menu.
Good: Order is successfully added to the bag.
Check out
Needs to be fixed: No guest check out. Forcing users to sign up could lead to cart abandonment.
Suggestions
Homepage
Current hero CTA on the homepage is confusing because of the imagery and always fills the screen – I thought I ended up on the page to download the app. I suggest:
Updating the hero art so it includes imagery of the salads/bowls with supporting text about the Sweetpass program
Or featuring a salad/bowl, like the new Chicken + Chipotle Pepper Bowl
Show more items – the more products visible to customers, the higher the conversion rate. I suggest:
Updating the layout so there’s more than 3 items are visible at a time
Link the product images to send users into the order funnel
Ordering
The “Order” button in the main navigation should go directly to the locations map
From my usability testing experience, this change should improve conversion rate significantly
Reorder the elements on the menu page so featured items, warm bowls, salads, etc are visible above the fold
Rework the item page UI so it’s easier to customize an order by decreasing the product image size, allowing the customization panel to be wider so users can see “Dressing & details” options
Check out
Add “Guest checkout” as an option
Current check out experience is a barrier for new Sweetgreen customers