janey3studiov

[janey3studiov]

Final video

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

Scenario worked well to present (reflect) the potential user that uses KeepFresh for each suitable situations.

[janey3studiov]

Final version that complemented all problems

TASK

1. Add specific grocery into 'Favorite'

2. Manual registration of items

3. Delete specific grocery

[janey3studiov]

Another issue found ...

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

I would fix those parts as a final part of this project and run some user-test tomorrow!

[janey3studiov]

2 important elements to be developed

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.

Delete function (singular or multiple selection)

[janey3studiov]

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.

However, there is one part that I want to fix- grocery list still has some issues. I think there are too many elements on the list. There are title, when the expiry date expires (number and bar display), units, shopping list icon, and favorites. The trouble is that they are all vital and I can not just remove them. One option is to have separate detail pop-up or floating page when the list or item is clicked (touched). I think I still need to consider if all of them are needed for sure (whether they are displayed on the list or on the separated page.)

[janey3studiov]

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

I could understand what were wrong when I received the feedback and the parts that I was struggling were sorted. It's getting into a completed form. I'd mend UI more thoroughly and prepare foe the final user-test.

[janey3studiov]

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

show list of shopping cart under (bottom of the screen) *make them darker to show that they are completed

[janey3studiov]

Prototype testing video - Prototype testing video - Method to find grocery by several way such as search and filter

[janey3studiov]

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

'Expiring Soon' should be presented as a card format

Layout can be selected, either 'list' or 'card'. It will be on the right side of the item.

[janey3studiov]

Defining icon sizes

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

- I researched on icon size for this format and I'll follow the one that I found

[janey3studiov]

A/B Testing for few significant UI design

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.

- Through test, I learnt that what kind of UI the users prefer and how I could develop further based on theit feedback.

[janey3studiov]

Kano study

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.

This research was very effective and it contributed greatly to help me make decision on which functions to be concentrated on to be improved.

[janey3studiov]

Contextual research checklist

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

Ordering vitamins and supplement through an online test (viable)

[janey3studiov]

Lookback/unmoderated user testing

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:

(Screenshot/Testing with Daniel)

[janey3studiov]

Refined wireframe work

I finally created the wireframe work again based one the user flow I updated few days ago.

[janey3studiov]

Wireframe process and feedback

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

I will create the rest of the wireframe screens and then proceed to the next user test for creating a lo-fi prototype.

[janey3studiov]

API

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.”

API skill will be applied when users add grocery receipts from supermarkets. From my research,  Countdown customers who opt out of getting paper receipts can now have their digital receipts show up automatically in their MyCountdown app account. Therefore, I will enable Countdown customers can experience auto e-receipt saved on my application and user can choose what items to add on the My fridge (This process is important due to avoid adding industrial products ) This feature will cut off the process of taking image of grocery receipt or manually adding.