1. Establishing a brand identity

The Problem

There is no go-to app for pet owners yet, like Yelp for the best restaurants or WebMD for health concerns. The main goal of Spetcial was to create a batman toolbelt for pet owners, and my main task was to set the foundations of the design for it.

Target User Profile

After approaching some pet owners in the San Francisco Bay Area, the team gathered some statistics that the target user group roughly consists of 70% women and 30% men in their 20s to 40s, and they tend to be economically well off.

Competitive Analysis

During my research of major pet store brands and apps, I found that the feel of the logo is similar to baby brands — rounded, friendly, and bright.

Initial Variations

I mocked up some different ideas with different combinations of colors, fonts, brand names, and animals. I kept the logo minimalistic to balance friendliness and professionalism.

Final Logo

Surveying 100 target users of the logo variations revealed that this logo was the most preferred:

2. Setting the Foundations for the Mobile UI

Usability Analysis

Given a long list of items that the team wanted to see in the user profile page, I closely analyzed how the most successful social media platforms such as Facebook and Instagram managed to fit so much information without overwhelming the user.

Mobile Profile UI Design Development

I went through several versions of the profile UI; to improve upon each version, I continually researched existing UI trends and tested the mockups with users.

Profile Version 1

Users were overwhelmed with how crammed everything was when only half the screen was allotted for the profile information. It was also not clear to users what the icons meant without their labels.

Profile Version 2

I switched out the icons to emphasize the numbers instead, and grouped the new action items together. Testing revealed that people could not read the letters at all, and while they noted that the grouping of the action items made sense, they also said that it was too cluttered overall.

Profile Version 3

After much discussion, I decided to allot more screen space to the profile information. In this version, I visually differentiated the basic profile description, action items, and information that can be pressed for more information. Users were confused by the circle icons hanging next to the profile photo.

Mobile Profile UI Final Design

After adding labels, shifting around the action items, omitting the option to view the number of treats, and adding a cover photo background for additional personalization, this was the final version of the mobile profile UX.

UI/UX Mockups

Concurrently, I was quickly designing the UI/UX of other screens so that the developers could have a basic vision of what the different parts of the app should look like. I based the mockups on my research and analysis of the usability of other social media applications.

3. First time user experience strategy for web

Brainstorming

I first brainstormed the problem and sketched out some basic ideas.

My key takeaways were:

• Signing up should be hassle-free and take less than 5 minutes, and users should be able to experience the product first before committing time to sign up.
• Users should be able to discover new content that is relevant to them each time they visit the website.
• Adding awards incentivizes users to take certain actions.

Wireframe Sketches

Next, I sketched out some wireframes on a tablet to map out basic interactions.

UI Design of Homepage

Based on web design guidelines, I fleshed out the homepage on Illustrator to prepare for testing.

Reflections

I enjoyed having some more freedom with a playful user interface since it was an app for pet owners. I also helped out the frontend team with implementing the mockups on React.js.
One challenge was that some of the mockups had to be made really quickly without much time for research and refinement. I learned that it was very important to prioritize which screens should be rolled out to the developers right away and which screens I could take some time to conduct more user tests.