Oops!

Advantium Screen Refresh

Worked on the Advantium OTA update which was an overhaul of the design and data structure of the Advantium Series of kitchen appliances for GE Appliances.

For this project I worked with the UX Team to understand the existing structure of the Advantium system and to look into how this could be improved. Working with the Human factors team we develop and tested an improved information architecture and layout design for the system with a major focus on the Precision Cooking/Speedcook part of the system.

My Role : Design, Prototyping and Handoff

Collaborators : UX Team, Human Factors and Developers

Thoughtful Rearragement

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.

THE PROBLEM

Inefficiencies on Tap

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.

Information Overload

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.

THE PROBLEM

How Can We Make Navigation Better?

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.

IDEATION

1

Fresh vs Frozen toggle nested deeper in menu tree
The user has a choice between fresh and frozen in the precision cooking menu. We wanted to see how it would look like if the option of Fresh vs Frozen was moved a lot later into the selection. This way the users have to pick the item they want and then they will be asked about their choice of fresh vs frozen. This would eliminate backtracking in certain cases if the users were unsure about the section they were in.

2

Search and Indexing Options
Staying with the idea of how we could improve our current layout, we were thinking about including a search function. We felt this could give the user a way to quickly search for the exactly item they were looking for without having to go through the menu tree. We looked into couple of different ways of searching.




One was a standard search bar with predictive searching where users could type what they were looking for and the results would show up with a prediction what items were available with the letters typed in.


The other would be an contact style search where the users would pick a starting letter and all available food items under that letter would be displayed.

3

Populate Screen with More Options
The existing layout for Advantium used a ribbon structure that could display a maximum of six elements at once. To help users navigate other menu items that weren't displayed on the first screen, a pagination structure was used.


We wanted to keep the general outline of the ribbon but increase the number of elements visible on each of the screens. This led to ideation of a grid sytle display within a now-expanded ribbon. This way each screen could accomodate 33% more items than before.

4

Combine Parameter Selection Screens
Once the users had selected their choice of food that they were ready to cook, they had to go through a few screens that would walk them through the size, quantity and doneness (if applicable) for the food item. These screens would ask the users about their selections one after the other.



We felt we could combine up to two of the selection parameters within the same screen. The information presented were enclosed in toggle selectors and having multiple toggles helped compare the choices and have an overview of all the choices being made at the same time.

A General Outline Forms

After a few rounds of brainstorming and letting ideas stew, we settled on a direction to take for your design.

DESIGN FREEZE
We wanted to incorporate features from several ideas. We made the major move to expand the ribbon and use the grid style layout for all screens. This was done to increase the number of visible options at one time to 8 items with items peeking out of the side hinting at more hidden away.


We used the idea of a toggle from the home screen to accommodate multiple categories in a single screen. Different toggles would show different options that are related to them.

Addition by Subtraction

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.

INFORMATION ARCHITECTURE

Information Reorder

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.

INFORMATION ARCHITECTURE

Breathing New Life

With our information reordered and unused items depopluated, we settled on the final look and feel of the screens on the Advantium.

DESIGN DECISIONS

1

Ribbon-less Categories
The ribbon like look was dropped in favor of a more cleaner, individual, button style look. This was done to make the categories stand out better and to make them stand out individually as selectors. We also felt this look would highlight grid style structure a lot better.

2

Toggle Parameters Under Certain Categories
Certain categories were given toggle parameters. These parameters would help switch between items that would be related and belong in the same section but would break the 8 item limit if displayed together.



For example, Beef and Pork would be subcategories of Meats so they can be toggled through to arrive at the right food choice.

3

Combine Selections Screens
The ribbon is not completely taken out of the equation. It still makes a comeback in the selection section of the process which was overhauled. Multiple selections in one screen are present with two different button styles to distinguish between the options. Icons are added to the pill shaped buttons to give added context to the action.

Almost at the Finish Line

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

DESIGN TWEAKS

1

Home Screen Tweaks




The Precision Cook feature was renamed to Speed Cook.


The top selector toggle had its background changed to match the style of the buttons.


The custom input feature was excluded from the screens due to some oversight so we had to find a way to incorporate the button on the home screen. A bigger ninth button was added to accommodate "Custom Speed Cook" and a quick access "Microwave 30s" button.

2

Consistent Toggles
The toggle selector deeper into the menu tree had its style changed to make it more consistent with the selector in the home screen.

3

Ambiguity in Icons
The button in the selection screen had their colors altered to match the selectors mentioned before. We also removed the icons as some of the buttons had icons that were unclear and would not fit the context.

Usability Testing

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.

TESTING

1

What We Tested
We evaluated users' navigation in the current menu versus the proposed menu. To best capture this, we observed if they were able to quickly and efficiently find their desired food item within the menu structures.

2

Who We Tested
Current Advantium Users
Individuals who currently own an Advantium and have used Precision Cooking.
Novice Advantium Users
Individuals who are in the market for a speed cook oven.

3

How We Tested
Testing was done remotely. Each participant received the text-only hierarchy of each menu structure. Within each structure, they are
asked to find specific menu items. We then compared these results to evaluate time, efficiency, and usability of the structures.

Treejack 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.

TESTING

Metrics of
success

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

TESTING

Success Rate

Time on Task

Directness

SUS Score

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

Usability Testing Results

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%

TESTING RESULTS

Time on Task

27% Improvement

over current structure

Both the Current Advantium Users and Novice Advantium Users completed the tasks quicker in the proposed structure.

Directness

3% Improvement

over current 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

System Usability Scale (SUS)

40% Improvement

over current structure

The proposed structure received an overall SUS score of 89 (97 percentile)
The current structure received an overall SUS score of 70 (58 percentile)

Same Structure, Different Look

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.

THE PAYOFF

What we accomplished

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.

THE PAYOFF

Figma Prototype

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.

THE PAYOFF

Personal Takeaways

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.


MY THOUGHTS