The Fresh Food People

Cold Storage sets itself apart from the rest as the supermarket that sells premium products. Like other supermarkets, Cold storage also have it’s online platforms. The purpose of this project is to improve the sales transaction and signups via the online store.


My teammates and I started with research to find out problems and user behaviours when it comes to grocery shopping, online and at the physical store. We went on-site at a few Cold Storage stores to observe customer behaviours, the stores’ layout design, did guerilla interviews with customers (which was not as fruitful as we had hoped for) and made some enquiries with staffs.

Contextual Inquiry
Heuristic Evaluation
Some of our survey findings
Competitor Analysis

To further on the research we also did surveys, user testing of the current website and competitor analysis. Our research led us to these findings :

a) Customers prefer going to physical store to buy items. They like the ambience, they get to see the physical products and even sample new products.

b) When they do buy from online store, they buy in bulk or when they need to buy a lot of heavy items. They do not like to carry heavy bags.

c) Redmart is a big competitor of Cold Storage when it comes to online grocery shopping. They sell a wide range of products and the delivery charge is much cheaper. Their website design is also much more user friendly (we applied Heuristic evaluation on our competitor’s online store) then Cold Storage’s.

d) Customers want clear information on website.

e) Cold Storage staff are not well trained. Most were not aware of the existence of an online store.

Affinity Mapping

The following are the ‘I’ Statements obtained from the Affinity Map that shows the customers’ pain, behaviour, pleasure and interest.

Affinity Mapping

Synthesising Data

Based off user research and incorporating customer goals, needs, and interests, we have created our personas. In the Customer Journey Mapping, we identified the barriers that hinder the customers experience at different stages of their groceries shopping experience, and from there we ideate opportunities. From the customer’s journey, we were able to identify the main goal of the customers. Buying a Fresh Chicken was not the end goal, rather, making a meal out of the chicken was THE goal.

Customer Journey Map

Features Prioritisation

We prioritised the solutions/features to develop with in mind of the following :

a) How can the business goal of Cold Storage and the user needs be met?

b) What could set Cold Storage apart from the rest?

Features Prioritisation

Hence, we proposed to focus the feature of Linking Recipes to Grocery Shopping, Improve Findability of Items in the Online Store and the Promotion System.

a) For the recipe feature, we propose to collaborate with vendors such as The Meat Men, Foodgawker and Allrecipes to link their recipes to Cold Storage’s products. So, users can find the item Chicken or the Recipe for Cooking Chicken. The recipe page will show customers the list of ingredient required and the cooking instructions. It will also allow the customer to input the number of pax he/she is cooking for and the quantity of required ingredient will update accordingly on screen. Customers can add to cart the ingredients that they need for preparing the meal.


b) Findability of items. We propose to have the Search Bar the main thing on the top navigation bar. From our research, we understand that customers tend to go straight to searching for items as they already have in mind what they want to get. the search results will also be categorised as items and recipes.

c) As for the promotion section, we have simplified the categorisation of promotion section.

d) We also redesigned the Information Architecture, simplifying the user flow when navigating the website.

Original Navigation
New Navigation

From our user interviews, we understand that users did not have issue with the categorisation of food such as Food, Dairy, Chilled and Frozen. However, they did not find it useful to have Newspaper Ads, Featured Brands, Inspiration and the different category of promotions listed in the navigation.

Initial Prototype

With the ideas in mind and the new Information Architecture, we did 2 versions of prototype i.e Mobile and Desktop. We started off with prototyping the Mobile size first so that we could filter out the less important information and only show the most important information to the user who is viewing the website on-the-go. This process helped us to focus on only the essentials and from there we subsequently worked on the desktop version.

The existing Mobile version had a lot more jarring colours and so for our prototype we toned down the colours. Also, we changed the horizontal banner with an image of food to relate back to Cold Storage’s branding (Fresh, premium products) and also used the space to advertise delivery service. We incorporated the idea of Recipe feature into our Mobile Prototype. Some feedback we gotten was Recommendation of products linked to the ingredients was not obvious enough.

Mobile Prototype

We also worked on our desktop prototype. We have tidied up the main page, reducing the overwhelming amount of products listed. Promotional items are introduced in the main page and also the recommendation of recipes. The search bar is the main thing on the navigation bar.

First look of prototype.

We took our prototype for user testing to gather feedback if our recommended design makes sense to the customers.

User testing
Feedback from User Testing

From the feedback obtained, we iterated the design, such as reducing the size of top banner so that it takes up less viewing space on the desktop and the users can quickly access the information they require. We also made adjustment to add ingredient to cart page as shown below (Fig a).The add to cart under Recommended Products will be green once the user has clicked add item. It will also show the amount of products purchased next to the shopping cart icon, for example, there is one Fresh Spring Chicken added to cart.

Fig. a

Our work-in-progress prototype (

New proposed design of Cold Storage Website
Current Cold Storage Website

Further development includes :

a) Joint shopping account so that a household could buy things together such that they could hit the minimum purchase for free delivery.

b) Start an Events Shopping List. When one is hosting an event, the guests could have a passcode given to them include items for purchase. The host could collate the items and make the purchase for the event.

c) Develop an app that could track the in-store purchases. With the information collected on the regular items purchase, Cold Storage could

d) Further enhance the filtering system.

Learning outcomes :

a) It is good to check with the developers on the feasibility of an idea first before implementing into your design. Our team initially wanted to use Passion Card to track the individual purchases so that whenever the log in to website, it could be more personalised and recommend products suitable for them. However, it was through our discussion with a developer that we realised that this idea would not be possible. Hence, we decided to focus on other ideas.

b) Guerrilla interviews does not allows yield results. We tried to conduct such interviews at Cold Storage, but we realised that the customers were either in a rush to purchase goods or due to heavy shopping bags, they are not keen to do interviews. Hence, screener surveys would be a better choice.

c) Test the colour of your presentation when using the projector before the actual presentation. The colour might look different from your laptop screen.

d) Take notice of the use of colours of your design. Ours had too much green, thus it could have taken the emphasis from the Call to Action buttons or the products.

Like what you read? Give Angela Setho a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.