UI/UX Design
8 Weeks Project

Balancing Consistency and Adaptiveness

Elevating Grocery Shopping with Speed, Convenience, and Visual Delights

Android & iOS
Quick Commerce
User Interface Design

The Context

Primaro is an commerce company focused on delivering high-quality and fresh groceries. Their goal was to streamline the user ordering process for efficiency and error reduction, and to implement features that engage and retain users on the site.

Through this collaboration, we refreshed Primaro’s visual identity, simplying the ordering flow to reduce errors, introducing new features to retain users, and creating a detailed style guide for consistent branding.

image of onion and garlic on bowl
a woman in front of a laptop, holding a credit card and phone trying to make an online payment
a woman holding grocery bag
a basket with grocery inside

The Challenge

In facing the Primaro revamp project, our challenge was to strike a balance between consistency and adaptability. Despite Primaro's established brand image and design, improvements were still needed.

This is where Natuno came in, undertaking the task of refreshing and refining Primaro's app while remaining true to their existing brand identity.

The Process

Consistency: Creating a Recognizable and Memorable Image

Consistency is a crucial aspect of branding, as it helps to create a recognizable and memorable image.

What is the solution?
By reorganizing its style guide. This guide outlined the use of color, typography, and other branding elements, providing a clear and consistent visual representation of the Primaro brand. So, if any extension occurs in the future, Primaro could use the style guide easily.

Our goal was to ensure that every piece of element produced for Primaro would be immediately recognizable and authentic to the brand.

The Solution

Assets Management

Solving Design Problem:
Improving Figma’s Organization & Assisting with Style Guide Consultation

When Primaro approached us, their Figma file which stored their design elements, such as colors, buttons, icons, and illustrations was still in disarray. Additionally, the visual design within the app was inconsistent and had yet to be standardized in several aspects.

Our initial step then was to reorganize this file in line with Natuno’s standards, categorizing each screen or page. To maintain consistency, we also reorganized its style guide in Figma by gathering their prior design work and providing clear documentation for future reference.

The style guide includes:

Guidelines for logo usage, color, and typography

Component library for ease of use and consistency

Usage guidelines for illustrations and icons within components

Credit Card Payment

Easing Checkouts with Credit Card Payment Option

Primaro wanted to improve its payment options, as offering multiple payment methods has become crucial for online businesses. Limited payment options are one of the reasons why online shoppers abandon their carts without following through on a purchase. So, the Primaro team asked Natuno for help to develop a new feature for credit card payment methods.

Our strategy centered on establishing a smooth payment flow. It began by outlining a low-fidelity design for credit card payment process that considered various scenarios like managing multiple cards and handling errors. Through ongoing dialogue and collaboration with the Primaro team, we ensured our solution met their needs and expectations.

Checkout Revamp

Boosting Conversion through Primaro's Checkout Page Revamp

The checkout page is the final step in the user’s journey, thus it’s necessary to make it as smooth and effortless as possible to boost conversion. The previous checkout and order detail page of Primaro needed to be improved on some parts, such as the call-to-action (CTA) buttons which were not as visible as they should have.

We made the CTA buttons more visible and added essential information, such as delivery time, delivery fee, and payment method selection to ensure users have a complete understanding of the process.


Simplifying Navigation with Contextual Icon Use

Previously, the uniformity of icons in the FAQ section posed challenges for users to quickly scan, differentiate, and locate the information they needed.

To address this challenge, we introduced contextual icons as a solution. We categorized the questions in the FAQ section, and assigned each category a unique icon.

AppStore Banner

Crafting Eye-catching App Banners

As Primaro prepared to launch its product and service, it lacked app banners to showcase on the Appstore and Playstore. The app banners serve as the first impression for users, so it was crucial to accurately reflect Primaro’s quality and values.

To address this, we created graphical content that includes screenshots of the app and copy highlighting Primaro’s features and values.

Next Project,

Have a project in mind?
Call Us!

Help you figure out how to approach your problems.
Help answer questions related to services provided by Natuno.
Get timeline and cost estimation for your projects.