As we progress onto Week 3 and Week 4 of the UXDI course, the two weeks had been dedicated to the second project —The E-commerce Project.

The class was divided into three groups. Competitor Analysis and site visits were done groups, the rest was individual work.

Project Scope

We were given a project brief of a hypothetical called Sunshine Foods, a local groceries located near Liverpool Street Station since 1998. The business saw opportunities to support the local community by allowing people to order some products online, and either have them shipped to their home or work, or picked up at the .

The business model is based on customer service, reasonable pricing, and keeping it local.

Through the new e-commerce , Sunshine Foods wants to showcase their products, while maintaining their brand image.

…which is to maintain the consistency of their in-store service of providing great customer service to their customers, by translating the brand values of personal touch and seamless shopping experience onto their online operation.

What the brand wants.

Some prioritization work has already been done with the client, and they have specified what can be included in the website. They provided a list of specifications which is broken down into MUST— SHOULD — COULD — WON’T. For better understanding, I summarized the information into the following picture.

Summary with my notes
Summary of Sunshine Foods brief

Meet Robert

Along with the project brief, we were given a user persona. Before we go into the details of project, let’s get to know our end-consumer — Robert.

He supports local business and values real life experience. He has frustrations that we want to look out for in creating our online service, which are:

  1. Long lead times on items
  2. Speaking to owners who are not knowledgeable
  3. Doesn’t like to wait in queues.

In addition, I conducted two user interviews with Sarah and Rich, a vegan couple that loves to cook and often shop for organic groceries.

I asked them about their online and offline shopping behavior and found that they are frustrated with searching for each product on their shopping list, search by search — meaning that they have to click on the search bar each time they look for a different product. This learning sparked an idea of a shop by shopping list feature for Sunshine Foods.

User Journey — Shopping Online & Shopping In-Store

Defining Personalization

I took the business goal, user’s needs, and competition into consideration as I design for Sunshine Foods e-commerce website. I wanted to make sure that my idea fits with the Sunshine Food’s brand value of personal touch.

The heart of this idea is to enable customers to search for products with a single click. It’s a mental map translation of an offline experience — as if our staff is shopping on your behalf, all you need to do is give them your shopping list.

What this “Shop by shopping list” feature will do:

  1. Eliminate hassel — multiple clicks, going back and forth between webpages.
  2. Saves time unlike searching for products, one item at a time.
  3. Personalization — able to adjust and shop his lists accordingly

I think it is practical as Robert knows what he wants — he has a shopping list and he shops it regularly.

Competitor Analysis


To get a better understanding of the situation, we visited several competing local stores in the area besides Amazon Fresh, to see their offline operations.

Store visits with the team

Sunshine Foods sells organic products and offers a highly-curated inventory, focusing on hand-picked quality over quantity. The online stores were factored into the competitor analysis as they provide similar product offerings.

I learned of shoppers in-store shopping behavior that they usually wander around the store to find a product, and they often feel overwhelmed by the aisle with several products varieties. Hence, the website should not elicit an overwhelming experience to the our online shoppers as we don’t want to translate their frustration onto a platform where users is one click away from switching to other stores.

I also checked with the competitors website to see their online service offerings, and this is the comparison of the main features.

As mentioned earlier about my ideal solution to the user problem. Apparently, the idea of shop by shopping list overlaps with Waitrose’s multi-search, which made concerned me about the client’s goal of wanting to differentiate their online service. However, the idea doesn’t go in vain. This feature may have similar back-end mechanism, but it has a different function and provided a different purpose. Therefore, I proceeded with this idea.

The situation at a glance

This is the situation I hope the website would help Robert to have a seamless and personal shopping experience.

Storyboard of the scenario.

The Scenario:

Robert quickly needs to put in an order for some fresh produce to be delivered to his house (something the customer does on a regular basis).

Situation: Robert wants to quickly buy groceries to be delivered home. He does it regularly.

Problem: He has a shopping list and he is frustrated with searching for products on the list, one item at a time.

Solution: Sunshine Foods provides a “Shop by shopping list option” so Robert can save his shopping list and time.

Outcome: Robert has a seamless shopping experience, and he loves the service.

the website

Sunshine Foods has 75 products. I conducted two card sorting exercises and was able to group the products into 14 categories. The categories are further consolidated under 3 main product sections of Food, Drink, and Household.

Then, I created a sitemap which served as a blueprint to creating the global navigation bar for the website. Then, I proceeded with sketching the layout of the online store and developed it to a clickable prototype.

Ideation of Sunshine Food website from paper sketch to clickable prototype.

To test the viability of my idea, I conducted usability testing with 6 users and these are the results. I tested two main task scenarios:

The respondents

Learnings from 6 usability tests:

Users missed certain call to actions, 5/6 missed the “Shop by shopping list” call to action button due to:

  1. Poor visibility of components
  2. Confused by some wordings
  3. Felt overwhelmed by the layout
  4. Lack of visual aid


I iterated the prototype based on learnings from the usability tests. These are the iterations:

There were twelve iterations in total, but I want to emphasize on Iteration #3 and #8 as they are the iterations to the main feature.


The shop by shopping list feature was initially displayed as “Shop by List” button, which followed the following indication phrase:

Have a shopping list? Let’s us shop it for you “Shop by List”

However, from the usability tests, users didn’t notice the feature due to poor visibility as the font size and button were too small. Also, some users were confused by the name as they were not sure of what “List” referred to. Therefore, I iterated it to

Have a shopping list? “Shop Now”

A shorter and a straightforward call to action button with clearer visibility.

Source link—-138adf9c44c—4


Please enter your comment!
Please enter your name here