View Clickable Prototype

Introduction

OVERVIEW: For my capstone project, I was tasked with defining my own problem and designing an app prototype to solve this problem. Luckily, as a new pet owner, I faced many noteworthy challenges relating to caring for my new pup Leo, and I had many problems I wanted to solve.

PROBLEM: Making time for a pet while working full-time is no easy task. I often found myself racing home, joining meetings late, and rescheduling/canceling plans all because of Leo. I tried using an app for pet sitting and pet walking, but I was nervous about strangers, and paying for a dog walker to come once a day started to get expensive.

PROPOSAL: The idea for this app came to me one day when I was rushing on my lunch break to take Leo out before my next meeting and I ran into five other dogs and their owners in the lobby all scrambling to do the same. In this moment, I thought it would be so nice if we could take turns taking the pups out, so we would only have to scramble one day a week during the lunch hour. I considered introducing myself, but instead our dogs just sniffed one another and we went on with our day.

I went back upstairs and the idea for Pet Connect was born. Pet Connect would be a community-based platform that connects pet owners in a specific apartment building to facilitate pet care coordination while building community and pet connections.

PROJECT SCOPE: I was able to define the features, scope, and pace of this project. For the MVP prototype I decided the app should allow pet owners and pet lovers in the same building to (1) communicate with one another, (2) plan pet events and meet-ups, and (3) coordinate pet care. I allowed myself one month to conduct research and build the first iteration of the app prototype.

ROLES & RESPONSIBILITIES: For this project, I am responsible for UX research, user flows, information architecture, wireframing, visual design, prototyping, and testing.

USERS & AUDIENCE: This app is designed for pet owners and pet lovers in urban areas that reside in property managed apartment buildings.

PROCESS: For this project I used my own adaptation of the double diamond framework with four key phases; discover, define, develop, deliver.

1. During the discover phase, I focused on user research. I conducted a user survey with over 100 participants to understand if this was really a problem worth solving and to better understand my target audience. I also used the research to create my personas.

2. In the define phase, I started by writing user stories. I then focused on information architecture. This app could become very complicated very quickly, so working through the app architecture was critical. In this phase, I also designed and tested wireframes.

3. In the develop phase, wireframes were refined and branding & visual design including typography, color, etc. were applied to create high-fidelity prototypes.

4. Finally in the deliver phase, prototype usability testing was conducted. Results were analyzed and used to inform the final delivery of the app.

01/Discover

Because Pet Connect was my idea, I spent a lot of time in the discovery phase to ensure this was an idea worth pursuing. I conducted a competitive analysis of other community-based apps like Next Door, Care.com and Property Management own communications platforms. I also researched pet care competitors including Wag! and Rover. After determining what I felt the strengths and weaknesses were of these competitors, I created a user survey to get a better sense of what my target market thought.

In addition to getting a better sense of strengths and weaknesses of my competitors, some additional goals of my research was to:

1. Confirm this is solving a real problem that people have; is this something people need? is this something people would actually use?

2. Understand target demographic habits & behaviors; which apps are most commonly for community connection, for pet care? Aside from apps, what do people normally do for pet sitting, etc.?

3. Understand opportunities; what are the most important building amenity features apartment buildings offer, if/how apartment buildings are “Pet-Friendly”, is “Pet-Friendly" used in building marketing, what community connect based platforms apartment buildings provide, what do people like/dislike about current community based apps? What could be better about their current experience?

User Survey Key Takeaways

• There are many people in apartment buildings with pets that are coordinating pet care. Pet owners are open to using apps to coordinate pet care but prefer to ask a friend.

• Target demographic values pet friendly amenities (pet-friendly, pet spa, dog run, etc.) when considering which apartment building to rent/buy – meaning the more pet-friendly amenities building have to offer, the more value they can sell to prospective tenants – which may help with app buy-in from property management companies looking to attract new tenants

• There is opportunity to have a better platform for connection in most apartment buildings as most that exist are not used

• There is also an opportunity to avoid competitor weaknesses (cost & safety concerns) by:

  • Not encouraging monetary transactions for pet sitting. In exchange for pet sitting, community members can choose whatever they feel comfortable with – walk for a walk!

  • By marketing this as a community-based app, and allowing users to build connections with neighbors, can alleviate concerns around “strangers” watching pets

Persona Development

User surveys also helped me to shape two key personas. The two personas below each have a unique set of needs and behaviors that would drive how they use the Pet Connect app. I made sure to consider both personas when designing the app and prioritizing MVP functionality.

02/Define

After developing my key personas, I took a deeper dive into understanding our primary users. I used this analysis to identify my high priority user stories:

03/Develop

After solidifying my site map, I was ready to begin wire framing and bring my ideas to life. Below is the first iteration of wireframes I designed. The top row of screens are for “new users” while the bottom row is for “existing users”.

After the first iteration of wireframe, I conducted user testing. Based on feedback from testing, I implemented the following updates to my wireframes:

• Taller buttons to meet accessibility standards

• Corrected margin spacing/alignment

• Used relevant icons

• Increased navigation title sizes per IOS guidelines

The next step in my design process was developing the brand identity for Pet Connect. Because being a pet owner is fun, I knew I wanted the brand to feel fun and energetic. However, because there was a concern about competitors and interacting with strangers, I also wanted the brand to feel friendly, safe, and inviting in order to encourage community connections. I went through many iterations of branding until I found a combination that embodied what I was looking for. Below is my first iteration of visual design and branding:

I wasn’t convinced this style was embodying the brand identity I was after, so I decided to apply this design to some of my wireframes to get a clearer picture.

After getting feedback from trusted advisors, I determined this wasn’t capturing my brand essence. I went back to the drawing board and came up with a style guide that felt much more “fun and inviting”.

I decided this style guide was the right combination of energetic and inviting! Next, I applied this branding to my wireframes to create my first iteration of high-fidelity prototypes. I also used this time to prepare for user testing.

04/Deliver

In the home stretch! In order to deliver the prototype on time, I had to conduct some user testing of my first high-fidelity prototype. Six users participated in my testing event. From this event, I collected the following feedback:

• Top Navigation is difficult to read, consider standard IOS nav bar

• Consider how users will edit posts, or remove them when they are complete?

• Font is a little difficult to read

• Revisit page titles & directions for more clarity, especially in profile set-up

• Ensure consistent titles, fonts, font sizes, alignment

• Consider homepage notifications for new community posts

• Active field with red color made users feel like there was an error, changed to blue

After implementing testing feedback, my final prototype was complete. Below is the finished product.

Lessons Learned & Next Steps

LESSONS LEARNED

• Mastering the form. This is a very form heavy app, almost every screen allows some type of input interaction. User testing opened my eyes to the importance of naming input fields, how users interact with them, and even visually what they look like. For example, a red-ish active state made testers feel like something was wrong. I plan to keep exploring the world of forms to find the perfect form solution for Pet Connect!

• Color. I had been visualizing this app for a long time. My original mood boards were dark blues and very saturated complimentary colors. Unfortunately, those colors didn’t compliment the brand identity I was after, but it was hard for me to open my mind to something new. I tried dozens of color schemes before finding one I felt good about.

• The importance of components & libraries. Of all my projects with Thinkful, Pet Connect was the most complex and had the most screens. This meant when I had an update, it required the most edits. I learned very quickly the importance of linking components for updating. This saved me a lot of time for editing texts and colors.

NEXT STEPS

I am very excited about this app idea and hope to continue exploring its potential. My next steps are to:

1. Conduct more user research & testing. Now that there is a working prototype, I’d like to make sure there is still excitement around the idea and it meets the needs of my target users.

2. Conduct a probability analysis & develop a pricing model. I will need to research how competitors monetize their apps, and investigate how property management companies determine which subscriptions to subscribe to, and what they pay for different services to get a better idea of what I could make from this and if it is worth any financial investment.

3. Find a developer. If this is truly solving a problem, and the idea is worth the investment, I will need to find a developer to help me bring Pet Connect to life!