Grub Guru

From 0 to 1, together with the app's founder, I designed the app from the visual side and improved the UX.

70% handoff time redused

85% immproved collaboration and transparency

What is DiMS?

GrubGuru is an app for tracking calorie intake, keeping a food diary and losing weight effectively. The app automatically calculates calories and nutritional values based on the selected portion. The intuitive interface allows you to instantly add meals to the database. GrubGuru calculates individual calorie requirements, taking into account age, gender, activity level and training goals.


My role

  • UX/UI Design

  • Design System Documentation

  • Accessibility Design

Team

  • App founder - Front Developer

  • UX/UI Designer

Project info

GrubGuru is an app for tracking calorie intake, keeping a food diary and losing weight effectively. The app automatically calculates calories and nutritional values based on the selected portion. The intuitive interface allows you to instantly add meals to the database. GrubGuru calculates individual calorie requirements, taking into account age, gender, activity level and training goals.

Context

There was no design system, no design style. Developers relied on their own intuition to maintain a consistent user interface and consistent UX patterns. Every button, form looked different.

Project

The best products focus on simplicity, usability and clarity.

The best products focus on simplicity, usability and clarity.

The best products focus on simplicity, usability and clarity.

Context

The basis of the DiMS design system was an atomic structure that broke down all components into their smallest parts. This method provided flexibility and consistency in the creation of interface components.I audited all current user interface components and classified them as: Atoms, Molecules, Organisms or Templates.

DiMS application redesign goals:

  1. Consistent design style:

Unifying all visual elements to give the app a consistent and professional look across all platforms and devices.

  1. Optimise UX/UI functionality:

Improve navigation and interaction to make it easier for users to perform tasks and use the application.

  1. Improved visuals:

Applying modern UI design trends and best practices to create an interface in line with current user expectations.

  1. Developing new functional modules

Ensuring seamless integration of new modules into the existing application structure.

Auditing the existing design

Building the style guide

System building approach

I started with basic elements such as typography styles, colours, inputs, buttons, forms and icons.

These elements formed the foundation of the design system and were used to create more complex components.

No branding guidelines were given - except for the colour, which was not quite right. I therefore used the company's existing website to build the design system, along with all my knowledge of colours, logos and branding, which I have had for years.

It was important to allow users to distinguish between different states or actions, such as the default state, hovering the cursor, etc., and to select appropriate graphic and text elements. Each shade provides feedback to users, making products easier to use.

Result

The implementation of the design system has delivered the expected benefits:

  • Improved collaboration

  • Significant improvement in design efficiency

  • Increased design flexibility

  • Faster development of new tasks

  • Corporate colours finally established