Patel Brothers Redesign

Background

Patel Brothers (patelbros.com) is a popular Indian grocery chain around the US. Their website has many functions like Location finders, Cart, Account, Promotions, and even lets you order delivery online.

Usability Redesign

I redesigned the Home, Shop Now, Locations, a Product Category Page (spices), and a Cart Popup page.

​

Explanation of Improvements:

​

Intuitive Design

• Original Interface: There are multiple horizontal and vertical menus, which make it very confusing. The shopping page has a top “My account…” menu and the regular “Home…” menu, along with a vertical “Store Departments” menu.

• New Interface: All pages - There is only one navigation menu, with bigger fonts for the more important items and smaller for the less relevant items. Locations - much clearer map without errors in it, which seemed like those locations were closed.

Ease of Learning

• Original: Because of how much is on each page, including menus, it can be hard to figure out where to go. Most users do two things: find a store or shop for items. Since “find a store” is front and center on the homepage, that is fulfilled. However, the “shop now” button isn’t on the home page, and blends in with the many other menu items. The home page is confusing because it places a main focus on stores coming soon, and has many other sections as you scroll down. Also, in the shopping section, the categories of food are pretty confusing, like “Canned and Packaged” and “Spices” vs “Spice Blends”. If the user isn’t South Asian, there are no explanations and it can be hard to know what everything means.  

• New: The home page has clear sections for both “Find a store” and “Shop now”, which users I talked to said were the most useful sections to them. This makes it easy for a new user to to find the most important sections. Also, there is only one menu with font sizes that emphasize the most important sections. Because of less categories on the “Shop Now” page, it is much easier to find what you want by category of brand.

Efficiency of Use

• Original: This criteria is mostly about experienced users, who most likely have an account if they’ve used this website multiple times. They probably want to start by logging in, but the login is a small section on one of three menus, and is hard to find.

• New: The login button is much more prominent and on the home page, so experienced users can easily find it. Also, because “Shop Now” is on the home page and more visible, experienced and new users can start shopping immediately.

Memorability

• Original: The website is pretty memorable. Once you know where the “Shop Now” button is, it isn’t too bad to buy items. Other menus are slightly harder to find, even if they’ve used the website before, like trying to find a particular brand of foods - these are located only if you scroll down on the shopping page.

• New: The shopping page now has one menu that has both brands and categories, so you don’t need to scroll down to realize you can pick items by brand. It’s easier to remember how to use the site because the most important use cases are addressed on the home page.

Error Frequency and Severity

• Original: Not too bad. There aren’t a ton of errors that are possible using their interface. One possible error is that the user adds something to their cart accidentally. When you click “Add to Cart”, it has a popup that lets you “go to cart” or “keep shopping”, and if you “go to cart”, there are easy remove buttons for all the items. It is also easy to edit the quantity of items there, or even in the popup that displays, but you have to navigate to the cart first.  

• New: Popup Page - The popup when you “Add to Cart” now has an option to remove the item and change the quantity right there, rather than having to click on “View or edit your cart” and edit those from there.

Subjective Satisfaction

• Original: Users that I asked enjoyed the website, but were definitely confused at first. Many were even surprised that you could buy from Patel Brothers online. The cute images and products evoked a lot of nostalgia and were comforting, but users did not like that Patel Brothers pushed its recipes so heavily. In fact, “Recipes” and “About Us” are the only menu items that display a sub-menu when you hover over it, and these are the least visited tabs. All the recipes have not been reviewed by any users, so the “Discover our most appreciated recipes!” on the Recipes page doesn’t really make sense.

• New: The fun images were kept, as well as the general theme, since many enjoyed it. The Recipes, About Us, and Blog tabs were relegated to less prominent positions on the menu (smaller font), and put at the bottom of the home page instead, so users could focus on the more common use cases, but could still access these sites if necessary.

Visual Redesign

I first chose a reassuring color palette - green and grey, because it reminds people of nature, which is good for a grocery store that sells produce. I didn’t make the colors too pronounced, so they could focus on the text. I also used an image from their “Shop Now” page of people dancing and incorporated it into the top bar with the logo and search bar. I used a grid for everything except the phone to arrange the elements evenly. I used an easy to read, simple font everywhere.

Responsive Redesign

These are mostly in the annotated mockup, but my goals were to minimize the items on the phone as much as possible, so I got rid of many elements. For both the Tablet and phone, I reduced the menu from 6 to 4 items, and just used buttons for them to click the other 2 items. I also made the phone menu a bottom menu, which is just easier for mobile navigation. For 4K, I made the Featured section (and all underneath it) narrower (take up less columns), so I had room for two additional elements: a new store listing and a featured recipe. Because of the full width, I didn’t use a grid for mobile, but I used it for everything else. The regular screen has 20 columns and 20 rows, which the 4K also has. Tablet has 20 rows and 10 columns.