Paw Prints Visual Design
This is a mini case study focusing on the visual design of the app and how those decisions were made. For a look at the entire end-to-end process, check out my full case study here.
Overview: Paw Prints is an iOS app to help reunite owners with their missing pets.
Tools: AdobeXD, Figma, UsabilityHub
Platform: iOS App
Designing for Emily
I approached the visual design with a UX lens, looking first for the problem to find how to best solve it. I worked with my team to establish a persona to help us empathize with our users, especially since nobody on the team was a pet-owner themselves. Our persona's name is Emily, and I storyboarded a scenario of when she would need our app.
Her feelings towards the end range from feelings of panic, worry, and anxiety. The team's UX Design worked to solve her needs, but the Visual Design was to help with those feelings of panic, worry, and anxiety.
Paw Prints Design Principles
In order to center ourselves and the direction for our UX and Visual Design, I worked with my team to establish a set of design principles to abide by. Paw Prints design principles are as follows:
We will listen to our users, our team, and our peers to make sure we are solving the right problems in the best way.
We will empower users to be productive by creating a navigable and intuitive interface that allows them to achieve their goals.
We will design with purpose and with accessibility in mind. Our visual design style and UX Writing strives to promote a welcoming and positive environment.
We will create a visual design that is responsive, inviting, usable, and tells a story.
Establishing Art Direction
The Design principles stood as the pillars for my design decisions from here on out, and it especially affected the visual design and animations and interactions that I eventually created. To get the ball rolling on the art direction, my teammate and I worked on separate mood boards, turning them into style tiles to get a feel for our directions.
The style tile I created focused on the colors of optimism and warmth to cheer up a pet owner that might be sad, while my teammate created a calm but friendly feeling with her prominent blues and illustrations.
We conducted a preference test to find what was the most appealing from each. Unfortunately, the test was split half/half and there was no clear winner, but I took what the participants enjoyed and combined it into 1 cohesive style tile.
The test revealed that users enjoyed the warm aesthetics of my style tile, but preferred the inclusion of illustrations in my teammate's. Taking this into consideration, I reintroduced the blue to bring the sense of calm and dependability, keeping close to our first principle of empathy first. With this, I then crafted a split complimentary color palette, using the browns and yellows to be accents in fonts and imagery.
To add some delight, I took inspiration from Animal Crossing: New Horizons, because of it's rise in popularity during the time of this project. I simplified common pets into illustrations using the new color palette.
Choosing friendly but trustworthy fonts
We had multiple options for fonts to work with, but I ultimately made the choices for fonts with rounded shapes. I chose Arvo for our headers, because a serif font continued establishing trustworthiness. Arvo had hard edges, but the overall shape of the characters were rounded. For our subheaders and body copy, I chose Quicksand, which contrasts very well to Arvo. Not only is Quicksand a sans serif font, the edges are also very rounded, giving off a friendly image. Quicksand is more prominent throughout the app, so finding a readable and approachable font was crucial to ensure universal inclusivity.
The team and I had already sprinkled delight throughout the mockups, but I wanted to really go in on this because we were designing a native iOS app, which had a lot more capabilities than a mobile website. There were 2 main animated interactions in the prototype that I animated, both of which were partially if not fully animated in After Effects and plugged into the Figma file.
The first one was the pet image scanner that I initially proposed during the brainstorm session. Visually this was a very simple task, and I successfully created this through After Effects. I utilized our logo to simulate an image scanning process with our app. In doing this, I wanted the user to feel that the app is really understanding their lost pet's traits to feel empowered in the app's productivity.
The second animation that I made for this app was the splash screen. I first did some research on how other apps did splash screens.
With an idea of how long splash screens should take, I went into action for how to approach Paw Prints' splash screen. I started with a sketch on Procreate, then utilizing the animation function to create a rough gif to see some motion.
After that, I got on After Effects to animate the morph of our logo from search to Paw Prints logo. Exporting to give from Adobe Media Encoder unfortunately wasn't working well, because of how grainy it was. Instead, I exported to an MOV file and imported that into Photoshop, from which I got my gif export. I then plugged it into the Figma file, where I utilized Figma's Smart Animate in prototyping to create the rest of the microinteraction.
This project will always hold a special place in my UX/Product Design journey, because it was really the first time that I got to fully employ my skills as an illustrator and animator. Working on an app opened the doors to more possibilities with microinteractions that just aren't common on a mobile website. Additionally, going to design for iOS was an extremely useful lesson, because I use an Android device as my phone.