yarilograd702
yarilograd702
Yarilo-Kadalov-GRAD702
29 posts
Every great journey comes to an end. Namaste
Don't wanna be here? Send us removal request.
yarilograd702 · 5 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media
User Journey Map Poster Ideas + Mock Up
The sketches represent how I wanted to portray my persona and their emotions, thoughts and actions.
I also drew up a rough guide for how I wanted to present my User Journey Map Poster. Then I quickly put together a mock up of the poster to get a better feel for what it may look like. 
0 notes
yarilograd702 · 5 years ago
Link
This is the link to my Final Hefy Prototype
0 notes
yarilograd702 · 5 years ago
Text
Prototype R3 - Features to Add
General:
-        There should be less info on screen than a website
Onboarding:
-        Onboarding: Pick if you are an – Experienced, moderate, or beginner healthy eater. To adjust their advice and item preferences according.
-        Flip the Low and High selection buttons when selecting Protein, Carb, Fibre content, etc. Left to right is a more expected approach to information display.
-        There is no continuity being shown (Step 1, Step 2, Step 3 or dots on the bottom)
-        Try to get multiple choice options on 1 line to minimize screen real estate consumption
-        Give people option to skip Nutrition component selection to make it briefer
-        Setting presets to match a health condition (eg. Lower blood pressure, Lose weight, Lower blood sugar)
(1 day of work^^^)
 Home Screen:
-        Add Information Section where you can find info and descriptions on Nutrients and Additives. Info on Safety of food additives
-        Have a “Me” Section dedicated to adjusting personal statistics, goals, needs, etc: takes you to modified onboarding screens
-        “Adjust Preferences” or “Nutrition Preferences” allows you to edit them
(1 day of work^^^)
 Nutritional Component Extra Info Screens:
-        Visually enhance the Protein, Fibre, and other component explanation
-        Add remaining descriptions for other nutritional components and additives
-        Include a reference in small type and link symbol at the bottom of each page to where info was retrieved from
(1 day of work^^^)
  Healthified Grocery List Screen:
-        Use Countdown layout and style for making my own Product names, quantities, and Prices and discounts. Use this layout for all 3 stores
Food Item Comparison Screen:
-        Figure out how to display ingredients list better (In bold: Allergens, or Natural ingredients, etc). Try Alphabetical order or include as sort by option.
-        Introduce some drop downs or similar UI element to reduce the scroll down aspect
-        For those who only care about information tied to their preferences, having all of that information on display may be a bit too much. Hide it behind a button or drop down etc.
-        When comparing two products, try out a simplified view that singles out specific points of interest, whilst disregarding the minute details (those are hidden behind a button press). This can allow more users to quickly identify the main differences and/or causes for concern when selecting their most desired/preferred product.
(1 day of work^^^)
 Notifications:
-        Notification system for when prices of products are about to change – Sale ending or Sale started
-        Information about time of selected Store closing should be easily available to help user determine the time they need to go shopping
Animation:
-        Make Healthify button more fun by adding a transitional loading screen animation
(1 day of work^^^)
 Colour Aspect:
-        The abundance of Red + the red buttons is a bit too much, may be confusing to some users
 UI & Design:
-        Take into consideration phone screen I’m prototyping for, the curved edges, etc
This list of changes and additions was compiled by looking through my previous unimplemented features (due to time constraints) and by narrowing down the most important parts of feedback from both the students and the teacher from the formative assessment in Week 6. I have included small notes of how long each set of features will take me to implement to guide me and provide me with a mental check to help me stay on schedule with the overall assignment. 
0 notes
yarilograd702 · 5 years ago
Text
Week 6 Formative Feedback
STUDENT FEEDBACK:
Colour Aspect:
-        Red seems like an odd choice, a bit too fast foody
-        The Red colour is a nice hue of Red
-        The abundance of Red + the red buttons is a bit too much, may be confusing to some users
UI & Design:
-        Take into consideration phone screen I’m prototyping for, the curved edges, etc
-        Jasper – “Looked a bit more like a website style layout, rather than an app.”
 Product Compare Screen:
-        Introduce some drop downs or similar UI element to reduce the scroll down aspect
-        For those who only care about information tied to their preferences, having all of that information on display may be a bit too much. Hide it behind a button or drop down etc.
-        When comparing two products, try out a simplified view that singles out specific points of interest, whilst disregarding the minute details (those are hidden behind a button press). This can allow more users to quickly identify the main differences and/or causes for concern when selecting their most desired/preferred product.
 Onboarding Nutrition Preferences:
-        Flip the Low and High selection buttons when selecting Protein, Carb, Fibre content, etc. Left to right is a more expected approach to information display.
 Keryn One on One Feedback:
Good script writing
App is not a min website, should be less info on screen 
Prototype testing Feedback:
 Onboarding:
-        Could the user info Activity level be done in a slider environment
-        Try to get multiple choice options on 1 line to minimize screen real estate consumption
-        Feel like I’m going there and back during onboarding
-        The navigation doesn’t match the mental model
-        There is no continuity being shown (Step 1, Steo 2, Step 3 or dots on the bottom)
-        Give people option to skip Nutrition component selection to make it briefer
-        Setting presets to match a health condition (eg. Lower blood pressure, Lose weight, Lower blood sugar)
Home Screen & Beyond:
Visually enhance the Protein, Fibre, and other component explanation
Make a Home Screen or Home Hub
Make Healthify button more fun
Look at designing for mobile articles
 Adobe XD has good Animate functionality:
Auto animate via Tap trigger, then follow with Time trigger to allow for multi-layered animation sequences
Using the Drag trigger can allow for implementation of slider functionality
Video Guide Link:
https://www.youtube.com/watch?v=II_iz5gN3lY
0 notes
yarilograd702 · 5 years ago
Link
0 notes
yarilograd702 · 5 years ago
Photo
Tumblr media Tumblr media Tumblr media
Elevator Pitch + Extended Version 
High Detail explanation of Elevator Pitch
Target Users:
-        Health Conscious people
-        Age Demographic: 20-50 yo
-        People who are in charge of their own diets
-        People who care about what they are consuming on a regular basis
-        People who are ready to make a healthy change in eating habits regardless of their past experiences and knowledge on this topic.
 User Needs:
-        People who wish to change eating habits
-        People are unsure where to begin when it comes to healthier eating
-        People who care about taste but want to eat what’s best for their health
-        People who are on a budget and think healthy eating is too expensive
-        People who want to improve their reading comprehension of nutrition labels, by making the process easier, faster, and more organic
-        People who wish to eat a large variety of foods besides certified organic only but are afraid of certain ingredients or additives
 Current Solutions:
-        Countdown, Packnsave, New World Online Shopping
-        FoodMe (Website) – Saving on Groceries with store price comparisons
-        Healthy Recipe Management Apps
-        Meal Planner Apps
-        Shopping List Apps
-        Nutrition & Fitness Goal Tracking Apps (e.g. myfitnesspal)
-        Blog, Forum, and Article based websites
-        Nutrition and Health Science literature
 Existing Solutions Problems:
-        Plethora of available apps and help websites, however each one focuses on their own aspect of information, as such people have to reach out to many different outlets in order to get the information they want
-        Existing solutions are valid and valuable each in their own ways. However, the information is often generalized and made to appeal to a larger audience base.
-        The crux of the current situation is that people often feel lost, confused, or even burdened by the idea of approaching healthy eating as a new daily standard of living.
-        “More Is not always better.” More solutions and more outlets in which these solutions can be found does not mean that the situation at hand is any better.
-        People want their cravings satisfied and their nutritional needs met
-        Diets that eliminate certain food groups entirely leave people feeling isolated in terms of what they can eat and when they can eat it. Unless the user has a goal that justifies the compromises, they are unlikely to follow through with it, no matter the potential consequences. Desire trumps all logic and reason.
 How my Solution will solve? Why it’s better? How it’s novel?
-        People don’t want to and aren’t easily inclined to give up their existing eating habits and favourite foods, regardless of the consequences to their health or wellbeing.
 -        Substitutes and Alternatives often sound discouraging, expensive, or just plain bad tasting.
 -        Giving users appropriate solutions based on their personal nutritional wants and needs seems to be the best way to attract a large user pool, to maintain it, and to even allow it to grow further as word starts to spread.
 Explanation of the App’s intentions:
-        The app aims to welcome users of any knowledge levels  about nutrition and healthy eating.
-        As the user uses the app they will hopefully being to learn and understand more about food and nutrition.
-        As their base knowledge and awareness of food products grows, they are likely to discover and get more out of the app.
-        Time invested should be proportional to the number of benefits received.
-        This app is not intended to be a quick diet fix for a few weeks or for a one-off healthy grocery run.
-        By making this app an indispensable part of people’s shopping routines and general health and food decisions. The intent is to welcome a broad range of health-conscious users and to then allow them to stay onboard indefinitely.
-        “Shop smart, shop cheap, shop healthy.”
0 notes
yarilograd702 · 5 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Prototype R2 - Changes Part 2
List of Updates & Changes:
Onboarding + Preference Settings Screens:
-        User Details Screen Added: Weight, Height, Gender, Age, Activity Levels, Goals
-        Personal Set Up: Added diet style (Vegan, Vegetarian, Pescatarian, Ketogenic)
-        Personal Set Up Screen Added: Alllergies (Peanuts, Tree Nuts, Milk (dairy), Eggs, Sesame Seeds, Fish, Shellfish, Soy, Wheat )
-        Improved User experience during Nutrition Settings
-        Changed the (i) icon to (?) icon and increased size (was hard to press for 3/3 users)
Grocery List Making Screen:
-        Grocery List prior to Heathify button press, got rid of Lowest Prices and Health Rating sorting tabs
Healthified Grocery List Screen:
-        Had trouble comparing food items (3/3 users) – fixed by reducing number of steps to compare items (just 1 “Compare” button press)
-        Change Food item button was confusing (2/3 users) - Added a “Select” button instead
-        Added back arrow functionality to return to list (3/3 users requested)
Food Item Comparison Screen:
-        The preferred settings numbers are now bold numbers for easy recognition
-        Separated the Nutritional Components better. Nutrition component names needed to be on the same line or in the same box as the values themselves.
-        Used the default grey and white system to separate the nutritional values but applied some design tweaks to it
-        Included different Nutritional Component Stat display types e.g.: According to Preferences, Higher Values
-        To help user stay aware of compared items - Added small icon/photo of the product mentioned in every major section: Allergen, Ingredients, and claims
-        The division line between the products stats was made mroe identifiable to avoid confusion and improve notion of separation
Allergy Warnings Area:
-        Added a warning icon for easy recognition
-        Allergen Warnings were separated into “Contains” and “May Contain” subdivisions for better clarity of information displayed
Re-branded:
- New App name is “Hefy” which is an acronym for “Healthy Eating For You”
0 notes
yarilograd702 · 5 years ago
Photo
Tumblr media Tumblr media
Prototype R2 - Changes Part 1:
Colour Implementation
For this next iteration of the prototype I decided to apply a colour theme. I tested out a full variety of colours but none caught my attention or seemed fully appropriate. 
The main colours of this theme are: 
Red, Dark Grey, Pink, and White
The typical approach to health or eating related design materials are the colours Green, Blue, and orange. But I wish to try something more eye catching and different. Something bolder, louder, and more fun and vibrant.
0 notes
yarilograd702 · 5 years ago
Photo
Tumblr media
R1 User Testing Synthesis Priorities
The items highlighted in Yellow are the changes that I have deemed to take top Priority at this point in time, to ensure that the Mid-Fidelity Prototype is able to be presentable in time for the Formative Assessment.
The items highlighted in Green are changes that I still deem important, however due to some of their nuance and higher level of interaction, I will most likely implement these changes after the Formative Assessment, at a later date.
The items highlighted in blue are changes that believe to interesting and of value to be explored further and/or tested out. Some of them make more sense than others, but the final decision behind their implementation date is yet to be decided. 
0 notes
yarilograd702 · 5 years ago
Text
R1 User Testing Synthesis
Onboarding + Preference Settings:
-        Personal Set Up: Add allergies, add diet style (Vegan, Vegetarian, Pescatarian, etc)
-        Change the (i) icon to (?) icon and/or simply increase size (hard to press)
-        Use back arrow to return to list (3/3 users)
-        Change “Average” selection name to “Recommended”
 Home Screen:
-        Have a “Me” Section dedicated to adjusting personal statistics, goals, needs, etc
 Grocery List Making Screen:
-        Grocery List prior to Heathify button press, get rid of Lowest Prices and Health Rating sorting tabs
-         
Healthified Grocery List Screen:
-        Had trouble comparing food items (3/3 users) – fix by reducing number of steps to compare items (just 1 “Compare” button press)
-        If prices change between time of making list and going shopping then that should be reflected in the cost of the list items and total.
-        Change Food item button is slightly confusing (2/3 users) (“Select” or “Switch”)
 Food Item Comparison Screen:
-        Bold numbers make it look like better option
-        Have the preferred settings numbers be the highlighted/ bold numbers for easy recognition
-        Separate the Nutritional Components better. Nutrition component names need to be on the same line or in the same box as the values themselves.
-        Use the default grey and white system to separate the nutritional values same as how Countdown online shopping does it
-        Include different Nutrional Component Stat display types: According to Preferences, Higher Values, Lower Values
-        Figure out how to display ingredients list better (In bold: Allergens, or Natural ingredients, etc). Try Alphabetical order or include as sort by option.
-        To help user stay aware of compared items - Add small icon/photo of the product mentioned in every major section: Allergen, Ingredients, and claims
-        The division line between the products stats needs to be easily identifiable to avoid confusion and improve notion of separation.
 Claims:
-        The claims are important and help users make a decision (3/3 users)
-        Custom tailored Claims – user preferences establish key claims to be displayed at the start of the list for quicker recognition
 Allergy Warnings:
-        Allergen Warning title should be bold and recognisable
-        Add a warning icon next to it for easy recognition
-        Allergen Warnings should be in Bolder type to be recognised
 Miscellaneous:
-        Make the whole “Sort by” tab pressable for easy access
 Notifications:
-        Notification system for when prices of products are about to change – Sale ending or Sale started
-        Information about time of selected Store closing should be easily available to help user determine the time they need to go shopping
 Individual Ideas:
-        Comparison screen: include price and grams/weight for full analysis.
-        Add a Suggested quantity to consume of the food product. Add also when it’s better to eat.
-        Onboarding: Pick if you are an – Experienced, moderate, or beginner healthy eater. To adjust their advice and item preferences according.
-        Ingredients in Bold Type could be potential allergy causing ingredients
-        In Comparison screen would remove the “< >” arrows as they made the comparison more confusing.
-        Maybe try colour implementation e.g. Protein is Red, Fat is Orange, Carbs are blue, etc
 Cool Ideas & Extras:
-        Click and drop a recipe function: Auto fill ingredient list from recipe to make a healthy shopping list with applied preferences to the recipe lists products to best fit your need. (Logan)
-        Have a total calorie count for the list, total protein, total carbs etc. Example for making a list for lunch. Use serving as total for each item. (Rakin)
 Side Notes:
-        3/3 Users said this app idea is cool and that they would use it
-        Looks very clean or minimal, just needs some simple colours and some extra icons (3/3 users)    
0 notes
yarilograd702 · 5 years ago
Text
User Testing 1: Rakin
Change chips button was slightly confusing
 Pressed back arrow to go back to list
 During comparison had trouble woith figuring what to press.
 Protein Bar comparison screen:
Understood and mostly made sense
 Ingredients in bold: In bold might be what people are allergic to
Highlighting the soy stuff
The bold makes more sense for same ingredients.
 Claims is interesting, noticed it first. Sometimes I shop by claims
Sometimes the claims are a deciding factor.
 Add another style according to your stats, and keep the higher and lower values as options
 This is really cool.
 Would use it.
Cuts out the searching and going each individual item. Looking at the back
 Have a total calorie count for the list, total protein, total carbs etc. Example for making a list for lunch. Use serving as total for each item.
 Would definitely use the app.
 If prices change between time of making list and going shopping then that could be reflected in the cost of the list items.
 Notification of reminding you before prices change so you can go shopping in time.
 Looks very clean or minimal.
Take inspo from google apps.
0 notes
yarilograd702 · 5 years ago
Text
User Testing 1: Anastasia
Make (i) button larger as during interaction it was hard to press
 Make “Average” named “Recommended”
 Friday Snacks pre Heathify button press, get rid of Lowest Prices and Health Rating sorting tabs
 Pressed on “sort by” instead of Price Low to High, Make the whole “Sort by” tab pressable for easy pressing.
 Change chip type took a bit longer, button didn’t cause confusion but required user to think a little bit.
 To return to grocery list after choosing Chips, would press on “Friday Snacks” back arrow.
 To compare protein bars would just press on “Compare” on the new bar that she wants to compare the previously selected bars to.
 In Comparison screen would remove the “< >” arrows as they made the comparison more confusing.
 Change how the stats are displayed. Nutrition component names need to be on the same line or in the same box as the values themselves.
 Use the default grey and white system to separate the nutrional values same as how Countdown online shopping does it.
Maybe try colour implementation e.g. Protein is Red, Fat is Orange, Carbs are blue, etc
 Bold ingredients were read as main ingredients and the rest are additions.
Would use Alphabetical sorting to display the ingredients.
Would also like all ingredients to be in Bold type for easier viewing
  Allergen Warning title should be bold and Red
Allergen Warnings should be in Bolder type to be recognised
Add a warning icon next to it for easy recognition
 Add small icon/photo of the product mentioned in every section: Allergen, Ingredients, and claims
 The dividing line needs to be bolder/thicker/more visible to acknowledge the separation between the two.
 Claims should be tailored and easily recognised by every individual user. Setup in onboarding certain preferences, such as prefer high/low fibre, or prefer Gluten free
 Notification system for when prices of products are about to change/sale ends or sale starts.
Lower prices are always best.
Also time of store closing should be there to know what time I can go shopping
0 notes
yarilograd702 · 5 years ago
Text
User Test 1: Logan
Use back arrow to return to list
 Bold numbers make it look like better option
 Have the preferred settings numbers be the highlighted/ bold numbers for easy recognition
 Why are some ingredients, add key to distinguish similar ingredients?
Put in bold the ingredients that are different to each other.
 What if ur Vegan, for food preferences add extra setting.
 Comparison screen: include price and grams/weight for full analysis.
 Separate the nutritional facts better
 The more and less arrow needs improvement.
 Make Claims more prominent
 Settings: Add allergies, add diet style (Vegan, Vegetarian, Peskitarian)
 Add a Me: Section
 Add a Suggested quantity to consume of the food product. Add also when it’s better to eat.
 So hard to start eating healthy. So people need baby steps to start implanting health conscious changes in their date.
On-boarding: Pick if you are an – Experienced, moderate, or beginner healthy eater. To adjust their advice and item preferences according.
 Click and drop a recipe function:
Add to this app
Auto fill ingredient list from recipe to make a healthy shopping list with applied preferences to the recipe lists products to best fit your need.
0 notes
yarilograd702 · 5 years ago
Text
User Testing Script & Guide
Guide:
-        I am the mind and decision maker
-        You, the participant, are my eyes and hands
-        However, whilst I want and say my thought process and you complete the tasks, I would like you to also explain your own thoughts about what you press, and how you do it.
 Script:
1)    This onboarding and preference setting before we get started, give it a read. NOTE: there may/should be one other initial preference setting which lets you select your age, height, weight and activity level and potential health goals. Using a BMI calculator the app will figure out the required and recommended daily calorie and nutrition intakes to add a further layer of personal customization to the products the app recommends.
2)    Before I proceed, I wish to find out more about Protein,… then some more about Carbs,…. And lastly what is Fibre all about?
3)    Now I’m ready to select some preferences. I am an active person, who workouts out and trains regularly, but currently I am also trying to lose some bodyfat, since Covid-19 has kept a little less active Cardio wise.
4)    With that in mind, lets start with selecting High Protein, then I want Low Carbs, Fat I’ll stick to average, I’ve heard High Fibre is good for weightless so let’s do that, Calories we’ll keep at Average (aka recommended), Sodium keeps me a bit bloated so let’s go with Low, and Sugar I’ll keep at Average. OK.
5)    Time to start making my grocery list,…I’m going to name it “Friday Snacks”, and let’s create it.
6)    I think this time I’ll be shopping at Countdown, so let’s go with that.
7)    Okay I’m ready to start making my list,…First I would like some Potato Chips to snack on, next…let’s fast forward adding a few more items.
8)    Lastly I added some Chicken Tenders, and now I’m DONE.
9)    Okay that list looks pretty good for some maybe fairly healthy snacks, time to Healthify it and see what we get.
10)  Okay interesting selection, totals in at $22.79. But how about the Best Health rating sorting option, let’s try that.
11)  Oh ok these products total in at $32.78, almost $10 more, but I kind of prefer some of these items more that the ones in the other category. So let’s go with this option, time to confirm.
12)  Ok, first thing I want to have a look at, are the options for my chips, let’s see what the dropdown has to offer.
13) So in terms of price these are the results, let’s try another sorting method. Ah so Best Health Rating shows me that the “Proper Crisps” are best. Well since I prefer regular Potato chips and these ones are low in Salt, these seem like the best match for me. Let’s choose them.
14)  Okay, now it’s time to get back to the list (dropdown again)
15)  Now I also want to see some other options for Protein Bars, so let’s see what the dropdown shows me this time. Hmmm, out of these options, I think I might want to go for the protein bars that have the highest Fibre.
16) Let’s try comparing both products to see how the stack up against each other. So I want to Compare my current selected product with the Nature Valley Protein Bars. (Press Arrow to progress)
17)  Okay this is interesting, however I would like to change the view style. Oh now this makes things clearer for me. (Let User look at the information and react)
18)  Let’s scroll down to see some other info: Ingredients, Warnings, Claims, etc.
19)  Reoccurring ingredients are in a bolder font, however is there a better way to view this information?
20)  Finally, let’s look at the claims real quick. Okay I can see that the bar on the right is gluten free and has no preservatives. You know what, that sounds good to me, plus the price is lower too. Let’s go back and choose this bar instead.
21)  (Press the up & down arrow button to change product), then close the dropdown. I see the Total went down to $31.78. Awesome I’m happy with this list, so that’s it for now.
0 notes
yarilograd702 · 5 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Design Inspirations for Prototype 1
These are some of apps and websites that I used to help me get an idea of how I wanted the design layouts of my initial prototype to look like. 
Overall the goal was to create something clean, minimal, and simple.
0 notes
yarilograd702 · 5 years ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Prototype Version 1
This is the first iteration of my proper wireframe and Prototype.
It was made using Adobe XD since I am a windows PC user and find this prototyping program to be my preferred option. 
Image and fact gathering was a time consuming part of this process.
I used existing List making and nutrition apps as my initial inspiration for the design style of this prototype.
Since I am an Android phone user myself I have decided to cater my prototype more towards Android devices this time around. As in the past projects I have always used an Iphone Screen as the template. This time I am using slightly different dimensions that the Google Pixel 4 Xl offers. And I can honestly say that the screen real estate it provides has allowed me to display information in my preferred methods without much in terms of limitations. 
This prototype is fully functional, however it only follows one linear preplanned scenario. I will be using this scenario to generate my user testing script and will use it for user testing. 
0 notes
yarilograd702 · 5 years ago
Link
I have used information from this website within my own prototype to provide users with helpful info about nutrients that make up their food.
0 notes