UX Redesign Challenge: Creating Social Foodie for exciting grocery shopping

Before embarking on the UXDI course General Assembly, I was tasked to do some pre-work, part of the admissions process included on working on a 1-week challenge to show why am I a good fit! I worked on designing a simple mobile app to improve the grocery experience.

Cellyn Tan
7 min readApr 17, 2017


When it comes to grocery shopping, the possibilities are endless. Grocers are coming up with so many different channels and mediums to interact with their consumers. The use of online and mobile coupons as well as mobile shopping lists are cited to be the most common in-store digital engagement in use today. It’s too common a feeling where large stores try to get us to be aware of everything in the store except what we came to the store for… to just get some shopping done.

Social Foodie is the app designed to plan a meal with loved ones and enrich the grocery shopping experience.

I followed Google Ventures’ 5-day sprint process to guide me through this project.

Background Research

Just like how technology fundamentally transform industries such as music, books and film, the same idea could apply to grocery shopping. Nielsen’s Report for the Future of Grocery highlights a few points:

  1. Increasingly, retailers are introducing e-commerce models that make it even easier for tech-savvy, time-crunched consumers to get the items they need.
  2. More than half of the consumers will consider adopting digital engagement tools in the future (auto-subscription, click-and-collect, virtual supermarkets etc) — online shopping is a deeply ingrained behaviour.
  3. Due to the booming smartphone ownership, rapid urbanisation and high population density, there is a huge potential to use digital retailing options in Asia-Pacific region.

“Consumers are no longer shopping entirely online or offline; rather, they’re taking a blended approach, using whatever channel best suits their needs.”

Online channels can do well by providing product selections for unique consumer needs such as better-for-you foods.

  • The obvious in-store benefit: fulfilling immediate shopping needs without paying shipping fees
  • It’s also difficult to match the power of human interaction and the thrill of unplanned discovery that physical stores can provide.

61% believe that going to the grocery store is an enjoyable and engaging experience.

Looking into the opportunity:

Seamlessly bridging online and offline experiences, allowing consumers to access information quickly as consumers are willing to try these options.

Looking at a user’s point of view of grocery shopping
1. Automate subscription of non-perishables; 2. Pre-plan your meals 3. Navigate the store 4. Check out as soon as possible

The author, Thorin Klosowski mentioned that he despised grocery shopping thus he talked about a routine to keep his grocery shopping as streamlined and efficient as possible.

With all these raw research, I gathered information into what supermarkets are striving towards and what consumers are struggling to do and started my first step of my sprint process: Find The End.

Enrich the Grocery Shopping Experience

Sprint questions that helps to guide me along the way:

  1. Will the app make grocery shopping fun & efficient?
  2. Can customers trust our expertise & credibility?
  3. Will the app bridge online & offline grocery shopping experience?
Mapping process

This exercise helped to create a shift from uncertainty to curiosity and creating these questions make it easier to answer with my sketches, ideation and prototypes later on.

‘How Might We’ Stickie Exercise

The idea of the exercise was to gather a mixture of interesting notes that can help me pinpoint the target of the sprint and provide me with ideas for the sketch later.

I appreciated the open ended, optimistic phrasing of ‘How Might We’ and found it useful to find more and more opportunities instead of jumping to solutions quickly.

Whilst gathering feedback from people, there were pain points and common challenges such as people not finding the specific item, impulse shopping and also buying too many groceries that is unrealistic.

How Might We Stickie Exercise with my interviewees

At the end, I gathered all the notes together in a haphazard fashion and started to organise the notes into groups (with similar themes). After, I also asked a group of users to tag on the ones they value most.

Organising them into groups/themes
I mapped the stickies onto the customer journey

This exercise also helped me to zoom in and focus on parts of the experience that I can help improve while designing for the app.

Using Lightning Demos to quickly get inspiration

This exercise also helped me to zoom in and focus on parts of the experience that I can help improve while designing for the app.

I looked for out-of-category ideas and quickly sketched out the key takeaways of each inspiration

There were many interesting elements coming out. Since the start , I have the map, sprint questions, HMW notes as well as Lightning Demos. It was time to turn the wealth of material into solutions.

Writing down details (left) • Sketching ideas down (middle) • Crazy 8s (right)

With Crazy 8s, I quickly drew landing screens of the app, variating with different options and ideas that helped generate lots of creative ideas in my head.

Ultimately, 2 concepts popped into my head: Make It Work & Social Meal Builder.

Sketches for the 2 concepts


I quickly did wireframes for the 2 concepts and it helped me to structure my thoughts in terms of the differentiating factor and what’s most relevant and engaging to my consumers.

Make It Work (above)
Social Meal Builder (above)

At the end, users find Idea 2— the social meal builder much more appealing due to the social element of bring people together, exactly like what food does. It was also a bonus point that everybody has a stake in editing the grocery list to make shopping less of an alone thing.

Menu (left) • Search (middle) • On click of ‘Creating a Meal’ (right)

Search recipes and bundles to build on and invite your friends & foodies to quickly collaborate and get everybody involved on the food plan!

Community Feed (left) • My Current Conversations (middle) • Conversation Plan in detail (right)

With the conversation screen, users can quickly tap on the grocery list on the right to collaborate and edit shopping items with the people who are involved in the occasion live.

Choosing Grocers (left) • Shopping List (middle) • Locating item (right)

In the app, you can opt between physical and online grocers. One of the interviews I’ve conducted, I found out that it is hard to locate the exact product especially when its attribute could share amongst different aisles. So I made it easy for user to see where’s what and ongoing promotions.

Hope you enjoyed this little project of mine.

Click here to see an Invision Prototype of this project!

Give me a shout on Twitter @cellyntan :)



Cellyn Tan

Currently unlearning and rethinking — designing for @DBSBank / cellyntan.com