Assignment 4E

Usability Analysis

This final page will document the final redesign of the Fooducate app, based on our team members' redesigns and suggestions from peers. We will be displaying the original designs so that the viewers can see what exactly was changed and improved. Our team will also be evaluating the strengths and weaknesses of the overall redesigns and explaining them in detail.

Prioritization of Issues

After concluding team members' usability tests, we identified 4 major usability problems: confusing registration procedure; limited choice of units selection; poor displayed home page and buttons; poor consistency across systems. Detailed descriptions of each question will be presented in the following section(redesign ideas and mockup).

Registration is the first step that every new user of the App has to go through, and it will collect data that are needed to better customize the health plan for users. So we considered this is relatively more important than other problems. In addition, the improvement in registration will only be related to simple interface redesign. Considering effort and importance, we rank this as no.1.

The measurement limitation will hurt the accessibility for a wide range of users (users from different countries or with different cultural backgrounds). For now, the app is only available in the U.S, but there can be a severe problem if the Fooducate App wants to attract/serve users world-widely. Since changes to measurements will influence the current database a lot, we rank this as no.2.

Currently, our users did not have huge trouble interacting with the home page interface. But some minor design issues that make the home page confusing for first-time users were reported during the usability test. So redesigning the homepage will be our no.3 task.

In addition, we noticed an inconsistency between Android and IOS systems. To be more specific, the overall color scheme is different (orange for IOS and blue for Android). There is also a difference in menu design and layout. Since major changes to the entire application are needed to solve this problem, we will not address it in our redesign.

Redesign Ideas and Mockup

Issue 1: Registration

Old design: The old redesign uses the word "Gal and Guy' which may not be terms that many users know or use when differentiating gender. This problem is related to the "Match between system and the real world" heuristics which requires a product to speak the language that is familiar to users.

First redesign: For our first redesign we decided to completely delete the words "Gal and Guy" and replace them with the terms "Female and Male" as they are terms that are more generally known among the public. This creates less confusion with the lingo and helps users whose first language is not English.

Furthermore, we add a "skip" option for individuals not comfortable or willing to answer that question at that exact moment. Ultimately, we would like the app to be as gender-inclusive as possible because it is intended for use by anyone who wants to lose weight or track their caloric intake for daily nutrition.

Peer's suggestion: Due to the gender term being on opposite sides, one of the comments we received suggested that put the female icon on top of the word "female" and put the male icon on top of the term "male". This way it is more intuitive. Also, there was another comment pointing out that there is no statement to inform users that the approximated caloric intake can be edited.

Final redesign rationale: In regards to the gender issue, we will be adding the terms "Female & Male" with the corresponding icons above each word. So that there is much less confusion with the original lingo used of "Gal or Guy". We are also keeping the "skip" function in our first redesign since it received positive comments from our peers.

As for the calories edit, we are going to write a permanent statement above the calories that says in bold font, "Click on the numbers to edit your caloric intake for the day". So that users are aware that it is an option for them in regards to being able to change this particular feature.

Issue 2: Unit of measurement

Old design: In the current Fooducate app, the measuring units being used are pounds, oz, and feet. Those units are commonly used in the U.S and can be troublesome for certain user groups. Also, some food in the database is only measured by "cup" or "serving". The app itself does not have a standard to define the actual amount of one cup or one serving so that every user might define them differently. This design violated the "consistency and standards" rule from the Nielsen Heuristics.

First redesign: In our first redesign, we create a measurement unit option in the setting page. Users can choose the unit that they are comfortable with while recording food information or personal dimensions. Also, we decide to make the idea of "serving" optional. When uploading nutritious information, measurements like pounds or oz are mandatory. There is a checkbox for users if they want to make this amount "one serving".

Improvement: The first redesign indeed improved accessibility to some extent, and received positive replies from peers. But when re-evaluating our redesign, our group thinks that using the same unit for both body dimensions and food information can be inconvenient. For example, if a user chooses "lbs" as their preferred unit, it can be complicated when entering a relatively small amount. So we decide to separate the selection of body measurement and food measurement.

Final Redesign rationale: Our final redesign in the measuring system will be adding two preference options, body dimension and food recording. In the body dimension option, there will be a weight measurement and a length measurement. Users will choose their preferred units for both. The food recording option also has 2 groups: food and beverage. Users are also welcomed to change units while adding/editing their intake.

Issue 3: Home page

Old design: Users can add their food into the tracker by clicking the plus button("+") on the homepage. And on the menu bar, the icon of the current page is always lightened up so that users can be informed about which page they are currently on. These designs show that Fooducate has good visibility of system status, however, some minor problems occurred during the usability test alert us that the current visibility is not enough. For example, one of our users spent a long time finding the adding function on the homepage. And when the user tried to search for a food item, there were no auto-complete or searching suggestions that informed the user she was using the search function.

First redesign: In our first design, we made the adding function more noticeable by largening the plus button and adding colors. And according to the recognition rather than recall rule of Nielson's Heuristics, We added suggestion dropdown for the search function.

Peer's suggestion: We received two comments about redesigning the homepage. One suggested us to pull out all functions under the adding function in order to be used as "quick add" buttons. Our team agrees that this is a good idea but we declined it takes up space in the homepage. Also, "every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility" (Nielson, 1994), we want to keep the homepage as aesthetic and minimalist as possible. Another comment suggested us to make the menu bar more prominent and we are very happy to accept the suggestion because our goal for this issue is to improve the system status visibility of Fooducate.

Final Redesign rationale: In our final redesign, we will enlarge the plus button and make it bold. We will also make the menu bar more visible by highlighting the icon for the current page instead of lightening it up in colors. For the search function, we will add more suggestions and make them bold.

Conclusion

Our team really enjoyed analyzing the app, detecting the problems, and resigning it. In this assignment, we improved our redesigns based on peers' advice and a better understanding of the course materials. According to our final redesign ideas, the Fooducate app would have better visibility of system status because the adding function and menu bar are more prominent. And Fooducate would better match with the real world since users could choose their preferred units of measurement and select their genders that are described in a more common way. Also, auto-complete for suggestions would improve users' efficiency in using the search function. By accomplishing this project, we realized that a good design needs not only good ideas but constant revision and critique. We are satisfied with the final redesigns and even though unifying the color scheme between Android and IOS systems is somehow beyond our ability for the moment, we still would like to give it a try in the future.