Project Overview


Paper, Sketch, Photoshop, Axure


2 week design sprint




Users like to buy fresh groceries online, but the client does not have an online shopping cart where people can buy their food products.

I believe that by modernizing and redesigning my client's website, more of their customers will shop online. I planned to redesign the website with a clean look that includes a functional online shopping cart experience where people can browse and buy available food supplies/products.

Percentage of users that are looking forward to shop groceries online, especially parents with kids in the house will over-index.




Make the checkout process easy and painless. Add a checkbox for the shipping address and information. If shipping address is different than the billing address, the user can select it

ABOUT the client


I had to select a local store that carried 100+ items in the store and did not have e-commerce. I decided to pick ALDI as my client. ALDI is a supermarket chain with over 10,000 stores in 20 countries. The store that I picked up is located in North Connecticut. They offer an array of products like food, beverages, inexpensive household items, gardening stuff and books as well as perfect things for every season from winter to summer.

Facts and figures about Aldi:
  -  More than 300 products on display each day
  -  Average customer is between the age of 25 and 80
  -  Best selling items are deli, fresh vegetables, milk, canned food and snacks
  -  Less number of employees to maintain the low prices of the products
  -  Summer is their busiest time of year
  -  Aldi has 307k instagram followers

ThE Current Website


While ALDI's in-store experience incorporates the idea of browsability, the only means of exploring and shopping the products online is through the search bar, offering zero options for product discovery. I wanted to find a path to bridge the gap between the off-line and on-line experiences, but first I wanted to know: how do busy people pick and shop for groceries? And how can I create a more explorable website revamp that experience?



User Research, IA, User Testing, Wireframing, Interactive Prototype

The Process


In order to create an effective way for users to shop online so that users will become more confident while shopping for grocery online rather than in-store.

Go to Design Process

Competitive analysis


Aldi's biggest competitor is Walmart. Stop & Shop, Walmart and Shoprite are their main competitors. The comparative analysis that I made was in terms of the things like prices in pantry, availability of goods, how fast the check out process is.

Research/Initial assumptions


I decided to interview some shoppers who had no time to go to the store to buy groceries. I wanted to figure out how many people shop online for groceries and if they do, how do they go about browsing. You can check out the overall result of the screener Typeform result report. Here is the full screener survey Typeform.

I constructed a screener survey to help me figure out the overall demographics about grocery shopping. Out of 24 screener participants, only 5 individuals had met the criteria. Below are some snapshots of the results from the screener. I asked them questions such as:

Screener Survey Question: What is your opinion of Venmo?
Screenshot: Do you support any charity?

Card sorting


The solution to have an effective e-commerce website is making sure that the information architecture is clear for the user. Aldi has about 300 or more products in store at all times. That is a whole lot of items that needs to be managed. This is where card sorting came into picture. I did 3 open card sorts using survey Milanote to help figure out the right categories. It turned out that my users had the same idea, but used different taxonomy. I gathered the data from the 3 close card sorts before I finalized my categories. Card sorting turned out to be extremely insightful.

user flow & Sitemap


I came up with these flows from research and card sorting. I began creating the site map of Aldi. This was an activity that I was familiar with sitemap. It is site design(mapping) that I used to make in my previous work places. I decided to have 5 main navigation categories and then several subcategories within each of those. I wanted to create a sense of organization without making it too formatted.



I had a vision for the new and improved ALDI website. So I began my sketching after browsing the sites of other supermarkets. I really liked the idea of having a sub-menu and mega menu like most of the big name brands had. I began by sketching that element and moved from there to the product pages. I knew I needed to make a cart pop-up screen as well, so I drew out an idea that showed all of the product information and also let the user browse other similar items.

High Fidelity Mockups


After sketching on paper, I was ready to move into Axure. Axure was a new tool for me and willingness to learn was strong, and once I started working on it I was able to make my sketches come to life. I settled on the home screen with some visually good colors. I decided to use the photos I took from visiting the ALDI store and make it into a carousel to give the page some jive.

Final Digital working prototype Link


I was done with all my pages and visual design in Axure. Give it a try using the scenario described below and check out the Prototype here.

Scenario: You are a super busy mom with 3 kids and you hate wasting your time standing in the long checkout lines. You figured that there is a new service added by ALDI for online grocery shopping. And you already have added items in your cart and now you forgot to add the Carrots and Salad in the cart. Here are the steps, check out in the video below: