User Interface Design

First design
We started playing around with some user interface design ideas using Figma (https://www.figma.com). The app will consist of two activities which are the "list" and “shop” activities. We wanted our list UI to feel like a shopping list or notepad so we tried using a notepad like yellow colour with lines under the words (Figure 1). When the user goes into shopping mode they should be able to cross items off the list and see a line through them. They should be able to uncross items if they accidentally cross them out. The Aisles are displayed as separate pages and they will automatically switch when the user moves to a different aisle.

Figure 1: First Design

Second round app design
After some thought, we simplified the app design and added some functional ideas (Figure 2). We added a text field with an auto-suggestion drop down box so users can enter in items and select them from those that actually exist in our database. We added a shop button so the user can move to the shop activity. We decided to abandon the yellow notepad idea to keep the design clean and easy to understand. We changed the shop activity so now you tick off items as you collect them instead of a strike through the text. This should be easier to understand for the user as it is a familiar format.

Figure 2: Second Design

Third Round App Design
Looking at our previous designs, we thought it would look more professional if we used a brighter colour palette which was easier on the shoppers eyes as well as making it more consistent with other phone applications. As a development from the shopping list, we changed the colour from grey to white and chose pink and purple as our new colour palette. As shown below, this design is cleaner.

Figure 3: Third Design

Final App Design
Inspired by our design in Figure 3, we came up with the design below (shown in Figure 4) which is even clearer for the user. We decided to get rid of the top two circular buttons as it wasn’t clear what they did. Instead, we changed these 2 circular buttons into 2 ‘pages’ as represented by the tabs at the top. This allowed us to include a written title of what each page did.

On top of this, we added more colour by including the header and added a search bar. For this simplified version of the app, we are making the user search for items using the search bar. This means they will only be able to add items that are in our database.

Figure 4: Final Design for the Shopping List

Delete an Item
On this page, if you hold down on an item on the list a trash can will appear which allows you to delete the item. If you hold down on another item, the trash can will appear on that item instead. As shown in Figure 4.1 below.

Search Feature
When the shopper goes to type anything into the search bar, it will pop up with suggestions on what is in the database. As shown in Figure 4.2 below.

Figure 4.1: Delete an Item

Figure 4.2: Search Feature

We designed the ‘go shopping’ tab in a similar way in order to keep the app consistent. Each panel represents the items in each aisle and will appear once the shopper is in an aisle. When the user moves into a new aisle, the panel for that aisle will pop up instead. For this design, we decided to keep the checkbox feature which allows you to tick the item once you have got the item from the supermarket shelves. If it is checked, the item will become crossed out. This can be seen in Figure 5 below.

Figure 5: Final Design for the Go Shopping Tab

We thought this would be a good design for our application as it is clear and easy to use. The little icons in the background add to the supermarket theme and the colours along with the icons give the app a fun and quirky feel. Ultimately we want the user to want to use our application. We think because the application is simple yet effective, that the users will use the app.

Written By James, Celine. Final Design by Oliver, Alex. Implementation by Sam.