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.
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
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
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
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.
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.
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:
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.
Results of Open Card Sorting:
When I was done with the interviews, I pulled out several important pieces of information from each interview. I put them on post-its and organized them as a team into chucks. Once they were all organized I gave each group a name.
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.
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.
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:
