Shopwiz: mobile shopping app concept

User Experience, User Interface Design
Preview of the mobile application
Shopwiz is a concept application that compares product prices between different stores (physical and online) to create multiple shopping lists, in order to minimise the overall expense. Users can customise the number of trips they’re willing to take, as well as distance and travelling options.


The application opens with a screen displaying the logo, followed by a series of onboarding questions about settings & preferences.
Onboarding screens
Through the home screen, the user can access all search functions, the shopping basket and saved favourite products. Swiping right or clicking on the menu icon at the top left, it is possible to access the settings screen.
Product details screens
Products can be added or removed through the "+" and "-" buttons on the right. Every product displays its name alongside some basic information (serving size, weight, stores where it's available).
Section screens
Product pages contain more detailed informations about the selected product.
Product details screens
Offers and discounts are gathered in the offers screen.
Offers screen
Shopping lists are divided according to store, and in order to spend as little as possible. Clicking on a particular store list, you can see the items you need to buy from it. The app also displays map and location, fuel or transport cost, and total expected price.
Supermarket screen


My first step in the development of this UI was identifying target user categories for the UK market and analysing them, in order to emphatise with their experiences and needs.

One group I have identified is university students. According to the National Student Money Survey 2018, money is a daily struggle for this particular category. Areas affected by this concern include mental health, diet, relationships and school performance. Students often have to give up social events due to a lack of funds and are anxious because of their financial situation.

Another category of people who might benefit from Shopwiz is indigent families, especially parents (since they are usually in charge of shopping and providing for the household). A study conducted by a coalition of food charities on over 2000 UK parents has found that one fourth of them struggle with having enough food to eat and often skip meals. Shopping for food becomes a timely and depressing experience when you spend the majority of it making price comparisons.

I therefore created two personas to help me analyse the potential users' behaviours, struggles and aspirations.
Creating personas helped me narrow down the kinds of functions users might benefit from, such as:

• keeping track of the shopping list;
• calculating fuel and transport cost;
• display offers and discounts;
• display nearby stores on a map;
• view online shopping options.


The previous research was my starting point for initial notes and considerations about the app, which led me to develop a first simple architecture map.


Once the architecture map was complete, I started my wireframing process on paper.
Wireframes on paper
After this first analog stage, it was time to design a digital wireframe in Adobe XD. I made sure not to include any colour as to not get distracted by aesthetic concerns; all that I used was gray lines and geometrical shapes. This was important for focusing on layout only.

You can see an overall picture and a working prototype of the first wireframe below.
Digital wireframes


An essential part of UX in relation to mobile applications is the degree to which people understand how to perform tasks and how easy the learning process is. This is often referred to as ‘usability’. Since shopping apps are currently widespread, people are getting used to those interfaces; this is why I investigated existing examples to highlight common features and analyse them.

(Apps analysed: Morrisons, Tesco, Amazon, Zalando, Deliveroo, Bring!, Wish, Foodora, Aldi, Asda, M&S, Sainsbury’s, Depop.)


The idea for the app name came from a brainstorming focused on two semantic areas: shopping and wisdom. I wanted to convey a sense of achievement and intelligence for using the app, as if people were in front of some kind of magic. I thought "wiz" (abbreviation for wizard) was perfect to express this concept.

Below you can see the first logo and palette ideas, alongside a first style of illustration.
Draft of visual identity
Draft of visual identity
Draft of visual identity
These first iterations led me to the final result below.
Visual identityPalette
Throughout the app interface I used a gradient made out of the colours reported above. They are supposed to be uplifting and energy-infusing. Alongside these bold colours, I used a grey scale palette that could contrast the oranges and create a clean and tidy interface.

The mascot for the app is a wizard. He welcomes the user to the application with the first screens and guides him through the initial preference choices.