jaia

Project Outline

01

Discover

02

Define

03

Explore

04

Materialize

05

Testing

06

Deliver

Discover

Research

The market for water bottles has expanded as a result of increased environmental awareness and a greater focus on individual health. A wide range of consumers, including business workers, students, and outdoor enthusiasts, are actively looking for items that combine eco-consciousness, functionality, and attractive designs for both indoor and outdoor use.



Problem Statement:

Many individuals struggle with the difficulty of maintaining beverage temperatures on the go, as well as a lack of stylish and personalized options in the market.



Questions:

⟡How can Jaia step in to bridge this gap?

⟡How can I offer solutions that prioritize both functionality and design?

⟡ Do the current pages allow for effective browsing or discovery?

Define

Identify Users & Features

In this section, the focus is on understanding the target audience and their needs. By creating user personas, it allows me to identify the key characteristics, preferences, and pain points of potential customers. This phase also involves determining the key features and the users goals of the website.

User Persona

By creating these personas, I can empathize with the users, gaining insights that will guide the design decisions and ensure that the app meets their expectations.

My potential target customer is a busy, kindergarten teacher with an active lifestyle.

empathy-img

Empathy Map

Empathy maps provide a visual representation of what users think, feel, say, and do in relation to the website. By exploring their thoughts, emotions, words, and actions, I gain valuable insights into their needs, frustrations, and goals.

Using this information, JAIA can provide a better user experience by addressing these problems through product design and other services.

empathy-img

Key Features & Users Goals

The water bottle website's key features include easy browsing of items, viewing detailed information and reviews, user login, and a streamlined checkout process. The goal is to provide a user-friendly experience, allowing customers to navigate effortlessly and complete their purchases smoothly.

empathy-img

Explore

Low Fidelity Wireframes

Wireframes were created to define the structure, layout, and flow of the user interface. Influenced by user personas and their needs, I sketched low-fidelity wireframes using a structured user flow as a guide.

ideate-img ideate-img

User Flow

In order to understand how users navigated the JAIA website, a flow chart was created. The primary goal of the website's development was to streamline the checkout process for users.

View PDF ↗

Explore

High Fidelity Wireframes

View Live Prototype ↗

Building ontop of the low-fi sketches, the rough ideas have evolved into a refined and interactive design. The high-fidelity prototype offers a realistic representation of the Jaia websites.

Materialize

Developing Visual Identity

In this section the focus is to develop a cohesive visual identity for the Jaia water bottle website. This includes defining a color palette that reflects the brand's values, as well as choosing typography that prioritizes readability and modernity.

Color Palette

JAIA's color palette includes blues for trust, beige for warmth, yellow for energy, and black and white for a clean, modern look. This combination creates a balanced and appealing aesthetic.

empathy-img

Typography

JAIA's typography uses Darker Grotesque for a bold, contemporary feel and Jura for clarity and readability, ensuring a sleek and user-friendly design.

empathy-img

Testing

Maze Platform

View Maze Report ↗

Once the prototype is complete, it is tested on the Maze platform. In order to obtain information about the usability and user experience of the website, eight candidates are subjected to user testing using Maze.

The purpose of the usability testing is to assess the interactive prototype developed for the JAIA website. It is to discover the task success rates, navigation issues, error rates, user engagements, satisfaction ratings, and timing of tasks, to offer insightful information for improving the prototype. The testing consisted of seven tasks in which users were given a specific set of instructions for each task, while using the platform.

What went wrong?

Task 1



Navigation Confusion


There were multiple "Shop now" button links on my website. Which confused users to the intended path.

Task 2



Task Wording Confusion


Users experienced confusion due to unclear task wording, specifically the term "shade," resulting in a significant 44.4% misclick rate.

Task 4



Unexpected User Path


The issue of unexpected user paths, resulted in a 57.1% drop out rate from the intended course.

Solution

Task 1



Navigation Confusion


Improving the clarity of the navigation menu to reduce misclicks, which allows users find the Shop button easily

Task 2



Task Wording Confusion


The solution involves simplifying the instructions to eliminate confusion.

Task 4



Unexpected User Path


By further analyzing the user routes, enhancing visual cues, and refining instructions will give better guidance for user.

Deliver

Launching Success

View Revised Prototype ↗

In the Deliver phase, I reviewed the Maze report testing findings, which provided valuable insights into user interactions. Using these insights, the JAIA website was revised to be more user-friendly, by incorporating intuitive navigation, as well as streamlining the checkout process.

View More Projects ↗
emoji

Roseann Duarte-Tampos

Hand coded by me, powered by Boba

Let's get in touch!

linkedin icon mail icon