Frenchi App
A personal exploration of an app to help manage my three french bulldogs.
Role
UX, UI design, Branding
Company
Personal project
Duration
2 weeks
Problem
I have three french bulldogs at different stages in their lives, two young adults and a senior. Frenchies require a lot of preventative maintenance and the current apps on the market didn’t have everything I needed to contain all of their health and fitness data in one. So, I wanted to create my own app to track the various needs that are unique to a french bulldog and consider other types of users to make it accessible.
Discovery
I started by creating a mind map to determine what needs I had for the app and start to categorize them. This also helped me figure out a nav structure to start with. I also like to keep notes of random thoughts I have during the process like outliers, things to test or figure out technically later.
After creating my initial mind map, I went deeper and created an affinity map. This helped me take the categories I had initially defined and start to carve out the details. Making these kinds of charts and maps helps me organize my thoughts especially when they are rapidly coming in and serves as a foundation to look back on when creating wireframes.
Process
My favorite part of the process is taking out my sketchbook and start drawing out the ideas I have for wireframes. I started with user statements and then started drawing and writing out the flow. I also will take notes to myself while sketching if something I am working on seems too difficult. I can then go back and start refining once I bring my sketches into Figma and start iterating.
For this particular project I decided to use Miro to help me quickly diagram out user flows based on my sketches and mind maps. I started creating wireframes with the sticky notes from my various mind maps to make sure I wasn't missing anything from the initial discovery phase. Starting with an onboard/FTUX flow helps to establish the types of patterns and interactions included in the app.
Onboarding for this particular app is pretty standard for most onboarding flows, so I turned my attention to establishing a post sign up dashboard. A big pain point for me with my dogs is keeping track of all their vaccinations, so I wanted to build a detailed vaccination record with notifications and something that could integrate with my phone's calendar. Additionally I wanted to see about integrating PetDesk (an app service that vets use to make appointments and track vaccines) so that I could get the vaccination information directly from the vet's office.
This led me to creating a dashboard with an activity feed and custom widgets so that the user can create their own informational hierarchy for what is most important for their french bulldogs. For my dogs, my middle one (Chuchu) has a back problem and needs limited exercise but the youngest one (Ushi) requires a few hours of exercise a day. The senior dog (Thanos) needs to have his supplements and food tracked to help manage weight since he is mostly sedentary.
Design
French bulldogs are a very silly and fun breed and I wanted to reflect that in the branding of the app. I designed the logo and a quick brand guide to get me started with applying the UI to my wireframes. The silhouette of the dog in the logo is a drawing of my middle frenchie, Chuchu, and the colors are very reflective of the fun and care free attitude of a french bulldog.
For the app screens, I started by creating my own design system to ensure a consistent experience. I started taking my wireframes and applying my new design system along with other UI elements to start forming a cohesive dashboard.
Next steps
After completing mockups of the full experience besides a few test screens, I plan to vibe code the app as a prototype and then begin the process of testing it. Once I have my vibe code environment set up then I can rapidly iterate my app to completion. I wanted to go through deep brainstorming sessions as well as full user journeys and maps. This app right now is a playground of creativity for me and allowed me full control and freedom outside of the normal 9-5 day to day.
Other projects
Continuum design system
A scalable design system rebuild for Amazon Quick focused on getting components right, reducing engineering debt, and unlocking AI-assisted tooling.
Hexagon design system
A ground-up redesign of an enterprise design system built to scale AI-first products, reduce tech debt, and empower teams to move faster.
App Theming
Upgraded custom app theming experience based on customer feedback