hliejun's Portfolio

TECHNOLOGY

TOOLS

Marvel

CogTools

Photoshop

ABOUT

DESCRIPTION

This project is a UI/UX prototype of a mobile food logger application. The interface is based on an existing prototype application titled Nibble as a module requirement. The altered design is established by considering various UI/UX principles and laws, measured and compared through CogTool.

MOTIVATION

The purpose of this food logger interaction design is to study the application of UI/UX laws and principles to practical design implementations for commercial applications.

CHALLENGES

The main constraint for this project was to identify areas of improvement for an already polished product: Nibble. The suggested designs in our renditions of Nibble were purely based on CogTool analysis, since no product requirements were specified for the project.

DESIGN

RECOGNITION OVER RECALL

Intuitive chromes that are commonly used across applications are chosen, such as the hamburger icon for menu, camera icon for camera, plus, minus icon for adjusting discrete values, and check icon with green highlight to indicate selection. Navigation action buttons are kept within the title, action or navigation bar by convention to prime the user of the application flow and behaviour.

BUTTON TOLERANCE

Buttons are designed to be wide and large for tolerance by providing larger areas of interaction. This can be seen especially in the "Add a Meal" button, the "Results List" items, and the "Add to Diary" button. They are also stuck to the edges as a Navigation Bar element or a floating button for pointing tolerance and consistency.

ACCESSIBILITY

Redundancies are added for accessibility, such as the "Add a Meal" button that compliments the camera button at the top of the screen.

SCROLL, HOMING & COGNITION

Most buttons are flushed to the edge of the screen for reduced homing time. Non-interactable widgets such as the dashboard are resized to save on scroll time. The number of pages to navigate is reduced to lighten cognitive load when processing changes in context.

TEAM

Lee Jia Lin Jia Lin was responsible for her initial design. We worked on the UX flow, slides and CogTool calculations for the combined design together.

Huang Lie Jun I worked on my design and the combined design with Jia Lin.

REFERENCES

CogTool Guide Instructions and tutorials on using CogTool for analysis.

Laws of UX Guidelines, principles and laws used in UX design.

Nibble More about Nibble, an amazing food logger prototype by Chng Xinni.

SAT Solver

Bubble Chat