< Back

Great Pet Living

UI WEBSITE REDESIGN

Great Pet Care

2022, Product Design

Problem

Having two similar products—websites featuring pet articles, one with a health focus (Great Pet CARE) and the other with humorous content (Great Pet LIVING)—posed a challenge. Both sites shared a similar name and used the same template, leading to confusion among users.

Goal
The primary question was: How to distinctly convey the difference between Great Pet CARE and Great Pet LIVING? The chosen solution was to implement UI adjustments, deeming it the fastest and simplest approach to tackle this challenge.

Result

After the implementation of the new UI design, the impact was notable. There was a remarkable increase of +23% in monthly access to both websites, following a comprehensive UI and strategic redesign.

MY ROLE

UI

Style

SOFTWARES

KPI

KPIs

What we thought

What we got

Open rate

CTR

25%

1%

31%

1.54%

BUSSINESS GOAL

Create Its Own Identity

Establish a distinct and unique identity for each website, Great Pet CARE and Great Pet LIVING, to eliminate confusion and clearly communicate their respective purposes.

Visual Differentiation

Implement visual cues and design elements that visually differentiate Great Pet LIVING from the Great Pet CARE website. This ensures that users can easily discern the unique focus and purpose of each platform.

Enhance Liveness

Reflect the lively and fun nature of the content on Great Pet LIVING by incorporating design elements and styles that align with its entertaining and humorous content. This aims to create a visually engaging and enjoyable user experience.

PROJECT PLAN

1. Understand the problem

Competitive analysis
User audience
Functional analysis

2. Brainstorm

Moodboard
References

3. UI

Visual concept
Design system
Components library Interactive prototype
Final test and corrections

Bussiness goals

project plan

"AS A PET LOVER, I WANT TO SEE FUNNY CONTENT ABOUT PETS SO THAT I CAN RELAX AND LAUGH."

WHois this for

WHO IS THIS FOR

Description

People around 30 years old.
Living in the USA.
Full-time job.
Pets are like children.

Behavior

This persona is highly engaged in the pet-loving community, actively sharing and seeking various pet photos and videos. Their dedication extends to maintaining an Instagram profile solely dedicated to their pet, showcasing a passion for sharing adorable moments. They are notably active on multiple social media platforms, contributing to the vibrant online pet-loving community.

Needs and goals

This pet enthusiast thrives on sharing and exploring a plethora of pet photos and videos across social media, maintaining an active presence, particularly on Instagram. Their primary goal is to amplify the visibility of their pet photos, seeking joy in reaching a broader audience. Yearning for an entertaining outlet to spend leisure time, they express a desire for a lively and fun pet-themed website. Their preference leans towards informative articles about pets, as long as they are light-hearted, steering clear of more serious health-related content.

Why the problem?

WHY THE PROBLEM?

The challenge arose from both websites adopting the Great Pet Care template, resulting in striking visual similarities. While distinctions were limited to fonts, colors, and graphic details, the overall template uniformity posed difficulties for users in swiftly discerning the unique identities of Great Pet CARE and Great Pet LIVING.

Study

STUDY

In the initial phase, the team embarked on a comprehensive study by constructing a mood board populated with diverse references, honing in on the preferred style for the project. The examination encompassed an array of websites emphasizing pets, allowing for a thorough analysis of elements, information architecture, and color schemes. This study served as a pivotal foundation, guiding the team in defining the stylistic direction that aligns seamlessly with the project's goals and resonates effectively with the intended audience.

first try

FIRST TRY: Navigating Style Evolution

In the initial attempt, the team sought to infuse a livelier aesthetic while maintaining the current website's color palette and typefaces. However, the outcome did not fully align with the envisioned direction. Acknowledging the need for a more distinctive departure from the previous design, subsequent iterations aimed at exploring layouts that encapsulate a vibrant and wholly unique style.

This iterative process underscores the team's commitment to refining the visual identity to better resonate with the project's objectives and captivate the audience in a fresh and engaging manner.

second try

SECOND TRY: Elevating Unique Design Elements

In response to initial feedback, a revised mood board was crafted to better align with the team's expectations. The focus shifted towards a more comprehensive overhaul of the layout, aiming to introduce distinctive elements absent in the Great Pet Care website.

Departing from pet-centric references, the team drew inspiration from the epitome of UI excellence. While they appreciated the graphic details, the feedback indicated a preference for less conventional dog illustrations. The consensus was that the initial direction resembled the "between the way" concept and required a more stylized approach.

This iterative phase marks a deliberate step toward a truly unique and refined visual identity that transcends conventional boundaries.

Categories with illustrations

Textures / Illustrations

Illustration details / Background colors / Shadow

Illustration on the background

Social media elements

Connect

Backgound graphyc

Connect

Second try redesign screens. Similar to the first try, but with icons on the article's sections.

final try

FINAL TRY: Approved Layout with Innovative Touch

In the third version, the team achieved success as the layout garnered approval. Drawing inspiration from the same references, coupled with the incorporation of new posters, proved pivotal in crafting a visually distinct and appealing design.

The addition of posters played a crucial role in infusing novel styles from diverse design realms into the UI website, contributing to the creation of something both fresh and highly functional. This final iteration stands as a testament to the collaborative effort in marrying creativity with practicality to bring forth an innovative and approved layout.