Week 8: Wireframe Design Process + Experimentation

1. Outlining all the pages

After creating the user flow (Week 7.2), I now have a better idea of the pages to include and the design for the app.

Main View Page:

1. Sign In Page
2. Sing Up Page
3. Dashboard/Home Page
4. "Virtual Pantry" Landing Page
5. "Reinventing Lefovers" Landing Page
6. "Reinventing Kit" Page
7. "Awards" List Page

Embedded within the "Virtual Pantry" Landing Page are views that support the feature, this includes:

1. "Add to virtual pantry" form page
2. Edit leftover meal form page

Embedded within the "Reinventing Leftovers" Landing Page are views that support the feature, this includes:

1. Ingredients Shuffler (To find ingredients)
2. Recipes List Page
3. Recipe Detail Page

Other views that I should consider designing are:

1. Modal Popups for Awards and warnings
2. Settings Page
3. Contact Page

In total, I will have to design approximately 15 pages.

---

2. Design Iterations

In the design process, I went through a lot of iterations, especially when designing the main pages.

As an example, I designed a couple of design options for the "Dashboard Page" as I want to see the level of information this page should have.

Additionally, I also consider the navigation method. Which is to include or not include a navigation bar. As seen from the artefact below:

1. Wireframe 1: One continuous navigation, all page links from the dashboard page
2. Wireframe 2: Implement a navigation bar that links to all the main functionalities of the app

After considering both pros and cons of the navigation method, I decided to go with integrating a navigation bar (Wireframe 2) as it would simplify navigating to the different pages and increase the accessibility of the application.

Link to figma page: https://www.figma.com/file/GorxxSwUQ4T8W1Ipvibn93/HNY-Graduation-Project-Wireframe-Experimentation?type=design&node-id=0%3A1&t=dZVHptpmsFu25pIR-1

---

3. Finalising Wireframes

After a lot of iterating, and walking through the options with Lizzie, below are the compiled and finalised wireframe designs.

Link to Figma page: https://www.figma.com/file/GorxxSwUQ4T8W1Ipvibn93/HNY-Graduation-Project-Wireframe-Experimentation?type=design&node-id=2%3A1438&t=dZVHptpmsFu25pIR-1