Olá Cookies®

e-commerce for artisanal NYC cookies.

olacookies-add-to-cart-ui-ux

 

My role: User Research / UX Designer / UI Designer / Web Designer.

Deliverables: High-Fidelity Prototype / Woocommerce store / Logo Design.

Project timeline: 2024

Client: olacookies.pt

 

 

 

 

Objective

This project aimed to develop a responsive e-commerce platform

for Olá Cookies, showcasing and selling artisanal NYC cookies.

The goal was to create an intuitive, visually appealing online store

that enhances the customer experience while driving sales.

 

The challenge

 Crafting a user-friendly e-commerce solution that

highlights the artisanal nature of the cookies, appeals to diverse

customer preferences, and ensures seamless navigation across

devices. Additionally, aligning the design with the brand’s unique

identity and integrating effective functionalities within

WooCommerce posed a critical challenge.

 

The Solution

Through extensive user research and competitor benchmarking,

I designed a high-fidelity prototype focused on intuitive navigation,

ample white space, and visually appealing elements that highlight

the brand’s artisanal essence while ensuring a seamless shopping

experience. The responsive e-commerce store was developed on

WooCommerce platform.

 

 

 

 

ola-cookies-home-ui-ux-cover

 

 

 
 

Design Process

The design process followed a user-centered approach,

starting with research and competitor benchmarking to

understand user needs. This iterative process ensured a

clean, intuitive, and responsive solution aligned with

project goals.

design process

 

 

 
 

Key features

We focused on user-friendly navigation simplifying browsing

and purchasing process with intuitive category filters and search

functionality.

 

 

 

 

Banner with CTA Button and View Cart Popup

We added a banner with a CTA button allowing the user

access to the list of products. The user can view the cart

through the View Cart pop-up.

 

 

 

 

 

ola-cookies-home-popup-ui-ux-project.

 

 

 

 

List of products with filters, wishlist, and add-to-cart

The user views a list of products and can use filters

to order by the most recent,  best price, or best-selling.

The user can add products that they most like to their

wishlist or add-to-cart directly from the list of products.

 

 

 

 

 

 

 

User-friendly product page

The user can find product images from different angles and increase the number of products to add to the cart. The user can access the description tab to read more about the ingredients and reviews.

 

 

 

 

ola-cookies-product-ui-ux-project

 

 

 

 

Modern cart page

The layout features intuitive navigation, and ample white space ensuring a seamless shopping experience.

 

 

 

 

olacookies-cart-page-ui-ux

 

 

 

 

 

Initiated checkout

The user adds personal info like name, address, and phone number and clicks on the checkout button to finalize the order.

 

 

 

ola-cookies-ui-ux-project-initiated-checkout-page

 

 

 

Mobile version

Responsive design ensures websites adapt seamlessly

to any device, offering a consistent and user-friendly

experience across desktops, tablets, and smartphones.

 

 

 

 

olacookies-add-to-cart-ui-ux

 

 

olacookies-mobile-version

 

 

 

The result and learnings

Developing Olá Cookies’ WooCommerce store on

WordPress provided valuable insights and results

across user research, prototyping, and development.

User research revealed the importance of simplicity

and engaging visuals led to a clean, intuitive design

that resonated with the target audience.

 

The development phase emphasized mobile-first

optimization, as a significant portion of traffic came

from smartphones and seamless WooCommerce

integration allows efficient product management

and payment processing.

 

 

Next steps

the next steps involve refining the user experience

based on feedback, enhancing the visual hierarchy

for clearer navigation, exploring micro-interactions

to delight users, and iterate on responsive designs

to ensure consistency across all devices.