Oops!
Some of the screens are not optimized for mobile devices! You might see some clipping in images and wonky layout issues. I am working hard to fix this but in the meantime I would recommend viewing these on a desktop.
Redesigned the screens present on the Advantium ovens offered by Cafe and Mongram for GE Appliances. These screens were redesigned to accomodate multiple items in a single page and to reduce the amount of taps required by the user to get to a specific food item.
To get an understanding of the system, we looked into why the way the information needed to change. Firstly we found that in the current system, there were quite a few taps to get to a particular food item that the user would want to access.
In this case study of trying to cook some Filet Mignon, it takes the user 9 taps on the screen to get from the home screen to the cook screen. This was an unusually large amount of taps to get to the final cook screen. By looking at the screens, a conclusion was reached that to get to section where the initial Filet Mignon option was took too many taps.
The example of Filet Mignon can be looked into with more detail in this information architecture breakdown under the precision cook section of the current system. We focused a majority of our efforts in the precision cook section as it was the one with over 150 menu items.
To access the Filet Mignon option the user has to go through the following path Home > Precision Cook > Fresh > Meats > Beef > Filet Mignon. That right there is 5 taps just to access the cooking options for Filet Mignon. We felt this section could be drastically improved with some restructuring.
The other issue that we came across was ambiguity with naming schemes. Cuisines in particular was highlighted as the name seemed too ambiguous and some users had issues with navigating to certain items located in them. One user even brought up that they didn't think Fish Sticks would be nested under the American Cuisines section of Frozen Food.
The Crisp Reheat function didn't fit the mold of precision cooking. It was better suited to be a section of its own mainly due to its high frequency of usage.
We spent some time brainstorming ideas as a team and put together some initial ideas to get the conversation flowing on how we could make this navigation structure better. We wanted to explore ideas that would use the existing layout of screens as well look into more options that could be developed easily.
After a few rounds of brainstorming and letting ideas stew, we settled on a direction to take for your design.
With our move to 8 items per screen, there were debates on if we show more than 8 items and how could we accommodate extra items in the system. Working with the Human Factors team, an analysis was conducted on the frequency of usage of the items with current Advantium users that spanned from July 2019 to February 2021.
To reach our limit of 8 items per menu screen, we wanted to depopulate certain items in the menu that we felt didn't meet a target frequency threshold in the measured time span. Items that had a frequency of use under 100 considered as depopulation candidates.
With certain items depopulated from our initial list, a major restructure of the information architecture was required. Working with the data obtained from the Human Factors team, the Precision Cook section was split into 8 categories. Each category would either have 8 items listed in it or would be split into in different toggles which would have the 8 items under them.
It is important to note that while 8 items is the maximum limit, there is no minimum limit for the items. Thus certain categories have less than 8 items. Another reason for the lower item numbers was that there would be room to populate additional items if the need arose in the future.
With our information reordered and unused items depopluated, we settled on the final look and feel of the screens on the Advantium.
We had a solid idea of what our design what going to be at this point. Prior to being handed over to the developers, we had an internal meeting to discuss the designs and get multiple eyes on the screens to have internal feedback. With this feedback, a few final tweaks were made to the design
As the design for the prototypes was being built, we worked with the human factors team to validate the proposed menu structure. Validation required the conduction of a usability test.
Participants were asked to find a total of 17 items per menu structure. Items were chosen based on frequency of usage data. The top 15 items were used in conjunction with two items that we felt may be difficult for users to find.
The following is an example of how users would navigate and find Baked Potatoes in the menu structure.
To determine the usability of the structure, we used a combination of parameters to measure how the users interacted with the menu structure. The aim was to understand whether the new menu was quicker and less confusing to use compared to the current structure
Refers to the users correctly selecting the menu item provided in the task
How long did it take for the user to complete each task
Did the user go directly to the item, and if not, where did they look before making their selection
How did users rate the usability of the menu structures
The research results suggested that the proposed menu structure was superior in performance compared to the existing menu structure. Participants completed tasks quicker and more efficiently using the proposed structure. Participants also preferred the proposed structure over the current structure from a usability perspective.
All the participants completed the tasks without skipping or encountering any error. The tasks were not extremely difficult to complete as the users navigated until they found their desired item. So the success rate for the test was at a 100%
Both the Current Advantium Users and Novice Advantium Users completed the tasks quicker in the proposed structure.
The proposed structure received an overall directness score of 82
The current structure received an overall directness score of 79
Directness score is the percentage of users that went directly to their goal without backtracking
The proposed structure received an overall SUS score of 89 (97 percentile)
The current structure received an overall SUS score of 70 (58 percentile)
As the designs were being handed off to the developers, the screens had to be reskinned for a different brand too. The same structure and layout was maintined whent he screens were reskinned for Monogram. The only changes were in the styling. Buttons, colors and imagery were changed to be consistent with branding guidelines.
Looking back to the start of the project, the screens were almost completely overhalued in their menu structure. We managed to get a more direct path to the food items that users were looking for and revisting an example from earlier, to get to cooking a Filet Mignon, the user now has only 7 taps instead of 9 taps. This was a 22% reduction in the number of taps required by the user.
A Figma prototype of the screens for the Cafe Advantium model was built to showcase the elements of the redesign. This was to show different stakeholder how certain interactions worked and how content would be structured.
This was an amazing project! I felt like I learnt a lot on this project. Firstly working with other people and seeing multiple rounds of iterations and design changes really made me improve my workflow. I became more cognizant in use of components and how I could harness their power in making global changes. Keeping track of file versions and implementing change logs and version control on Figma files was an interesting little nugget I picked up.
In terms of design skills, I felt working with the human factors team to be a great benefit. I saw firsthand how the structures that were proposed were tested and these test result helped drive our point of a redesign and advocating for change. The challenge to build multiple screens and paths within a real short window was one I relished as it helped me think on my feet and think quickly. Overall, a great project to work on and one that I will credit for many changes in the way I approach the design process.
