BulkBarn

About BulkBarn

As an avid baker during the pandemic, I found myself ordering items from BulkBarn frequently. BulkBarn is Canada's largest bulk shop retailer offering items from nuts to chips to candies. This project was about reviewing the current site design and redesigning with accessibility in mind.


The first thing I did was analyze the site from a UX perspective. This analysis helped me redesign the site with the user in mind. Continue reading to indulge in the frustrations, pain points, areas of improvement that I identified in my analysis.

UX Analysis

Upon launching the website: https://www.bulkbarn.ca/home-en/ I noticed that the homepage is overfilled with information. The pain points are apparent on the homepage; starting with the Call to action (CTA) button. The CTA button is loud but seems to blur into the background with another CTA. The site does a somewhat decent job at applying the Gestalt principles however, there are some areas of improvement. In the screenshot below, the two elements are so close together that it is almost difficult to distinguish them - this is not how you would apply the proximity principle. A good usage of the proximity principle would be the menu page instead of the homepage. The colors for the both CTAs are exactly the same and the size in comparison is similar aside from the positioning. The homepage should utilize the common region principle by creating a border around the main CTA which will help the user understand that “Order online! Click here” button is more important than everything else.

While scrolling through the homepage I realized that there is definitely a lot going on - there are some promotional slides on the page, recipes on the homepage, an about us video, and then more CTAs for all the different pages on the site. It’s definitely an overwhelming experience and as a user I’m more inclined to close the site and directly go to the store to purchase items as opposed to online. I’ve highlighted the various elements on the homepage using a green square. With an overwhelming homepage, the buttons on the top of the page like the navigation bar, products and store-locator (highlighted in purple), get lost.


Another design problem with the homepage is the different colors that are used for CTAs. In one screenshot, we see a red background with white font. In the next we see green - the problem with the green is that it isn’t used elsewhere - so it almost seems like it was forgotten. As a user, when visiting BulkBarn I often see the colors yellow, black and red everywhere so it seems out of place for me to see green - it definitely does not align with their branding.


Until I scroll down to the bottom of the page, I didn’t realize that BulkBarn offers an insta-cart delivery option. This is a value add for this company and it’s lost by the placement of the insta-cart button.

Color Psychology

Brand color psychology has been around for decades and it defines how colors impact the way a user sees a brand. Users are likely to engage with sites that use their colors wisely as colors evoke emotions and build trust and persuasion. For example, when we think of Coco Cola, the colors red and white come to mind. If a user saw some blue on their site, they may start thinking about Pepsi instead. It’s important to be strategic with your colors and ask yourself “Is the color appropriate for what I’m selling?”. Beyond that, we have to understand that while color association is important to a brand, we want to ignite feelings - perhaps at BulkBarn; we want our users to feel warmth, loved when purchasing our products.

Online Ordering

Upon selecting the online order option, I am presented with another page that looks different in style to the rest of the pages. The search bar works more like a filter, the product images are smaller and the CTA button is now grey. Another odd color on this site. There is no way for me to sign in even though there was a lot of encouragement for me to sign up on the home-page. The navigation button has disappeared and there is no way for me to go back to the previous page. This is another pain point - if users have to spend time figuring out how to navigate your site, they will leave the site.

To start off with, as a user you can access the product page from the homepage or from the navigation button on the top left of any page. The product page uses Gesalt’s similarity principle well by grouping all the elements in one size and adding pictures per product category. The feature I love the most is when hovering over the product category, the pictures increase in size. The problem lies in the fact that the user is continuously scrolling to see all the options and there is no back to the top button.

Navigation bar

Strangely enough, the navigation button moved to the right of the page from the left. This is a pain point for the user - specifically for someone who is not a frequent visitor, they may find it difficult to find the navigation button. Further, when you select the navigation button, the pages are posted horizontally instead of vertically. When using the search bar, it covers the store’s title and there is no guidance with auto-fill. Further, I find it odd that on the product page, I’m unable to add items to my cart and have to select another tab on the navigation bar to get to online ordering. This results in multiple clicks which can be time consuming and frustrating for the user.

I started my design journey from the start - although Bulk Barn does a good job placing all the information on the page - they fail to keep their users interested in the site.

User research

I began by researching Bulkbarn's customer base and wasn’t successful in finding anything online so I had to be creative.


I checked out a few different locations at various different timings and observed the type of customers and the items they bought. After spending a few days doing this, I introduced my project to a few customers walking into BulkBarn? I conducted some interviews by asking them the following questions:


  1. What is your age range?

  2. Do you frequently visit BulkBarn? If so, how frequently?

  3. What type of products do you typically purchase from BulkBarn?

  4. Do you use the online ordering services on the BulkBarn? site?

  5. Do you use the insta-cart delivery service?

  6. Do you prefer coming in store or placing online orders and why?

  7. Do you find the site easy to use and navigate?

  8. What do you dislike about the site? How would you improve the site?


I decided to use interviews to represent the user base as it was an opportunity for me to connect with these users and understand their pain points, frustrations or suggestions.


The interview revealed the following:

1) Less is more

The homepage is overfilled with information which distracts the user from their objective. Users get overwhelmed and end up existing the site.

2) Users want an easy navigation

Users find it difficult to navigate the site - in particular, returning to the homepage and the inability to find key features on the site is inconvenient.


3) Consistency is key

Multiple pages on the site provide an inconsistent experience. Users are more likely to use a site if there is a seamless experience.

User persona

Maria Homes

Age: 60 years old

Occupation: Retired

Marital status: Married

Hobbies: Travelling and cooking

I am a 60 year old retired Store manager. My husband (Jeff) and I both enjoy our time off of work and travel a lot. We love experiencing new cities and indulging in different cultures and their cuisine. Unfortunately during the pandemic, we haven’t been able to travel a lot so I’ve started to cook different cultural foods. However, it’s difficult to find smaller quantities of items (specifically for just 2 people). I’d like to purchase different ingredients from one store in a convenient and efficient manner online as opposed to going into the store to grab things. Jeff and I use the store pick up option often at BulkBarn but we’d really like to just be able to use their site. We have tried to use the site but it’s not exactly easy to use - it’s hard to find the exact items we’re looking for.

Frustrations:

  • Difficult to find small quantities of items for 2 people

  • Site isn’t easy to use

  • Difficult to find items online

Goals:

  • Purchase items online in a convenient manner

  • Search for items through the site

Site Map

Applying my learnings from the Google UX course, I created an information architecture for the Bulk Barn site.

Goal Statement

Our BulkBarn site will let users conveniently add items to their cart which will affect people that want to order online and save time. We will measure the effectiveness of this goal by calculating how many minutes a user spends on our site before proceeding to checkout.