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

Project Background

At Natuno, we’re passionate in helping our partners to enhance their digital experiences through our expertise in UI/UX design.

That's why we were excited to collaborate with Primaro, a commerce company focused on delivering high-quality and fresh groceries. Their goal was to optimize the ordering flow for users, ensuring a delightful experience throughout the process of ordering  goods.

Through this collaboration, we refreshed Primaro’s look, streamlined the ordering process, added new exciting features, and developed a comprehensive style guide.

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

Our Approach

Our approach to the Primaro revamp project was to strike a balance between consistency and adaptiveness. As Primaro already had an original brand image and design, our goal at Natuno was to refresh and refine the app while staying true to the existing brand identity.

We aimed to help Primaro maintain the consistency of their design, while also delivering a flexible and responsive app that meets the changing needs of their customers.

Consistency: Creating a Recognizable and Memorable Image

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

For Primaro, we approached this 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.

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

What We Do

Assets Management

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.