Who is Royal Blue Grocery?

Royal Blue Grocery is a compact urban grocery market that opened its doors in Downtown Austin in 2006.

There are locations in Downtown Austin, Dallas, and San Antonio.

Each Royal Blue is different from the next, tailored specifically for the neighborhood it serves, and the people who frequent it every day

To keep up with the current e-commerce marketplace, Royal Blue Grocery needs to give customers the ability to purchase groceries online with the same quality & selection as their brick-n-mortar locations.

Competitive Market Analysis- allowed me to compare the strengths, weaknesses, opportunities, & advantages of each business. Additionally, It helped to ask what is working & what is not? What features would users expect to see & what is lacking?

Personas- were built from observation & guerilla surveys taken outside of a local Royal Blue Grocery. My approach was to identify users who were already loyal customers & users who have purchased groceries online prior. Through this method, I could focus on product variation/selection, efficiency, & customer experience.

I was influenced by the layouts from both 7- Eleven & Instacart for my design. 7- Eleven helped with my site organization & information architecture, as the department categories for Royal Blue are much different than that of a grocery store.

Additionally, Instacarts layout would prove beneficial in giving the site an updated feel that wasn’t overly modern, as well as the ability to house a lot of content without looking too crowded.

I conducted usability testing with five of my target users & asked them to complete the following tasks:

1. Product searching: Penne Pasta
2. Pulling up detailed information about a specific item: Merlot Wine
3. Complete their purchase by working through the check out process.

Notable takeaways:

• Shoppers ❤ search bars. This was not a feature I intended on building out, but since it became testers first instinct to navigate the site, It was added during iterations.
• Users didn’t know that the hero image was the only way to enter the online shop. By adding an icon next to the search bar & by breaking up the hero image with text blocks + CTA, the issue was solved & gave multiple pathways into the online shop.

Notable Take-away

In earlier designs, there were too many categories, which confused users on which option to select. Less is more & optimizing on Information Architecture ultimately lead to a cleaner, more organized Department section.

Solution

This redesign solved many of Royal Blue Grocery's pain points. Allowing for more straightforward navigation, product information, & more importantly, the ability to complete a purchase, which overall will increase revenue.