USER INTERFACE DESIGN: WEBSITE | MOBILE | APP 2018-07-05T17:12:19+00:00

Project Description

PETPAL

USER INTERFACE DESIGN FOR PETPAL: WEBSITE, MOBILE AND APP

PROJECT DESCRIPTION

ABOUT: PetPal is a website that allows people concerned about the animal cause to help non-governmental organizations or any  registered animal care institution either by donating money and other needs to support shelters or animal causes,  by volunteering, shopping at the bazaar or adopting a pet. The website also allows organizations and individuals to register in order to be listed in the website as an option for those who are donating or wanting to adopt or list a pet for adoption through PetPal application/page. Besides, registered users can post petitions, donate for the bazaar, report any animal mistreatment and also they can post if there is any animal in need of rescue or health treatments. PetPal is an one-stop application for animal lovers all over the world.

OBJECTIVE: Design the landing page for desktop and mobile. Create an app with the following screens: Login, Sign up, Choose Location, Posts Feed, Take an Action Board, Adoption Search Filters, Search Results and Pet Profile.

DESIGN PROCESS

It was developed an intuitive site architecture based on “action” labels and then provided a series of wireframes to map the website navigation and also the adoption steps for the PetPal App.

Sitemap
  • SITEMAP_Wireframe_PetPal_Website_Web_Design_User_Interface

Sketches
  • 01.APP_Webiste_Sketches_PetPal_Website_Web_Design_User_Interface
  • 02.APP_Webiste_Sketches_PetPal_Website_Web_Design_User_Interface

Wireframes: Desktop Version
  • Desktop_Wireframe_PetPal_Website_Web_Design_User_Interface

Wireframes: App
  • 03.APP_Wireframe_PetPal_Website_Web_Design_User_Interface

HIGH FIDELITY PROTOTYPES

Homepage
  • GIF_PetPal_Website_Computer

CLICK HERE to see the whole homepage.

High Fidelity Prototype – App
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_04
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_05
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_06
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_07
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_08
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_08
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_01
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_02
  • App_User_Interface_Design_PetPal_Webdesign_Vancouver_03

INVISION DIGITAL PROTOTYPE

TASK SCENARIO (For this digital prototype):  You finally got your pet friendly apartment in Vancouver and now you are excited to adopt your black fluffball. You downloaded the Petpal App and it is your first time using it. You only want to check  what are your options around Vancouver and you don’t want to make an account right now. Go look for your black cat and make it happy!