Low fidelity was simple as it was the low detail version.I worked on a select number of pages and designed the overall interface of each page while my group mate Hussein did the other half. Together, we worked collaboratively by communicating frequently and got the low fidelity wireframes completed quickly.The result was a set of low detailed greyscale wireframes, which was what it should be. Next was the high-fidelity wireframes with interactivity and content suiting to each page.
This group project was to create a prototype for an app, in the assignment's case a fictitious food app called Paprika. Before building the app, brainstorming was done by my group. My group wanted something simple, like a food ordering app. We then thought of Chipotle, and they had menu restrictions where you aren’t allowed to customize the ingredients of certain options. So, to resolve that, my group decided to create a Mexican food app where it would allow customers to customize their ingredients with our menu choices. Our result, Paprika, a fully customizable Mexican restaurant.
Low fidelity was simple as it was the low detail version.I worked on a select number of pages and designed the overall interface of each page while my group mate Hussein did the other half. Together, we worked collaboratively by communicating frequently and got the low fidelity wireframes completed quickly.The result was a set of low detailed greyscale wireframes, which was what it should be. Next was the high-fidelity wireframes with interactivity and content suiting to each page.
These pages had a bit more difficulty as my group planned that it would have four stages to go through, the ordered stage, then the order being processed stage, the on its way stage, and finally the order has arrived phase. I wanted to make sure the prototype didn’t seem static during each stage. So, to resolve that, I made some animated GIFs that would play during each stage for about 3 seconds each to show that each stage would progress to the next. After solving that issue, I resumed to detailing the pages and adding content to finish them up.
This page had a bit more difficulty as my group planned out it would have four stages to go through, the ordered stage, then the order being processed stage, the on its way stage, and finally the order has arrived phase. I wanted to make sure the prototype didn’t seem static during each stage.So, to resolve that, I made some animated GIFs that would play during each stage for about 3 seconds each to show that each stage would progress to the next. After solving that issue, I resumed to detailing the page and adding content to finish the page.
The checkout page required more interactivity. Again, I worked on getting the details on the page, then I added the functionality. The interactive functions I mocked up were adding your address and being able to select your payment method. For these interactions, I created overlays and animations between those and the main pages to mockup the features. I added more micro-interactions consisting of hover effects for buttons and toggle switches for the delivery and pick up mode by creating component sets and creating animations between different components.
The checkout page required more interactivity. Again, I worked on getting the details on the page, then I added the functionality. The interactive functions I mocked up were adding your address and being able to select your payment method. For these interactions, I created overlays and animations between those and the main pages to mockup the features. I added more micro-interactions consisting of hover effects for buttons and toggle switches for the delivery and pick up mode by creating component sets and creating animations between different components. Next was the tracking order page.
The profile page didn’t require much interaction as we weren’t building the full version of the app, so I created the outline from the low-fi wireframes and added more details and images to mockup the completed version of the app. Then, I added interactivity where you could hover over certain buttons, and it would lead to another page or change colour. I also added two interactive buttons for food points where if you would click on it, the number of points would display.
The profile page didn’t require much interaction as we weren’t building the full version of the app, so I created the outline from the low-fi wireframes and added more details and images to mockup the completed version of the app. Then, I added interactivity where you could hover over certain buttons, and it would lead to another page or change colour. I also added two interactive buttons for food points where if you would click on it, the number of points would display. Next was the checkout page.
The favourites page was another simple one to complete. I began with detailing the page with content and images to fully mockup the interface we wanted and then I began on the interactivity of the page, the scrollable favourited items. I created a simple vertical scroll frame with menu items users can scroll through.
The favourites page was another simple one to complete. I began with detailing the page with content and images to fully mockup the interface we wanted and then I began on the interactivity of the page, the scrollable favourited items. I created a simple vertical scroll frame with menu items users can scroll through. Finally, the sign-up page for emails.
The last page was simple to mockup. I detailed the page first, so it had all the necessary content and looked like a legit sign-up page, thenI added functionality. For email pages, they usually have text fields for users to input their emails. So, for this page, I mocked up where if the user clicks a text field, it gives them the option to put their email in. But because this project doesn’t require the full functionality of a real page, I mocked up the appearance only. Then I added a simple thank you page when users successfully sign up. Here are the mocked up screens below.
The last page was simple to mockup. I detailed the page first, so it had all the necessary content and looked like a legit sign-up page, thenI added functionality. For email pages, they usually have text fields for users to input their emails. So, for this page, I mocked up where if the user clicks a text field, it gives them the option to put their email in. But because this project doesn’t require the full functionality of a real page, I mocked up the appearance only. Then I added a simple thank you page when users successfully sign up. Here are the mocked up screens below.
The result was a successful mockup of my group’s app, Paprika. It had the pages and basic functionality we wanted the prototype to have, although not all because our project didn’t require that out of us. Nonetheless, my group still managed to create a simple prototype with functionality to convey our idea. Within the app, users can “order” their own bowls and tacos while favouriting items, “check out” and track their orders. Most of the functionality of what a real food app would include. Overall, this was a successful project.
The result was a successful mockup of my group’s app, Paprika. It had the pages and basic functionality we wanted the prototype to have, although not all because our project didn’t require that out of us. Nonetheless, my group still managed to create a simple prototype with functionality to convey our idea. Within the app, users can “order” their own bowls and tacos while favouriting items, “check out” and track their orders. Most of the functionality of what a real food app would include. Overall, this was a successful project.
