Your virtual pet's daily journal opens up new avenues for connecting with fellow Berkeley students, transforming every interaction into a budding friendship.
Petkeley
Imagine a virtual campus with your virtual pet that aligns with your interests and syncs with your daily life. As you move through your day, your virtual pet interacts with other pets on campus, connecting with vibrating friends. Imagine exiting a study session to find that your pet has already paired you with a study buddy who is also a die-hard Nolan fan. Or are you overwhelmed with exams in Moffitt? Your pet suggests a boba break with a nearby floor mate.
my role
TEAM
3 UX/UI Designers
3 Product Managers
4 Software Developers
UX/UI Designer
AD Art Direction
DURATION
2 Months
Timeline
Grayscale Releasing
Jun 2022
Feb 2024
Mar 2024
Beta Release
Apr 2024
Present
Launch
Commercialized
I Join
😉
Refined
Initial Petkeley
System Design
Jump to Final Design
Download App
Collaboration is a key tone in the process
We're a start-up just getting started.I closely collaborating with 3+ cross-functional teams and pitched the proposal to the leadership, garnering their full support.
Core Project Overview
Getting support is a core customer journey, but...
project background
Design Process
SPRINT 1
SPRINT 2
SPRINT 3
SPRINT 4
SPRINT 5
Analyze Context
Ideation & Prototyping
Refine Features and Interactions
UI / Visual Design
Usability Testing
Refine and Check
SPRINT 1
Persona, user interview
Flows, information architecture, layout
Initial research based on...
500+
10+
Survey feedback
FullStory user recording sessions
Cross -team collaboration, interaction design
Responsiveness, component library
Testing, iteration
Edge, case, accessibility
Review & Present
Collaborate
UX/UI Designer (Me)
Product Manger
Designer Consultant
Research Consultant
Engineers (About five)
Leadership
Our Project Team
3 Function Teams
PM leaders, Design leaders,
CXS Director
Include the owners of PM
Designer, and Dev in each team
Marketing Consultants
Marketing Team
Collaborate
And MANY more...
App is unclear, lots for different pages and no easy way to navigate
“
“
I'm not clear on what the core function of the product is
The buttons on the app are extra small, and I often tap the wrong ones ...
“
$1.5 million investment
What is Petkeley 🐻？
“
Who are the users? 🎯
“
As friends are graduating, we realize that lifelong friendships often began in seemingly trivial moments: the cold pizza you shared
after a hangover, the Taylor Swift song you noticed on your classmate's Spotify or the charger you borrowed in a coffee shop.
Yet, sometimes, there is a lack of need for smoother context to initiate a connection that could be super meaningful. What if
there was an AI virtual pet that could act as your wingman, effortlessly introducing you to classmates through their pets?
Hypothesis
When it comes to the product experience, new users need the appeal of
a community to increase their appreciation for Petkeley.
Building a shared interest among users and helping them create deeper
product memories strengthens their emotional connection to the product.
Petkeley's challenge was to retain existing users and convert new users into regulars
who would see the unique fun and concept of the AIGC social product.
To begin, we conducted extensive market research to study the strengths and weaknesses of existing competing products. Our goal was to discover the strengths and weaknesses of the products on the market so that we could fine-tune our product to provide a more engaging user experience.
Competitive Analysis
Virtual Map
Direct Competitor’s product
Reward System
Communities
Profiles
Chat
Story & Diary
FEATURES
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
INSPIRING PRODUCT
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
✅
2nd Competitor’s product
APPS
Reddit is a community and discussion platform that focuses on posts and comments. Users can post and discuss content in different subreddits. Reddit's content includes text, images, links, and videos, which users upvote on posts.
On short-form video-based platforms, the content recommendation mechanism uses algorithms to analyze user interactions (watch time, likes, comments, and shares) to recommend videos, ensuring that users are always presented with content that interests them.
Blink enables real-time location tracking for care and connection. Its neon design facilitates exchanging voice stickers and private messages, fostering easy and enjoyable connections and friendships.
Research & Analysis
Diverse App
Multi Sensory Interaction
We found that "watching videos," "looking at pictures," "sharing content with everyone," and "sharing content with a single person" were far and away
the most popular. In terms of content, "images" and "videos" are still the most popular. In terms of behavior, most users mainly "watch" and "share."
Snapchat
Watching Videos
51%
46%
50%
21%
32%
21%
20%
12%
29%
26%
65%
64%
57%
46%
45%
38%
17%
21%
33%
32%
15%
43%
42%
77%
45%
47%
31%
18%
23%
11%
10%
9%
7%
7%
7%
6%
5%
5%
5%
9%
Viewing photos
Sharing content with everyone
Sharing content one to one
Promoting my business
News
Networking
Finding/ shopping for products
User Needs for Trust Building and Scenarios Connection
Content is crucial for social products, but the format is usually limited to images, videos, etc. However, user connection requires more scenarios and simple content can't meet the demand for interaction. Under this trend, an app is expected to attract many users if it can skillfully utilize scenarios
to solve communication challenges in specific life scenarios.
Key Takeaways
Based on our market research, we found the characteristics of social apps with good data performance are:
01
🎯 A clear positioning of the user group
College students have a strong demand for socializing but need more suitable opportunities for
communication. One of the important elements is content + minimal operation + powerful reach to attract users.
03
🌎 Scenario-based to make users feel empathy with the product
Help users solve the pain points of communicating in specific life scenarios, such as family, games, and interests. Use innovative ways to let users feel empathy with the product and other users.
02
💕A reasonable way to match
It is best to realize multiple relationship chains that moderate interaction. For example, through the acquaintance circle and circle of interest, Instagram has an intersection to promote interaction.
Who we are designing for?
Currently
In the future
“To be continued ...”
”I need a fun, safe virtual platform to meet more campus friends“
UCB Student
More UC Campus will be joining
The MVP is about delivering the product's core value to users quickly and efficiently. We prioritized features and ensured that essential functionalities were implemented first, allowing for early user feedback and validation.
Design Exploration
Prioritize & De-Prioritize
Petkeley
AIGC Animal
Well Map
With the help of labeling processing and AI deep learning algorithms, accurate matching between users is realized.
By realistically simulating the Berkeley campus, users can feed and interact with different critters from familiar scenes.
Ideation & Define
Prioritization from highest to lowest 👉
I closely collaborating with 3+ cross-functional teams and pitched the proposal to the leadership, garnering their full support.
🗺️
Virtual Campus
01
Story & Diary
📗
02
🎒
Pet’s Backpack
03
🏫
Apartment
04
🎰
Raffle System
05
Design Revision
Design & Iterate
I closely collaborating with 3+ cross-functional teams and pitched the proposal to the leadership, garnering their full support.
Previous iterations of the old version had messy interface colors and inconsistent
font sizes. Interaction gestures were unclear.
With the iterated version, the storyline of user communication becomes more straightforward
and attracts each other because of similarity
tags, and swipe gestures become concise.
Final Design
The onboarding allows you to customize your hobbies, personality, and course selection, helps users generate three adorable customized virtual pets for you to choose from, and meet more people just like you!
Story / Apartment
Feature Three & Four
From the story feature, you can access
your apartment's features by tracking encounters with users and delving deeper. You can also reach the Petkeley Lounge from the homepage to communicate and provide feedback to other members.
Feature One
Onboarding Process
We offer different Berkeley daytime and nighttime virtual campus scenes to give you a taste of the campus atmosphere at other times of the day. With the story feature, swiping the screen to start new encounters with more users is easy!
Feature Two
Virtual Campus /Story
Accessing Pet's Backpack lets you easily manage your tags and classes and attach your social media info, helping your pet friends learn more about you. Plus, with the Raffle System, users can complete daily tasks for additional physical rewards!
Pet’s Backpack / Raffle System
Feature Five & Six
Motion Storyboarding
Promotional Video
After building the primary design through my storyboards, I collaborated with the PM and Motion Designer on the promotional video.
Promotion Design
Feedback on personalization, usability, and overall design, our team sharing thoughts/issues on the current version of the app
Reflection & Next Step
Team Feedback
Yuki
Eric W
Allen
Joyce
Brit
What Next?
Design with business intentions
Social Gaming Experience Improvement
Reflection (What I learned)
Learn how to communicate design to with stakeholders and all members of diverse backgrounds
Simplify the learning cost for users to use the product and more accurately match users through labeling and experience. Enhanced inviting features for users who reuse the app.
Learning about business needs and how they
play a role in design
Enhance the immersiveness of the product's social attributes and the playability of the game ai social product (e.g., game sound, Tutorial Experience)
