Design and Implementation Process of Pets.com

Pets.com

Pets.com is a web that provides an efficient, safe, and free way to take care of your lost dog. By using Pets.com, you can:

1. Post lost/found information at anytime and anywhere.

2. Get notice immediately once your dog is found.

3. Check out every lost/found dogs to see your or your friend’s dog’s status.

4. Check out dog products that help you take care of your dog.

5. Directly see your dog’s status and location on the map.

Pets.com was designed and implemented with four classmates in COGS187(a UX/UI class). During the class, we started with logo design, and then went into need-finding and competitive analysis. With these data in hand, we did persona and storyboards to find out our potential users. After these steps, we built our low-fi prototype and brought it into user testing. By analyzing user’s feedback, we are able to keep improve and polish our website. Finally, we successfully created Pets.com by the end of the class.

They are my brilliant teammates, who are Shiru Sun, Michael Chuang, Yan Cheng, and Pin Wang. We really work as a team and have spent many sleepless night together. I really appreciate their dedication and hard-working.

During the first class we figured out that we wanted to build a project about pets since all of us were pets lover. We first began designing a logo for the project. We discussed what basic functionalities that the project needed. During this process, I suggested that we should have a map to directly show dog’s status and location. Also, we did research on our potential customers and competitors. Then we went into log design.

Logo Design

With our decision to focus on pets now in place, we started to create logos for the project. This one below was one of my designs. It was a smiling dog who wanted to give a hug to those homeless pets.

We narrowed down our selections by finding the aspects we had in common. Individually, we all came to incorporate the idea of “home” into our drawings. Thus we believed that it was a good idea to emphasize the concept of “home” for the project. So we decided to use the two logos with house symbols as the main theme and develop our final logo from that. Also, we’ve decided to use “Give them homes” as the slogan for the project.

Below was our final project logo:

Looking forward: Potential Competitors

We’ve also searched online for our potential competitors. For example, I found this site http://lostdogsandiego.com/ would be one of our potential competitors.

In general, I found that this website’s UI was outdated and messy. That was saying users could not use this site efficiently to find their lost dog. However, our website would be created with latest html and css code.

During week 2, we went into the state that about interview and competitive analysis.

We started with the idea that our website would be functioning in not only lost and found but also pets adoption. Usually, people may prefer calling animal shelter or distributing flyers when their pets are lost and they would usually contact animal rescue when they see homeless dogs on street. So we were likely to know the reason behind and to see how we could make our website more user-attracting and user-friendly.

Designing interview questions

When designing the interview questions, we decided to give a short presentation to interviewees since that would help them understand our target. During this process, I came up two questions which were “what would you do if your dog is lost?” and “Have you tried to find your lost dog online?” My teammates accpets these two questions so we put them into our interview script.

We first interviewed our professor who suggested that we should foucs on either lost/found or adoption. We noticed this was a good idea since more foucs meant better design and implementation. After talking to professor, we made our interview questions out.

Interviewing

We decided to interview 2 to 3 people per member. I interviewed my roommate and my parents since I believed that data should spread out to make sure diversity and universality.

Need-finding

After interviewing different people, we noticed that it would be better if we narrowed our scope again. This time, we decided to foucs on only dog’s lost and found. For those interviewers, they all expressed a idea that our project should be as simple and straightforward as possible.

Beyond these advice, our interviewer also stated that it would be better to check our some lost/found information without logging in. Thus, we decided to add a functionality which was searching in database.

Competitive analysis of existing applications

In this part, we decided to compare our website to three other websites that provide lost/found service. They were sddac.com, pawboost.com and cragislist.org.

(LEFT: sddac.com, RIGHT: pawboost.com)

I did research on cragislist.org. One advantage of it is that it have millions of users and it is very famous, so people may find tons of useful information on it. However, the website is not very user-friendly in UI and users have to take multiple steps to post lost and found posts. A lot of the post titles are very vague and lacks specification of the pets. This will waste a lot of time and effort for the users when they search for owners or missing pets.

For our project, we will definitely learn from our competitors’ advantages and we will also try to eliminate those drawbacks we gathered from the interviews. We are going to brainstorm more to make our project more successful and competitive.

In week 3, we were doing needfinding analysis, process of generating personas and creating storyboards.

Needfinding analysis and personas

After analyzing the interview result, we came up different personas and storyboards in order to cover all age and all type of users. I made a persona based on my roommate, Daniel Lee.

From personas, we knew many different needs:

  1. Need popping up alerts, otherwise the information will be missed by user easily.
  2. Need to keep track of dogs’ location.
  3. Need a way to contact with the dog owner directly.
  4. Need to buy GPS product to track the dog on the website.
Brainstorm the storyline and build the storyboards

Based on the personas that we designed, our team came up with many scenarios. For example, when people lost or found dogs, they could search on our website or file a report on our website. Users could also buy a GPS tracker for their puppies from our website, and we provided map tacking. Our website would be simple and straightforward for users. I came up three storyboards which covered Daniel’s needs.

One of my storyboards
Into the next phrase

Looking at the storyboards, we noticed that some features have been mentioned multiple times. Most users expected to keep track of their dogs. Also, people liked simple and straightforward design.

During week 4, we started doing prototype design and processing user feedbacks.

Initial Design of Our Prototype

After two weeks of figuring out our user’s needs, analyzing our competitors, and generating personas and storyboards for our product, we had finally created a complete prototype, albeit a low-fidelity one. This was a major stepping stone on our way to realizing our mission.

Although our first prototype was basic in form and function, we treated it very seriously. We began by spending a lot of time on brainstorming. This allowed us to create an overview of the app, and it helped us figure out what pages and functions were needed at its core. We kept in mind that our users would be very diverse and thus would have different usability requirements.

In prototype design, I did the homepage and the sign in/sign up pages. Also, I helped my teammates design other pages.

Homepage: This is the central hub of our app. From here, users can access all of the app’s core functionality. It allows users to post and access lost and found dog listings, search the lost and found listing database, get access to our products, and login to our website.

Based on our need-finding, I found that the most important function of our app was to help owners and dogs get reunited. As such, I placed the lost and found functions at the top of the menu. After reuniting them, we will prompt them to view our products page to help prevent it from happening again in the future.

The last core function is the login option. This allows users to access their profile and modify any listings they may have. Users must create an account to fully utilize our service.

Initial design for homepage

Login/Registration page: Based on our need-finding, we know that users want a simple but efficient way to find their dog. Registration lets users manage their needs and information securely, as all information can be linked to their specific account. It helps users update their posts and personal information, and the process of login and registration is rather straightforward.

Initial design for login page

User control panel: This is the user’s control center. After logging in, a user is guided to this page. Here, they can explore our app’s full functionality from posting and viewing listings to tracking and product management.

Initial design for user control panel

Lost dog page: From on our interview results, we learned which characteristics are the most important in distinguishing a dog. We picked four of them (name, sex, color, and breed) to show on this page. These features are also easy to remember and recognize. The lost page asks users to enter this information in as much detail as possible to increase the chance of success of finding their dog. The user’s personal contact information is also important. Thus, in order to make sure that every piece of information is collected, warnings and notifications are needed to help users input information correctly.

Initial design for lost dog page

Found dog page: Because we wanted to maintain the app’s consistency, we designed the found dog page in a similar way with the lost dog page. However, we chose to simplify the information that users had to input since people who would have found a dog would not know detailed information about the dog. Therefore, users only need to provide features that can be observed easily.

Initial design for found dog page

Dog search: Based on our need-finding, we knew that some users did not want to let their personal information get exposed. For these people, we have provided the search service. By using the search service, users can check if their lost/found dogs’ information is stored in our database. By clicking a listed result, users are guided to the next state that shows detailed information on the dog.

Initial design for searching

Dog product: Based on our need-finding, we know that many dog owners are too busy working and studying, so they don’t have enough time to constantly monitor their dog. In order to help users track and take care of their dogs, we sell dog trackers that monitor dogs’ locations based on GPS. We listed the products we sell and use a map for our dog tracker.

Initial design for dog products

After deciding which pages were needed, we started to think about their relationships. That meant we had to come up with a “flow” diagram of our app. We tried to make the flow graph as simple as possible since that would be the most user-friendly.

Page relationships!

By doing this, everyone started to have a rough, but clear, idea about what the app should look like. We began to understand the page relationships (parent-child, sibling.. etc) that held the app together. Thus, we decided to work individually at home first and then combined everyone’s work into a whole lo-fi prototype. When we completed the lo-fi prototype, we moved to next phase — user testing.

Insights from user feedback

With the lo-fi prototype in hand, we were eager to find some testers to try out product. Although the prototype had passed in our group, we knew it was still lacking. We knew that our app was far from perfection, so any advice or criticism that could help us improve the app was highly appreciated.

During Wednesday’s class, we paired with Team Rockit for user testing. In order to make the test as realistic as possible, we asked them to run through our app on their own accord. During this process, my role was the note taker. Basiclly I listened to those conversations between our team and Team Rockit and summarized them. Our testers clearly pointed out what they liked and what made them confused. They provided us with a lot of useful feedback.

From the feedback, I realized what features were good and should be kept in the continuing revisions:

  1. The general UI design was clean and navigable.

2. Signals that displayed on the map were convenient and clear.

3. The user control panel was clean and easy to understand.

4. The lost/found information was very detailed and useful.

5. The dog tracker idea was novel.

We also learned of some problems and some areas where our team could improve:

  1. Some button labels were confusing and needed to be reworded.
  2. The “back” button was missing on several pages. In order to prevent errors, there should be a “back” button on every page.
  3. Some accesses/links were missing on the user panel page.
  4. In order to find the matching dog more accurately and efficiently, you should let users input more features.
  5. The dog tracker’s map was too messy and contained too little information. We should add pop-up windows to display the selected dog’s information.
  6. Some functions and wording were redundant and confusing.

Based on Team Rockit’s feedback, we started updating our design decisions and revised our lo-fi prototype.

Design Decisions, Based on Heuristics and User Feedback

With the feedback from Team Rockit, we knew where we needed to improve. We were affirmed in our knowledge that the majority of the core functionality was correct — what needed to be improved was the user experience and navigability of our app.

Thank you Team Rockit for your insightful feedback!

However, we also knew that we needed to take more than Team Rockit’s findings into account. We knew that we needed more evaluators in order to test out our interface and compliance with recognized usability principles, known as “heuristics.” After all, it is extremely difficult if not impossible for a single evaluator to find all usability problems — it simply isn’t likely or doable.

I checked what elements were needed for a sufficient heuristics evaluation. Basically they were ten rules. Although I could finish all parts by my own, I definitely missed something. Therefore, in our team, we shared the heuristics evaluation with each other, and combined everyone’s answers into one, which was our final version of heuristics evaluation. For most part, we got similar answers with user’s feedback.

With the feedback from Team Rockit, we knew where we needed to

In the end, our design decisions could be broken down into three categories: functionality, user accessibility, and text fix. The most important design decisions were functionality changes. The largest change we ended up making was to our control panel, where we added a page for managing reports (both lost and found) and a page for managing tracking devices (both new and existing).

Final (Lo-Fi) Iteration

Based on user feedbacks, heuristic evaluation, and new design decision, we made our final Lo-fi prototype. Our final Lo-Fi iteration has a total of 25 navigable pages. In this part, I also made the homepage and the sign up page. The app begins on our homepage, which is a simple login page. I tried to make it as simple and straightforward as possible. Users can input their account information if they already have an account with our service, or they can sign up by selecting the sign up option.

After signing in or going through our simple registration process, users are now faced with the user control panel. This is the most important page for our users, as it is the central hub for all actions. They can post about their lost dog, post about a dog they have found, edit any reports they may have out, view our product selection, manage any product devices they may have, or log out. We have color coordinator these options to make each one unique and stand out to the user.

When selecting any of these options, users are now brought to a screen where they can fulfill their selected action. Each page also has a back button to return to this panel, and a menu selection to jump to another one of these pages directly. This can be seen in the Lost Dog page below.

Our manage reports page is clean and simple, and allows users to edit and view any reports they may have submitted. It also contains back and menu options to promote consistency.

Our search functionality has also been updated. It allows you to filter results to your specific needs. While privacy is still a concern, this helps make crawling the page for personal information more difficult. One user pointed out that it is currently impossible to reach this page, as it is missing from the menu bar. This will be updated in our next version.

Our last core function page is our map page, which has been updated with toggles for each type of icon. Now, users can toggle on and off for lost reports, found reports, their tracking devices, and their location.

Our final Lo-Fi/Mid-Fi prototype has been a large improvement over our previous one. We have already received some very important and useful feedback from our users and have plans to update accordingly. All in all, doing heuristic evaluations and consolidating user feedback has helped us produce a much more polished and user friendly app. While there is still a long way to go, we have made a lot of progress from where we began.

Finally, we were able to build the real website. At first, we figured out which pages were necessary and which could be avoided.

The process of implementing the final prototype

We first labeled each functionality we wanted in out project and we analyzed how to achieve each functionality. Gathering all functionalities, we sketched out the layout of our project. We divided all functionalities into five-part:

  1. Homepage and overall navigation
  2. User interfaces and control panel
  3. Product display and Shopping system
  4. Searching engine and database
  5. Lost/Found report and details of search results

As usual, I was in charge of the first part. I started with implementing the basic html code to get basic functionality, and then built css model to polish the page.

We are building the website in UCSD basement
Basic HTML code
Polished by css model

Meanwhile, we found some functionalities were not suitable anymore, so we changed them into useful functionalities.

Website testing and bugs fixing

Debugging is always hard and boring, but it is actually more important than implementing. When everyone finished, we combined everyone’s work into a whole site, and then checked out texts, pictures, functionalities and UI layouts to make sure everything worked well. For me, I had three consecutive night with only two to three hour sleep to debug.

Present our website

After finishing debugging, we started to prepare the presentation. As for the presentation, we had three people writing the write-up and others making the video. My job was coming up the app’s solution, key difficulties, and key features.

Finally, we made it! Pets.com is alive now and it is ready to serve our customers!

We are Team Pets! Thank you!

Like what you read? Give Chang Qiu a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.