A hypothetical app for dog owners to track their dog's moods and actions anywhere.
App Design, Front-end Development, Back-end Development
HTML, CSS, jQuery Mobile, JavaScript, MySQL, Figma, Illustrator
Individual Project
2.5 months, School project
I designed a web app that provides a fun and intuitive way for users to document their dog's behaviors. Over time, users can not only learn about their dog, but also document their journey. The entire app was designed and coded by me.
When owners first welcome dogs into their home, it takes a great amount of time and effort for both parties to be comfortable with each other. Dog owners are looking to build a strong bond with their pet by understanding his/her needs and wants. Owners need tools that will speed up the process in order to empathize and train their dogs appropriately.
Pup Diary provides dog owners with a location diary to help them better understand their dog. Users will be able to create a customized list of moods and record their dog's actions at various locations. As a result, they'll be able to recognize the moods/actions next time it happens and respond accordingly. In addition, users can also document their dog's journey to different places.
View of all recent locations and tap on any woofmojis to view details.
View of all the moods and tap on any to see locations related to the mood.
Discover dog's mood patterns by looking at relevant photos and locations.
Christie just got a new puppy, Holly. She’s trying to make Holly’s transition into a her home easier by learning about her. Christie takes Holly out whenever she can and loves to see her experience all kinds of new things.
She always puts Holly first! Christie cares for Holly and is affected by her wellbeing. She observes and learns something new about Holly every single day. Christie also shares Holly’s daily life with her friends and family.
Following the persona, I began to map out a user's movement through the app. This is a crucial step to ensure that I've considered the different ways a user can add a location, add a mood, and add a location to a mood. In addition, this will serve as a guide from now on to build an intuitive interface.
I started by creating lo-fidelity sketches then digital wireframes where I planned the layout and interaction of the interface. Without the distractions of visual design, I was able to focus on the flow between each screen and refine it before building it out in code. Here are the wireframes for the key screens in the app.
To begin building the app, I established the branding style for Pup Diary. The app icon is a combination of a dog's paw and a location pin. I selected two primary colors to present the information in a neutral and calm manner. In order to make this a more delightful experience, I specifically designed the woofmojis (or dog mood icons) to engage users. With this guideline, I started to code the basic structure of the app and style the CSS accordingly.
I built a fully coded prototype for users to click through in the usability testing. In this prototype, there is no real data or map yet. I want to receive feedback before moving on to connecting the database and Google Maps API. Below is an example of my HTML and CSS code with corresponding screens.
Users struggled with the changing navigation icons at the top of the page. They're used to a static nav bar so they click on the wrong links and end up on the wrong page. To fix this, I switched back to a sticky nav bar at the bottom with all 3 tabs shown. In addition, they also thought the narrow search bar makes the page looks cramped at the top half of the screen. In the revision, the search bar is slightly expanded without occupying too much space.
When users clicked on the location pin, they were expecting to see more than just the woofmoji and the mood name. They wanted the pop up to tell them more than what they already know. I improved the design by inserting a photo taken at the location for a quick reminder of that location. In addition, I removed the edit button to prevent users from clicking on it accidentally.
As users are looking at the location detail and the add/edit detail pages, they mentioned that they're too similar and boring. They also didn't care for the longitude and latitude of the location. In the final version, I replaced those geographic coordinate with a map and the woofmoji, which are more meaningful to users.
Sign in to see a map with all recent locations and tap on any woofmojis to view details.
Owners can view all the locations related to the same mood to discover patterns.
Directly add a new mood or select from existing moods to record the dog's action at various locations.
Quick and easy editing process to modify the details within one click.
Sign in to see a map with all recent locations and tap on any woofmojis to view details.
Owners can view all the locations related to the same mood to discover patterns.
Directly add a new mood or select from existing moods to record the dog's action at various locations.
Quick and easy editing process to modify the details.
This is a hypothetical project focused on strengthening the relationship between users and their dog by documenting his/her moods. If I were to launch this app, I would look at the following metrics to measure the success of my designs.
The most important measure is the number of users on the app and the quantity of location pins for each user. A growing user base implies that dog owners are finding the app beneficial in their journey. Moreover, the number of location pins indicates that users are regularly documenting their dog's moods on the app.
Another way to measure success is by looking at the rate which the same user adds a new location pin. From this data, I can assume that users are having more interactions with their dog. This means that they've found patterns and leveraged it to better understand their dog. They may also be trying to uncover more patterns by increasing the rate they record incidents.
By being both the designer and the engineer in this project, I pushed myself when I can and compromised when I can't. There will always be limitations when implementing designs, which is why there must be open communication to ensure that the project goals are met. In this challenging project, I also learned more about HTML and CSS to better work with engineers.
I've only had experiences coding websites prior to this project, which is why I was amazed by how much I can do with pure CSS. I built the prototype version for usability testing with mainly HTML and CSS. It was rewarding to observe how users interact with the app on their phones like a real app.
From the usability testing, I found that users enjoyed the app partially because of the woofmojis. They love looking at it and populating the map because it was very engaging. I realized that simple illustrations can enhance user's experience greatly when done correctly. It encourages me to use more illustrations in my future designs.
In this project, I assumed that users only have one dog that they want to track. However, the reality is that users are likely to have more than one dog and thus, need the ability to track multiple dogs with the app. If I were to develop this solution, this will be the first challenge to tackle.
It goes without saying that dog owners have a special connection, whether it's sharing stories with one another or watching their dogs play together. I want to create a social circle on the platform where users can share dog photos with each other. This will bring users (and their dogs) together by encouraging them to share more.
Since users find the woofmojis so appealing, I want to explore ways for users to customize and create their own woofmojis. In the current app, users can choose from a set of 6 woofmojis to go with a mood. By allowing users to create their own, the woofmoji can better illustrate their dog's mood.