Year3 Interaction design studio V

Final video

There were few struggles while I was making this video but in the result, it was done fine.

Final version that complemented all problems

TASK

1. Add specific grocery into 'Favorite'

2. Manual registration of items

This might be the last issue during the prototype development. I asked my friend for a casual user-test and an obvious problem was found.

"However, shouldn't the expiring items be shown on the top? You said it is most important to notify the user before the items are expired."

Current prototype was designed to notify with red colored icon on the title of each items when there is any item that is expired soon and the friend said "It would not motivate the user much and if you think alerting before expired is the most significant goal, why would you just use one icon rather than having a several ways to notify?" Throught this conversation, I learnt that my prototype was not persuasive enough in terms of an effective design to achieve the goal of this project (application).

To sum up... functions and information that I have to focus on when creating this application are-

1. Easy check and view of what groceries are at home.

Calendar view of expiry date states

Enhanced filter to view items by types

Frequently purchased items to be saved separatedly

 2. Notification before the expiry date

Showing on the top of the first page of the application

Notification

1. What to add on grocery list card

Detail can be viewed when the card is touched. The list of elements then- card

Title

added date

expire date

ingredients

nutrients infos

history

favourite icon

shopping list icon

food type

group (it if has added)

I still think there are no elements to be removed.. bar display of expiry date can be gone.

2. Automatic shopping list generation

Elements to be added into shopping list

Function of frequently purchased items are updated automatically when they are out of stock. (Notified with the product name? or the category name?) -> How? -> Tutorial to add frequently purchased items?

Manual registration by typing or selecting.

Things that were developed today

Detail adjustment (Scale, text color, buttons, more familiar search bar design)

Today's date were aligned to left side and the font size were largened. When calendar icon or text are touched, calendar view will be activated and displayed.

'Filter' was moved onto items' side and filter page was newly created. (Loads of grocery categories were added.)

Grocery+ button was added on Nav bar.

My thoughtIt seems likt it's much more organised than yesterday. I think it's because I edited many stuffs. I love it most so far from the development processes from the past. I think it's was a good idea to make a separate filter page. I once was considering to remove item filter and I realised that it is actually a necessary function from the feedback from classmate during this class time. Fortunately, when I was not sure about removing fridge, freezer, pantry categorisation method, this various filtering function resolved it as the user can always add frozen and pantry filter category anytime.

Few adjustments were made after I had a chat with Keryn in class.

1. Filter for appliances

Categorising grocery viewing was limited to refrigerator, freezer, and pantry but I change it to filter aa the user needs rather than filter according to the appliances.

1. As I changed 'save' to 'favorite' on nav bar, I made it to meet the need of the users thinking there they can find their frequent using ingredients or items.

2. Filter has 'All' and 'Favorite' as default and the users can use the plus button to add more filters such as 'lunch box ingredients', 'snacks', and 'for guests'.

2. Filter

Downwards pointing arrow is located by the filter so the users could sort the grocery into few options such as vege and fruits.

3. Nav bar

Original features were refined to keep two must have funtions.

1. Home was changed into grocery

4.Pop-up message

Pop up message was added to alert that favorite function was completed.

My Thought

Linking save to shopping list

Key points

Save

Drag to activate Left: add to shopping list Right: delete from save (meanwhile, I found that it is also deleted when heart is pressed, but I would keep both ways)

Display groceries by categories

Shopping list

Drag to activate Left: add grocery to cart Right: delete from shopping list

show how many items are in shopping list on the bottom right

The things I changed based on the result of the user test this week.

'Expiring Soon' should be presented as a card format

- Current prototype of mine is set as iPhone 11Pro (414 X 896)

https://docs.google.com/forms/d/e/1FAIpQLSedGCoY_vQlGaiOi-SgO7CdwShbjsn1XIGCWBFsicaS-WidiQ/viewform

- I faced a difficulty in prototype development step.

- I learnt several user test options in class and I wanted to try Kano Study and A/B Testint.

- For A/B test, options are either displaying the contents as a list format or card format.

- New gains

About 3 times more users preferred card format for 'Expiring Soon' category. Hence card format was selected.

For viewing grocery, two options are preferred in half and half ratio hence I would provide both options for their choice.

There are quite many contents included in one page so if thete is a color as a background, that would look too busy.

Several feedback of making 'expiring day left bar' ser was given.

https://www.kano.plus/studies/analyze/3uLvhstxjswAPbH6w

It was a useful research method

I was considering which function I should focus on to develop and I could identify the users' preferred functions through this test.

I thought the automatic receipt registration and expiry date display functions would be the two most significant functions. Hence I felt I should simplify those processes by minimising the steps when groceries are added manually.

In addition, I learnt that they prefer service that provides information in detail, specifically what they want like what groceries are available and how much time each items have to be expired rather than recipe suggestion function that I initially had as an idea.

General topic literature

The general eating issue that people experience these days

Statistics / Market figures and other relevant quantitative data

How much of foods or ingredients are being thrown away due to expiration?

Social & Cultural background of product, social &cultural environment, related milieus and users 

An increase in spending outside the home 

Easy access to delivery foods by apps

Potential users in future /user demographics

NZ people who cook at home

Competitor concepts/ideas/studies

I used "Lookback" to conduct my user testing in this session. Five people (my participants) participated, and they all tested on my laptop, and I received the feedback in person.

 Participants:

Jihye Choi - Uni student

Mason Park - Office worker

Sujin Lim - Store assistance

Aaliyah  - ECC teacher

Daniel Kim - Uni student

Tasks:

 Summary of findings

Finding a receipt was challenging because there was no clear indication.

Expiry soon icon next to the search bar seems to be relocated.

Add grocery plus button should be relocated into nav bar so that user could use it in any pages.

Add another option to presenting the grocery list.

Auto location - why still I have to choose where to add?

Add box around the grocery names on receipt to work as buttons

Auto expiry date -> suggested expiry date

Screenshot of user testing:

The process of the wireframe I have created so far. I briefly tested with the target user, and here is the finding

1. Nav bar should include the camera icon.

2. More various categories for the search screen to attract users like 10m quick menu, only 5 ingredients recipes.

3. Add fridge, freezer and pantry option for the filter on My grocery

https://www.mulesoft.com/resources/api/what-is-an-api#:~:text=API%20is%20the%20acronym%20for,you're%20using%20an%20API.

https://nordicapis.com/5-examples-of-apis-we-use-in-our-everyday-lives/#:~:text=Google%20utilizes%20APIs%20to%20display,from%20your%20smart%20home%20device.

“API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API.”