Overview
Team: Solo project
Role: UX/UI Designer
Format: Mobile
Tool: Figma
Duration: 21 hours
(3 days)
I focused on enhancing personalization within the application:
Create a playful and fun experience that reflects the joy pets bring to our lives.
I also prioritized improving navigation to provide users with greater clarity and control.
02
I conducted a visual analysis of three direct competitors: Petlibro, Whisker, and Voocoo. All three brands had a clean, modern, and minimal aesthetic. While Petlibro and Voocoo leaned towards a more straightforward design, Whisker introduced a playful element. I was inspired by their modern and joyful direction and aimed to incorporate these qualities into my own design. I also explored current UI trends to gain further insights and inspiration.
04
Home Sceen // Mid-fi clone
The project began with a mid-fi clone of the Smart Life app's first screen. I reviewed the screen's heuristics, trends, and design consistency. While the initial design was clear and minimal, I identified areas for improvement.
001
Home Screen// Redesign
Envision starting your day with a personalized "Good Morning" message, featuring your pet's name, a 3D avatar, and their age. To enhance connection, I redesigned the food portion buttons into a sleek card displaying the portion number. A playful micro animation updates the portion from 0 to 1 when you click, adding a modern, engaging touch to the interaction.
03
Visual competitive analyses & Styles
I analyzed three direct competitors—Petlibro, Whisker, and Voocoo—all of which had clean, minimal, and modern designs.
My goal was to create a design that is equally clean and modern, yet playful and highly personalized.To refine my approach, I explored current design trends and confirmed my choices.
002
Schedule screen // Redesign
I aimed to stay true to the original design while incorporating the new rebranding across all three screens. To create a modern feel, I introduced more 3D illustrations, used purple and green tones, and selected updated font styles. I also refined the drop shadows, adding a soft purple glow for a subtle enhancement.
003
Settings Screen// Redesign
Apart from the feel that I wanted to add to this screen with font, styles and colors I noticed a few sections to improve:
The information provided on the sections was very unclear
The text was not fully displayed which created confusion
When selecting a card the title and the content inside the card would not match.
Screen 3 // Redesign
Beyond enhancing the screen with updated fonts, styles, and colors, I noticed some areas that needed improvement. The information on the sections was unclear, with text being cut off and card titles not matching their content. For instance, the first card, labeled ‘Third-party Con...’, featured a Google Assistant logo and related content, creating confusion.
To resolve this, I summarized and reorganized the information, removing unnecessary cards. I decided to display the device name along with an avatar, grouping relevant details in one section. Additionally, I transformed offline notifications into device status notifications, providing clearer context for the user.
Key takeaway
Apart from the feel that I wanted to add to this screen with font, styles and colors I noticed a few sections to improve:
The information provided on the sections was very unclear
The text was not fully displayed which created confusion
When selecting a card the title and the content inside the card would not match.
For example the first card name is ‘Third-party Con...’, however, the logo displayed is of google assistant, the content inside the card was linked to google assistant as well.
I summarized the information and group, removed cards if necessary:
I wanted to display the device name, together with an avatar. The information of the device was grouped in this section.
Offline notifications were transformed into device status notification, to give a clearer context for the user.