Nectar - Quality confectionary products online

Duration:
3 Weeks
Team:
3
Tools:
Adobe Xd
Whimsical
My Role:
UI & UX Design
Wireframing
Interactive Prototype

Overview

A fundamental change in the way consumers purchase food has been brought about by the emergence of online food sales. Located in Lagos, Nigeria. Nectar Confectionary offers exquisite cakes, delicious desserts, and interestingly designed desserts.

The Problem

Nectar discovered that tracking orders using Instagram (its primary channel for purchases) was less convenient and stressful due to the growing demand from individuals interested in buying a cake from the business. The majority of customers chose to shop via Instagram without being concerned about the wait time. It was due to a poorly structured website, which resulted in a need for a completely user-centered design and experience. Nectar wanted to offer its customers a delightful shopping experience through its website and increase its online presence to attract new and returning customers.

nectar_the process

Heuristic Evaluation

My first step was to identify any issues associated with the current design of the websites, to see where there was a gap, and compare it to the usability heuristics. This provided a foundation for improving the overall user experience.

After conducting a detailed analysis of the situation and meeting with the store owner, I had a few recommendations for Nectar. I advised a redesign and complete overhaul of their product, as well as new product images. The research really helped with a lot of valuable insights and ideas used in the project and to narrow down a roadmap.

nectar heuristics evaluation

Competitive Analysis

I conducted market research and competitive analysis based on the challenge and business objectives. In my research, I found that small-scale cake businesses usually aren't completely custom because they need to accommodate a larger audience. Taking note of direct competitors of Nectar, I've noted the various features they offer.

User Persona

nectar user person 1nectar user person 2

After identifying the goals and pain points of the target users,  I aligned their goals with the business goals so that both users and business will benefit.

nectar business pain & goalnectar user pain & goal

Core Feature

After completing the user persona, I decided to list out the possible features with the client (Nectar Confectionary) based on the user's pain point analysed. These features includes:

Information Architecture (Site Map)

It was discovered that consumers would search in two (2) distinct ways based on user research and testing (as shown below). The ability to handle this search behavior was a critical design decision.

1. By gender and occassion
2. Delivery Type

This helped in the proper categorization of the products and how users can access them from the primary menu bar.

nectar information architecture

The Wireframes

Next, I sketched low-fidelity wireframes traditionally (pencil and paper). Once the general layouts of our screens were agreed upon, I turned to Adobe XD to create high-fidelity wireframes.

nectar wireframe

Design
Visual System

TYPEFACE & color scheme

nectar visual system

CREATING THE COMPONENTS

High Fidelity

The website

Homepage slider
Product category page
After the product has been selected, the product page is displayed. Here, users can select the size, flavour, topper, and quantity of the cake. A review section is also available on the product page for new users to give feedback.
Quick view modal
Shopping cart
A side modal shopping cart that allows customers to easily examine and edit products added to their cart.

Testing & Metrics Tracking

To validate my design, a usability test becomes very vital, I created three (3) specific tasks for users to complete. The purpose of these tasks was to track both the time on task and success rate of users, which allowed me to gather valuable data on the usability of the product.

Tasks:

  1. Your mom’s birthday is coming up, get her a customized chocolate flavoured cake with a note fitted for a queen.
  2. Add three (3) different types of cakes to your cart.
  3. You took interest in our product, create an account with Nectar.

Metrics Improvement

Below are some of the metrics I’d track in the future that would better validate my design decisions on this project:

  1. Conversion rate
  2. Average session duration
  3. Bounce rate

Reflection

Working on this project was intriguing since it allowed me to incorporate my art direction talents by determining how the product images should be presented (as seen on the home page and some products). If given more time, I would perform more tests and interviews with users throughout the ideation (low fidelity) process to observe how they engage with the product before moving on to high fidelity.

In general, it was a pleasure assisting Nectar Confectionary gain/migrate to a 100% online presence (website) to increase sales and improve order monitoring.

NEXT
Roomy