With just a couple of clicks WePet uwu allows you to post and find pet events like adoptions, meetups, and more! Connect with and message users, share pics of pets. Join the fun with WePet uwu.
WePet uwu is a mobile app that allows users to find and/or create community pet-related events. The app was created for a 6-week-long group project in an Interaction Design course at UCSD.
Finding pets and socializing with other pet owners can be difficult. Users should receive more guidance with finding pet-related events.
Wireframing, Prototyping, GitHub, HTML/Handlebars, CSS, JavaScript (jQuery), JSON implementation, Aesthetics and Formatting, Facebook Login
We created 3 storyboards in order to examine our different potential audiences. I created this storyboard on the right to explore a potential situation where a college student is confused on the first steps to adopt a pet. The student uses our app and easily finds an adoption event hosted by a nearby adoption center. The student attends the event and is able to adopt the pet of her dreams!
Next, we moved onto creating paper prototypes. I created the paper prototype on the left to demonstrate how users can navigate from the Home page to the Events page. On the Events page, users can filter events by their type. Afterwards, users can browse and click on events they are interested in. If they're interested, users can indicate their intent to attend and message the host for any additional inquiries. A second prototype (created by my teammate) had a questionnaire feature that helped users match with a specific type of pet.
Once we completed the prototypes, we moved onto user interviews. Three of our peers from the class tested our prototype. They rated and commented on our prototype by abiding by Nielsen's 10 Usability Heuritics. The main comments we had was there was no back button, and therefore, no easy way to access previous pages. In addition, users preferred the first prototype, so we decided to stick with that concept as we moved into wireframing.
With the information we learned through our user interviews, we improved on our design and created some grayscale wireframe screens in Figma. We wireframed the main two screens of our app - the search and results pages.
On the search page, the user can search by event name, location, event type, and pet type. When users click the gray rectangles, there will be a dropdown that allows the users to select the option they want to filter by.
After hitting "Go!", users are taken to the results page, where the filtered events are displayed. (We also planned on a time filtering feature. We did not end up implementing it, but we would have for future iterations.)
After wireframing, we stepped into the next stage - implementing.
After wireframing and gathering feedback, we moved to coding implementation. In the first iteration, we used only HTML and CSS to create a grayscale skeleton of the app. We used Bootstrap as our main framework, made JSON files to handle how our events list, and implemented JavaScript (jQuery) to write events to the JSON file.
The screens on the left show the search and results pages from the wireframes.
You can view this version here.
Note: Each iteration was intended for mobile view! Please view in "Inspect" Mode (Control + Shift + C OR on Chrome, right click, click Inspect, and set device toolbar to on)
After developing the main pages, we implemented grayscale skeletons of the other pages of the app. At this point, we switched to using Handlebars and Node.js for running and testing our app.
Our navigation bar at the bottom takes the user to different pages: Home, Search, Create New Event, Messages, and Profile. The Search page allows users to find pet-related events by certain filters. The Create New Event page allows users to create their own pet-related events to post to the events list. In addition, we implemented a login page where a user has to enter a username and password before they can access the rest of the app.
You can view this version here.
Note: There's no authentication for the manual login, so you may input anything and still access the rest of the app.
After implementing the skeleton of the app, we added color and general aesthetics to our app. We decided to go with a pastel blue, pink, and orange/yellow layout as we felt these colors represent a light hearted and fun atmosphere (as owning pets should be!).
At this stage, we utilized some JavaScript and JSON to update the "I'm attending" section of the home page each time the user indicates wanting to attend a certain event. We also allowed users to create their own event. When they do, the "I'm attending" section will also update (as they should be attending their own event). We also implemented an option for the user to login through Facebook. If they do so, their profile name and picture within the app will update to be the name and picture they set in their Facebook.
You can view this version here.
Note: Inputting to the search is not functional until the last iteration!
To test this iteration, we created a testing protocol. We described to the participants that as they do each task, they should say out loud what they are thinking. Then we asked some preliminary demographic questions before we proceeded to the tasks.
The two tasks were:
These two tasks helped us identify what users will be try when trying to reach the goal through our app. In addition, we had participants try to "break" the app. It was a success in that users found some designs and functions that my team could improve and fix for the final iteration.
In this final iteration, we touched up some aesthetics to be more consistent and easier on the eyes. We also made the search filter functional. In hindsight, we should have implemented this function in earlier iterations, but through this experience, we learned how to use Javascript to filter content based on user input.
You can view this version here.
There's a lot more we could have implemented in this app if we were given more time: letting users search by location, implementing a real messaging system, creating a real username and password authentication system, and much more.
Nevertheless, I learned a lot from this project! Before, I only knew some basic HTML and CSS. Through this project, I learned how to effectively utilize not only HTML and CSS, but also Handelbars/Node.js, JavaScript (and jQuery), JSON, and Facebook Login. I learned how to do each step of the design process, like storyboarding, wireframing, user research, prototyping, iterating, and implementation.
It was fun working with my group. They were very friendly, responsible, and fun, and that's what made the project so much more meaningful to me.
That was our process! Thanks for reading. If you have any questions, please contact me!
