What Is Poke Spots?

Orontes, a yogurt startup, that seeks to disrupt the dairy market with a uniquely designed yogurt product.

Summary

In just 2 weeks, I collaborated with the Founder and Brand Manager to redesign their website to align with the product's design language.

Due to time and resource constraints, user interviews were not conducted.

Topics Covered

The Problem | The Solution | The Research | Key Pages | Design Changes | Received Feedback | Looking Back

Date
2023

My Roles
UX/UI Design

Tools Used
Figma

Deliverables
User Journey, Wireframe, Low/High Fidelity Prototypes

Sector
Grocery

Time Period
2 weeks

New Company, 1 Product

A small company with only 1 product.

Located in Pennsylvania

No online presence, no social media, no stores with product.

Company Goal

Disrupt the current dairy market with a less processed, creamier, richer, and sourced locally product.

Compete with current leaders in the market.

The Problem

How might we redesign Orontes website when they have no online presence at all.

Inconsistency With Product Label

Orontes website deviates from their product label, potentially confusing customers who discover it on grocery store shelf.

Weak Information Architecture

The site contains all the necessary information but is not laid out properly that will directly impact future customers.

The Solution

Redesign the Orontes website by respecting the end users, product, and company.

The Research

The research is based on an in-depth persona and significant artifacts from the product label.

Clara Garza

She's a fitness enthusiast in her late 20s that wakes up early to go a for a run and later shops at her local organic store. During her breaks she reads various fitness articles ranging from diet, exercise, and lifestyle.

About Her

• Loves working out

• Jogger

• Researcher

• Loves trying new things

Pain Points

She loves exploring the variety of products at her local organic store, trying them out, and doing research to get the most out of both the products and the companies that make them.

Reference

Product Label Breakdown
Font | River | Buildings | Mountain | Decorative Ribbon

Key Pages

These pages offer a great snapshot of the revamped Orontes website.

Home Page

Keeping The Consistency

Specific elements from the label were incorporated into the redesign to keep the site consistent with the product.

Decorative Ribbon, Buildings

Decorative Ribbon, Buildings

Product Page

Separate Yet Together

Easier Navigation
Put two products on one page to save clicks for info.

Visual Harmony
Used same product label color for quick product recognition.

Clear Organization
Arranged content from general to specific. 

About Page

Following Human Behavior

People Skim Text
A common human habit is scanning entire pages instead of reading them.

Proper Hierarchy And Content
Dividing the story into sections (beginning, middle, end) helps new visitors to understand the gist of the page along with the aid of pictures.

Looking Back

Looking back is the roadmap for the next steps.

What I Did Well

Achieved a successful website redesign, aligning it seamlessly with the product design.

Significantly reduced user hassle through improved visuals and strategic content placement.

What I Can Do Later

Contact the founder and brand manager to discuss their site experience and available resources for user interviews.

What I Would Do  Differently

Suggest extending the project timeline for a deeper exploration of company goals and resources.

Also, include a list of in-store product locations.