Shop Smarter

Branding / Research / User Testing / UX / UI Design
This project was to research, analyse and create a prototype in an industry or service of your choosing. The assignment was part of a certificate course in Web, Interaction and UX Design at Griffith College that I attended (online) in 2021. We were a team of three, and we all participated in each stage.
CREDITS
Team members: Ruby Corcoran, Susan Sweeney, and myself!

The Problem

The frustration of shopping in a supermarket, buying products at a certain price only to discover the same product is on offer or at a reduced price in another supermarket. This can be extremely frustrating and costly on higher-priced items such as health care products, coffee, etc.

The Result

Shop Smarter is the ‘smarter’ way to save on your grocery bills. The real-time price comparison app lets you compare thousands of products from Ireland’s leading stores all in one place.

Simply activate the lowest price, present the Shop Smarter QR Code at the till and build your points to earn additional savings.

It’s the smarter way to save.
Image of a graphic representing the Shop Smarter App. Featuring the back view of a woman in a supermarket aisle. The Shop Smarter logo is in the center of the image. There is a blue to green gradient on the image.

The Question Board

The question board for the Shop Smarter App

Generate Questions

Question board results for the Shop Smarter App

Attitude vs Behavior

Attitude vs Behavior results for the Shop Smarter App

Qualitative vs Quantitive

Quantitive research results for the Shop Smarter App
Qualitative research results for the Shop Smarter App

Online Survey

To create a successful application it is imperative to assess the user's wants and needs. A robust survey helps to analyse the user’s insights/feedback and provides design direction—it can also expose a gap in the market.

The online survey asked users about their grocery shopping behaviours. Such questions included; How often do you go grocery shopping?

What is the main reason for shopping in that particular supermarket? Which supermarkets have the best loyalty programs? etc.

From the 105 responses we received, we were able to focus our research on an application that provided rewards and compared supermarket prices in a central location.
Online survey results for the Shop Smarter App
The responses collated from Question 5 & 6 demonstrate that Irish consumers have no loyalty towards a particular store and that their shopping behaviour is persuaded by stores that that offers the best value for money.
Online survey results for the Shop Smarter App
The responses collated from Question 9 & 10 show that Irish consumers are engaged with various loyalty schemes and that they are favouring a digital approach.
Online survey results for the Shop Smarter App
The response collated from Question 18 which shows that Lidl is the preferred application provides a good foundation for our design direction. The results from Question 19, in particular Option1 which shows over 70% of users consider special offers very important, again reinforces the need to develop an app that encourages consumers to shop smarter.
Online survey results for the Shop Smarter App

User Interviews / Key Findings

We carried out six interviews
User Interviews / Key Findings for the Shop Smarter App
Persona speech bubble for the Shop Smarter App

Personas

We created six personas
Persona for the Shop Smarter App featuring Derek BrennanPersona for the Shop Smarter App featuring Zara McGeePersona for the Shop Smarter App featuring Zoe CorcoranPersona for the Shop Smarter App featuring Jamie MoranPersona for the Shop Smarter App featuring Laura MooneyPersona for the Shop Smarter App featuring Ruth

Empathy Map

Empathy Map for the Shop Smarter App.

Customer Problem Statement

Customer Problem Statement for the Shop Smarter App.

Customer Journey Map

Customer Journey Map for the Shop Smarter App.

User Flow Diagram

User Flow Diagram for the Shop Smarter App.

Wireframe Sketches

Wireframe sketches for the Shop Smarter App.Wireframe sketches for the Shop Smarter App.

Low-Fi Wireframes

Low-fidelity wireframes for the Shop Smarter app.

Story Board

Storyboard sketch for the Shop Smarter App. Featuring a character 'Ruth' using the app at home and then driving to the supermarket and using the app at the checkout.

Scenario 1

Scenario
Ruth pops into the supermarket on her way home from work to pick up a few bits. She walks past the tea and coffee aisle and notices that the coffee that she normally buys is half price.

This frustrates her as she has just bought the same coffee in another supermarket a couple of days earlier, at the full price.

Action
When Ruth gets home she opens up the Smart Shopper app, signs in and searches coffee, she scrolls to her preferred brand and adds it to her favourites. She has her favourites set for send notifications.

So when the coffee becomes available at a discounted price or on promotion she will now receive a notification informing her of when and where. She is now happy knowing that she can save money in the future.
Image of four high fidelity screens for the Shop Smarter app.Image of four high fidelity screens for the Shop Smarter app.

Scenario 2

Scenario
Jeanne is a 65 year old woman who lives in Avoca with her dog. She does not consider herself tech savvy but owns a smart phone and has a Facebook account so she can keep in touch with her daughter and grandchildren who live abroad.

Jeanne likes to make savings where she can especially when it comes to Oscar’s dog food and her Kenco coffee.

Nothing annoys Jeanne more than buying her favourite products in one store only to discover they are at a lower price in another.

Action
Jeanne downloads the Shop Smarter app. She is brought to a login in page which suggests connecting to her Facebook account. Once tapping her Facebook account Jeanne is brought to the homepage.

She takes comfort that there is a help icon at the bottom of the page but she feels the app is easy to navigate and feels confident to use it without the need for help.

Jeanne clicks the button for coffee and begins to scroll down to see the various offers. Seeing that her Kenco coffee is down in price in Dunnes, she immediately taps into the product where she is met with a huge green button to activate.

Jeanne activates the button and a pop up message instructs her to use the QR code, which is located at the bottom of the screen, at the till. Jeanne goes to Dunnes, finds her Kenco coffee and presents her QR code to scan at the till.

Jeanne leaves Dunnes very happy knowing that the app reflected the same price in store and that she has paid the lowest price for her coffee.
Image of four high fidelity screens for the Shop Smarter app.Image of four high fidelity screens for the Shop Smarter app.Image of three high fidelity screens for the Shop Smarter app.

Scenario 3

Scenario
Dermot is a single father of three children under 10. To make savings on his grocery bill Dermot regularly checks store websites/apps for the latest offers. Dermot does not have brand loyalty so his shopping habits are purely influenced by store offerings.

Dermot typically buys in bulk to make further savings and does not mind driving an extra 20 kms if it meant getting better value for his money.

Action
When Dermot finally gets his kids to bed, he checks his family WhatsApp group and sees a message from his sister who has recommended a new app that helps consumers make better savings on their grocery shop.

Intrigued by her recommendation, Dermot follows the app link his sister included and proceeds to download the Shop Smarter app.

Within seconds of downloading the app, Dermot enters the login page and enters his details including name and email address and agrees to the T&C’s and sharing his geolocation. For further authentication, Dermot is prompted to share his number to which a password is sent to his phone.

Dermot notices that he has received a text message which the app promptly recognises and automatically updates allowing Dermot to continue using the app without leaving.

Upon entering the home page, Dermot is met with a pop up that invites him to see how the app works.

Being tech savvy, Dermot declines and proceeds to check the stores and the products that he likes. Immediately, Dermot sees an offer on his preferred shampoo - Alfaparf - in his local Tesco. His eldest daughter who has sensitive skin requires this product which can be quite pricey at the best of times.

Seeing that it is down in price Dermot is very happy that he is going to make a saving. He taps the item to make the saving and will produce his QR code (that is located at the bottom of the app page) at the till when he visit’s Tesco in the next few days.

This product will enter his favourites section and will automatically be notified when the offer returns. Dermot regularly checks the Shop Smarter app and has noticed an increase in his savings. He is a very happy dad.
Image of four high fidelity screens for the Shop Smarter app.Image of four high fidelity screens for the Shop Smarter app.Image of four high fidelity screens for the Shop Smarter app.

User Testing

Upon analysing our user testing results, Jeanne, who is colourblind and had some difficulty navigating the Smart Shopper application. Although user accessibility has been at the forefront of our design (our use of contrasting colours, bold text, item descriptions etc.), we know that it could be further improved by including a dot/cue on the active screen. Which would provide greater assistance to those who are colourblind.

The other two participants, Ruth and Dermot both completed the tasks without any issues.

Brand Identity

The brand identity of Shop Smarter is clean and effortless. The sans serif font coupled with the blue/green gradient evokes ease of use, trust, dependable and growth. In addition, the bold line that separates the names reflects that of the magnetic strip on a credit card.
Image of brand identity components for the Shop Smarter brand. Consists of logos, colours, fonts and graphic elements.

Conclusion

We have successfully developed an application that meets our users needs. From our extensive research we identified a gap in the market for a business that offers a real-time price comparison app that compares thousands of products to find the lowest price in Ireland’s leading supermarkets.

With simple navigation and activation, the smart shopper can shop with ease knowing that they are getting the best value for money all the while building points to earn additional savings.

It is clear Smart Shopper is the smarter way to save.

Up Next

Image of a moving white van with Castle Paints branding. Moving in a north direction with large trees either side of the road.Image of 'King Tree Media', creative media production logo. The logo mark consists of a black tv shape with a black tree inside it and a multi-coloured background. The logo is on a white tv picture effect with faint lines.Image a right hand holding a white business card with the text 'We cater for corporate events, family occasions, weddings, birthdays, anniversaries & much more'. The logo 'Clever Cooks' is on the bottom half of the card. The background is a red colour with the text from the 'Clever Cooks' logo in black text overlaid.An image of a logo, 'Kokoro Sushi Bento'. The word 'Kokoro' is a green colour and the word 'sushi bento' is in white below. There is a small green circle with a stroke of green in between the words 'sushi' and 'bento'. The logo is on a black background with a green 'rising sun' design faintly visible on the bottom right.Image of a white business card at an angle on a white background. On the business card is a logo mark of New Ireland Assurance centenary edition logo in a gold leaf effect.Image of Just Eat delivery guy on a moving bike. Top half of a phone laid over the image with the Just Eat logo in the centreImage of the top half of a paint can on a black background. The paint can is a metal can with a dark green label with the name 'Acres Hall' on it. The logo has an illustration of a Georgian two story house with a tree either side of the house.