Week 5: Building a High-Level Prototype

Team Pets
5 min readAug 31, 2016

By Shiru Sun and Yan Cheng

A Brief Introduction to our Website

We came up with two quick blurbs to promote our site:

Need a quick way to find your dog? Pets.com is your solution. We provide a search service across multiple databases of different shelters, and we will notify you as soon as we find your dog. We also provide GPS tracking services to prevents you from losing your puppy again. Pets.com fast and powerful.

Losing your dog can be extremely stressful! Don’t worry, Pets.com is here to help you!Our website offers the most convenient lost and found report aggregation as well as dog tracking services with our GPS trackers. Join us today and we can form a better dog-loving society.

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

and each of us will be in charge of designing several pages relating to these specific functionalities.

We are building the website in UCSD basement

Build the functionality of the website first

We first build the functionalities of the website before we start polishing our website with pictures and colors.

Take user log in as an example

Then we add pictures to the HTML files and change the layout through the CSS files to make our website outstanding.

Log In after polished

In the meantime, we found some functionalities have to change to be better.

For instance:

Old design: user can file a lost report or found report through the home page without login.

New design: To better maintain the database, we require users to log in before posting lost and found posts. But to better serve everyone including those who do not want to sign up, we give everyone the right to access our database and search. Users have to log in to file the lost or found report and the report that user post will appear in user’s control panel. Users can easily edit the report through the control panel.

AND

Old design: We use colorful buttons to make every functionality noticing.

New design: We use only white buttons for all web pages in order to make out website looks more tidy and organized.

AND SO ON….

Website testing and bugs fixing

When each of us has finished implementing, we gather all web pages into one folder and fix connections of each web pages. We also put all the pictures we need in one folder. Each of us will then download the final version of our website and test it out to see if there is any broken links or weird layouts.

During the testing part, we changed the grammar mistakes on the website to make it more professional. We also adjusted the size of the pictures to make the whole website looks organized. We made sure all buttons worked and all links go to correct directions.

Besides, since web testing and bug fixing has to be continuously (Test -> fix bugs -> Test -> fix bugs), we discuss through phone and meet every day to make sure that our ideas are presented on this website perfectly.

Present our website

After we have finished the design and coding, we start thinking of our presentation. As for the presentation, we have three people writing the write-up and two people making the video. One will make the video and one will add voice to the video.

Takeaways

Learned:

1. I learned that having a prototype for the project is very useful and important. The prototype helps us to analyze our project before we implement it, thus we don’t have to change and modify our codes again and again. Also, prototype helps us visualizing the project, and we can have users test the prototype out and give us very important suggestions and advice before our implementation.

2. I learned that surveying users is a very important process when designing a product. Different users can give various kinds of advice. They can detect the weakness of our project much easier and better than we do.

3. For my previous design project, I did not conduct research or build different levels of prototype, and because of these, I have to change my application frequently. Now I learn that a throughout process is super important for application designing.

Surprising:

1. Designing is much harder than actually implementing.

2. Even when we have outlined the functionality of our project, each of our team member has such diverse understanding of our project. When we shared out storyboards, it was so surprising that there were so many unique and interesting storylines.

3. The power of a team is amazing. It is a surprise to see how wonderful people’s ideas can be.

4. I will never forget Team Pets!!

On our final day of class, we presented our finished product in a Shark Tank style presentation. Each of us first gave a short presentation of our personal pro folio. Then we each introduced some parts of our project. We were really happy and proud of our accomplishment and we were also greatly encouraged by receiving support from the audience. The audiences gave us a lot of useful advice and we would like to implement them in the future.

Below you can find our promotional video and presentation slides. Please feel free to tell us what do you think of our project!

Our presentation slides

--

--

Team Pets

We are Team Pets, a group founded within COGS 187A at UC San Diego.