Foodgies Brochure

For the final presentation of our application, we had to create a brochure for Foodgies.

The brochure had the following contents:

  1. Overview
  2. Features
  3. Function

This task of creating a brochure for our application was surprisingly easy as all the work we’ve done so far since the beginning helped focus our ideas and features we wanted to integrate in Foodgies.

From the project description and project requirements, it helped clarify an overview of the type of application we wanted to create, to the multiple wireframes that we kept iterating over until we felt that we had the right features/functionalities our group first envisioned when coming up with our application.

The brochure came out looking like this:

group-a-foodgies-brochure

Marker…and action!

It’s movie time!.. sorta. We’ve been on set shooting our first promo video for the product this week. It features the illustrious acting talents of our very own Kevin Dang and Dat Nguyen.

We’re currently at the edit stage and once the final cut is ready it’ll be ready for its world premiere this Tuesday at our presentation.

We hope you look forward to it!

High Fidelity Prototyping

After taking on board feedback from individuals during our paper prototype testing we decided to make various changes to improve navigation, particularly in the capture mode, to help make it easier for users to use the app.

The main changes were as follows:

  • Changed the back icon in the capture mode to a menu button instead
  • Add a view shoppers button for easy access to current active shoppers
  • A simplified capture button which can capture both barcodes or the whole product
  • Product information pages make it clearer who a product is and isn’t for

If you want to check it out, you can visit: https://marvelapp.com/49ihb5j/.

We’re happy to hear any suggestions you may have for improvement.

High Fidelity Wireframing

After going through the first rounds of paper prototyping and then finalising the final wireframe of our product, we decided to create a quick high fidelity version of that wireframe so that when it came to creating the high fidelity prototype, we had a better gauge of the look and feel.

To create the high fidelity wireframe, we used Figma (an interface design tool with real-time collaboration) that allowed us to iterate faster and spend more time on the more complex/challenging issues.

Sign In Page

screen-shot-2016-11-28-at-16-02-31
Profile Screens

screen-shot-2016-11-28-at-16-02-16

 

screen-shot-2016-11-28-at-16-03-04

screen-shot-2016-11-28-at-16-03-25

Menu
Menu Screens

Round 2 of Prototype Testing

After spending the past week improving our first paper prototype, today we have finally tested out our new updated version and gathered some useful feedback which would help guide us towards our high fidelity product.
We mostly focused on changing the sections that testers found confusing last week and used their feedback to build and improve on top of our first paper prototype since there was generally good feedback to suggest that we already had a solid structure.

The were a few recurring issues that users spotted and found confusing. These were:

  • The Hamburger icon and its use was not well identified.
  • It was not clear who testers were shopping for in capture mode.
  • Some feedback bars were mistaken for input buttons.
  • Some buttons broke the app navigation fluency.

We decided to look at each individual point separately to ensure that we could really focus on improving the problem that our users found difficult. We thought that this was the best way of approaching the task as we would not be distracted by the issues of other interface elements and could work on improving one aspect until it was perfected.

Analysing each problem that was reported helped us to come up with our current updated paper prototype which is starting to take shape and is getting closer to out final high fidelity prototype.

As well as getting external users to test our product, we also thought it would be beneficial to test the prototype among ourselves. From doing this, we found that the hamburger button was not really useful as it would only contain two buttons: a help section, and a button to update who you were shopping for. We realised that the hamburger icon did not directly convey this information and so decided to swap the hamburger icon with something that users would easily recognise as an ‘update member’ function:

WhatsApp Image 2016-11-15 at 14.25.32.jpeg

There was also an issue with the profile customisation page we found – specifically the allergy selection process. To improve the page, we tried to make the interface clearer. For instance, once the user selects their dietary requirements from the list, we had a box which contained their options. However, the placement of this box was confusing as many people thought this to be a button that could be interacted with. In order to resolve this, we moved the box just below the list so that the user would first see the list and then a clear feedback when they added their allergies.

WhatsApp Image 2016-11-15 at 14.25.32 (3).jpeg        WhatsApp Image 2016-11-15 at 14.25.32 (1).jpeg

Finally most testers found it difficult to understand who they were shopping for when they were on the camera section. To attempt to resolve this issue, we found a temporary solution before the second prototype test and then a final one after completing it.
The first solution would work together with the new swap member icon that we have just added;
when users open the icon, a list of active members would pop up with the option of adding new ones. The problem we encountered, was still the visibility of the icon;
a majority of our testers barely saw the new icon design and skipped over it.
The change we made after the second round of testing seemed to be the best option as users understood the section better. We added the icon next to the scanning button to make it more visible and user accessible. When you user clicks on the icon, a bar would pop up vertically along the screen capture and shows the current people you are shopping for and the option of adding more shoppers directly from the bar.

WhatsApp Image 2016-11-15 at 14.25.32 (2).jpeg

Round 1 of Prototype Testing

Earlier today we tested the paper prototype that we collectively designed to model our mobile app. We created a number of different tasks that we wanted the user to complete in order to help identify keys problems with the user interface. The areas we focused on were:

  • creating a new user account
  • adding food allergies of household members
  • scanning products to identify their allergy content

We performed testing with three people all who had different levels of experience with diet monitoring applications.

Overall, the impression that users gave us was quite positive. They were impressed with the simplicity of the app and the general ease of use for common tasks. However, one of the main areas which was identified as a weakness was in changing up the active users mid shop which was confusing for all of our users; they later told us that the “hamburger” wasn’t an obvious way to achieve this. Other things which were noted were that some elements such as info bars appeared to be tappable when in fact they were not.

We are going to use this feedback to make a number of changes including the following:

  • changing the hamburger icon to a “swap users” button
  • reposition some of the feedback bars so that it is less likely to be perceived as tappable
  • more visibility on the capture screen of who is being shopped for
  • relabelling of some buttons to make it clearer as where they take would take the user

We will perform another round of testing with these new changes before we move to the final stage of prototyping where we will produce a high-fidelity prototype.

Paper Prototypes 4/4 – Initial testing version

Having individually created paper prototypes for the project we decided to meet to discuss some of the pros and cons of our various individual designs. Based on upon our discussions we decided to create a new version which incorporated some the most sensible design concepts from each of prototype.

We started by creating wireframes on paper that highlighted the order that a user can perform certain actions. The wireframe is shown below:

We then went about creating the prototype that we will use on Monday to perform some initial testing with potential users of the product. The prototype is shown below: