App design case study
Find pet-minded people!
WePet is a mobile social media app designed to connect pets and people. WePet allows the user to share and discover pet events like adoptions, meetups, and more! Connect with and message users, and share pics of pets.
Background
Our team collaborated to develop this app in 6 weeks for a Interaction and Design course at UC San Diego.
The Problem:
Some may find it overwhelming and inconvenient to build social groups as pet owners on conventional social apps like Facebook. How can we help pet owners find others to build a community with?
Competitive Analysis:
An analysis of other products that may offer a similar experience to see what to build on and what gaps to fill in.
My roles, and tools in this project:
Wireframing, Prototyping, HTML & CSS, Aesthetics and Formatting, Messaging functionality in JavaScipt.
Turning Ideas into Models
Storyboarding:
We began crafting storyboards to depict our target audience and how the app would be used to satisfy user needs. We began creating paper prototypes from our storyboards to begin user testing and building off feedback.
Prototyping:
We created 2 paper prototypes. One depicts a home interface that routes to events. Another depicts a questionnaire designed to find the best pet for the user's needs.
User Testing
We used our paper prototypes for user testing. Three classmates ran through our paper prototypes with us. They based their critique of our app on Nielsen's 10 Usability Heuristics. The majority of feedback depicted the need for a back button. Users preferred the Events-orientated app design over the questionnaire app design. The questionnaire interrupted the flow of the app.
With that in mind, we shifted our focus to connecting people, similar to Facebook but targeted for pet ownership. Our goal was to provide users with more guidance for finding and adopting a pet to alleviate the complexities and uncertainties of navigating the process, especially for first-time pet owners. So, we decided to focus the app on making meetups and adoptions.
Wire-framing:
Iterating on our paper prototypes, we were able to create two wireframes to depict the search and results functionality.
Users can search for an event by name, location, event type, and pet type. After hitting go users are brought to a results page that shows all relevant events. The results page includes a filtering feature for times.
Turning Models into an app
Our greyscale model:
Our first round of coding. We used HTML and CSS to create this first iteration. We used Bootstrap as our design framework. We created JSON files to contain our events and began implementation with JavaScipt to write events to the JSON file.
Our greyscale model after feedback:
We added other pages of the app and switched to Handlebars from HTML. We implemented a navigation bar to take users to any page on the app. The "create new event" page allows users to post their events. In addition, we implemented a login page that requires a username and password to enter.
Turning a rough app into a polished product
Adding color and aesthetics:
We worked on adding color to the app and following an aesthetic color scheme. We also implemented Facebook login functionality and added a messaging function.
More user testing & Final touches:
We completed the functionality of our create events page to link to our profile and new results. We added images to events and added deletions to our JSON. We finalized our messaging functionality.
Going from here
A matured version of this app could add a "stories" functionality similar to Snapchat. We also wanted to implement a way to encourage users to adopt from shelters.
← back to main