IronHack Challenge 2: Wireframing Petwant
For my second IronHack challenge, I will show you the wireframe of an app that I use frequently. I chose the Petwant app, which connects to my furry friends’ automatic feeder. With it, I can feed my kittens remotely, watch them through a camera, record messages for them and keep better control of the portions they consume.
Have created a user flow of 5 screens in which we will see how to program the feeder for a regular meal for Merni (the name I give my two cats together Merme and Beni), setting time, portion size and leaving a voice message that will inform my pets that their food has been served.
Despite being a very functional app for pet owners who have this feeder, it is not visually very pleasant. I personally find it very helpful to schedule different meals and portions when I travel.
Here are some visuals of the original app.
Now, I will analyze its function using the reverse engineering method with a prototype in wireframe. This is what my navigation flow looks like.
To program a meal we must start with the plus icon, on the next screen the clock will appear to set the time, on this same screen we can tap on “portions”, this can be seen on the third screen and at the end of this action, we will return to the “Time” screen where we can choose to record a voice message. On the fourth screen we can record our message by releasing the icon, we will return to the time screen where we can see our voice message, portions and time that we have chosen, when we finish “home” will appear again but the schedule of the next meal.
To achieve this I used Figma, I have found a lot of affinity with this software, I used a community UI kit with which I was able to solve most of the graphics and others I did with vectors and boolean actions and also use Figma to create my prototype too. Take a look!
In conclusion, I found it very interesting to do this exercise in reverse because it allowed me to see things that I would have done differently if I was part of the Petwant design team.