UXDI 4 Cold Storage Website Redesigned

Project 4 calls for a revamp for the existing Cold Storage website, with the main focus of improving the main navigation of both mobile and desktop view. I have been placed in a team with Angela, Rachel, and Wilson, making us a four men team!

01. Pre-Research

My team started off with an analysis of the site map, and heuristic analysis. Followed by a competitors’ website analysis to understand the game players in the market. We sorted the competitor with their strength, weakness, opportunities, and threat. In addition, we contacted our pseudo client (our tutor), in order to have a better understanding of the target market and improvement metrics.

02. Contextual Enquiry

We were excited to start our contextual enquiry with a visit to the nearest Cold Storage within our school — Takashimaya. We first explored the in-store experience, taking notice of items such as digital signage, promotion of Cold Storage online website, and flyers.

After some awareness of the in-store design, we tried to approach shoppers of Cold Storage. However, we noticed that shoppers were rather reluctant to do a short interview with us, with reasons being either they were in their shopping mood, or they had already purchased their items and were carrying bags of groceries.

However, because of the the rejections from shoppers, we started asking questions to staffs in Cold Storage, as a customer. And indeed, this surfaced much valuable research. We asked a set of similar questions such as ‘Can I purchase this online?’ or ‘Am I able to pre-order such item online?’ at the Fresh Meat, Seafood, Sushi, and Fruits counter. To our surprise, the Wagyu meat counter was an external vendor that had their own website (not Cold Storage). Staffs from the seafood and sushi counter were unclear of the items sold online, and the packer at the fruits section mentioned how peaches were unable to be delivered due to its fragile nature.

03. Interviews

After the first contextual enquiry at Takashimaya Cold Storage, we had a rough direction on the area that we would like to focus on. We sent our screeners’ survey to find current online grocery shoppers, but to our surprise, most of the respondents did not shop online. However, interviews from non-online shoppers were helpful as we could work on how will we be able to attract them online.

Looking at Cold Storage demographics, they are usually located in areas that expats were more common. We decided to head down to Cluny Court, and Holland Village to find shoppers who may be interested in helping us out for our interview.

Once again, shoppers were rather reluctant to be interviewed. Only 2 stopped by to answer our quick questions. So we had to play the game of being a customer once again. And the interesting story begins -

‘Uncle, do you know if I can order the Spanish ham online for an event?’ 
‘I am not sure. You can go to the cashier and ask the staff there.’
Walks to cashier.
‘Hi, I have been directed by the uncle at the deli to enquire about the online order here.’
‘I don’t know about it. I need to ask my manager about it. Which uncle told you that? He should not direct you here.’
Waits for manager and a random staff approaches.
‘Hi I heard you are here to enquire about the online order? Please wait as I get someone who knows about it.’
Waits again and finally someone who looks like of managerial level appears. I explained my situation of ordering a set of Spanish ham for an event. And to my surprise, her reply was:
‘I think you can Google it’.

In summary, there was a lack of communication between Cold Storage staffs, and they were not trained to answer enquiries of the online platform. Most disappointedly was waiting for numerous staffs which resulted in a reply ‘ You can Google it’.

04. Affinity Mapping, Persona and Customer Journey Mapping

With all the interview research compiled as one, we first grouped them according to users’ pain, behaviour, pleasure and interest. After which they were referenced to ‘I’ statements.

We created 2 persona, having analysed that there are 2 different types of users who may be Cold Storage online website customer. With the consideration of service design, we created a customer journey mapping of the experience of shopping online. However, keep in mind, it extended to the action of meal planning, to cooking of meal. Customer journey mapping does not restrict itself to online shopping on Cold Storage website.

05. Features Priorities

Alongside with the information architecture and research, we came up with 3 priorities:

  • Link recipes to grocery shopping
  • Improve findability of items in the online store
  • Promotion system in Cold Storage website

06. Research to Design

How do we translate our research to design? We came up with a few possible solutions’ user flow, and consulted our developers (to see if they were doable!) Of course, we first did some brief research online on the existing technology.

[insert user flow]

After speaking to our developers, we knew which direction we wanted to design. We wanted to collaborate with external vendors of both local and international recipe websites (The Meat Men and Allrecipes). This was to link their recipes to Cold Storage’s product. Remember doing up the customer journey mapping? It enabled us to realised that shoppers had to include meal planning while shopping on Cold Storage. With this feature, customers will be able to search for recipes of their choice, with a generated list of ingredients using an algorithm.

07. Prototype, User Testing, and Iteration

One of the requirements from our client was to create a responsive site from mobile to desktop view. My team started from mobile, designing for iPhone 5, followed by iPhone 7 plus, to desktop. We all agreed that first designing for a small screen was a helpful tip as we could only include all the important navigation. When you slowly build up to desktop size, you will end up a spacious navigation with more images. Imagine working backwards, starting from desktop, we would end up with a mobile site with overflowing navigation.

First off, instead of having a promotion on the products of Cold Storage, we propose that Cold Storage to first promote the online services that they provide. They would need to share their delivery services to both new and existing customers. Besides that, we improved the colours as users commented on how it was jarring.

For this project, we had a better grasp of time management for user testing. With the help of my two team mates, we were able to gather feedback from a range of local and foreign customers to improve our design. Some feedbacks were —

  • Missed out the recommended products section
  • Overly large header banner as they would like to quickly get into the act of finding ingredients

08. Presentation

Compared to the previous presentations, we managed to go through and practiced the slides together as a team.

Some feedbacks from our client and audience:

  • The splitting of payment when ordering as a group or a family idea was interesting and we could further look into it
  • Green on projector was brighter than screen (mobile and desktop)
Show your support

Clapping shows how much you appreciated E L’s story.