Part 4 UI Mockup Storyboard
The storyboard was constructed using Figma. The entire team had input in the design of the UI Mockup and Storyboard flow.
In case there is an issue with the images, here is the link to the figma project.
NOTE: only pages with UI changes have screenshots here. The rest have stayed the same.
SUMMARY: for the last sprint, there were quite a few updates to UI design in terms of color-story and the layout of the user-interface (especially regarding US.3 and US.4).
204357042-c1343b07-302b-4b77-8fbc-beab76d08216.mp4
- Cleaned up and simplified the view of the homepage
- Added a view for user to sign up
- Changed the sort filter UI
- Changed the un-expanded details from expiration date to category and location chips
- Changed the expanded details to show the expiration date
- Changed the grey editing boxes to black lines
- Created drop-down views and edit buttons for location, unit, and category editing fields
- Created seperate activity views to edit location, unit, and category
- Changed the sort filter UI
- Change the color of the detail chips
- Changed the layout of the Add Recipe editable textviews
- Added a default image for recipe
- Created separate activity views for adding and editing ingredients in a recipe
- Added lines to seperate individual recipes/ingredients rather than dates in meal plan list
- Completely changed the layout how to add a meal plan by connecting a pop-up that shows the recipe list or ingredient list when the button is clicked rather than a drop-down menu
- Added different buttons to specify whether to add a recipe or ingredient
- Added lines to seperate individual recipes/ingredients
- Added a servings pop-up to for user input
- Changed to a single picked up toggle instead of two
- Changed the sort filter view
- Added a 'PULL FROM MEAL PLAN' button
- Added an arrow button to delete the item from shopping list
- Created an add new shopping list item view
- This UI screen shows the details the user must enter to create a shopping list item
- Created a UI screen that shows list of ingredients that need to be bought based on the user's meal plan
- After clicking on 'Picked Up' shopping list, we implemented a pop-up that shows the number of servings to buy
