Wireframes - ineshbose/portion-mate GitHub Wiki

The wireframes were made over Figma as it was easily accessible and online. There is also previous experience with it which is helpful and not very time consuming. There are two main stages - Design & Prototype, in which the screens are laid out and then connected to each other (usually by clicking on elements) respectively. Plugins were also very useful, specially when icons had to be added.

The build can be seen here. The link only has view access, and to run the prototype, click the present button (usually in the top left corner as a Resume/Play icon).

Interactions are not very detailed, for example text fields can't be filled in and minor items like - and + buttons work in a obvious way. Therefore those interactions can be assumed. Figma can guide where to click if you click anywhere at a screen during presentation.

• The application has a default dark mode, so it is easy on eyes but also feels modern, however a user can switch to light mode.
• The colour palette is not exact at the moment, but the three shades are yellow (#E5AC00), orange (#ED6400) and red (#E53A00) as also seen in the logo which makes it feel warm, but fun-cheerful.
• Buttons, text, and important elements are clean, simple and big.
• Main UI layout is similar to many apps with a plus icon in the bottom right, page navigation in the bottom like a toolbar, and general options on the top with the logo.

1. App requires authentication.
2. For a new user, a basic questionnaire is presented.
3. Height and weight is taken from the user to get their BMI.
4. The app then takes you to the main, basic home screen with all portion counts and ability to add an item, journal entry, etc.
5. There are pages on the bottom bar with Home, Journal (with Calendar view), Stats and Resources.