We needed a way to test out ideas, to show people, and photograph the app, while it was in development.
An app mockup seemed like the best solution. It would allow us to quickly change anything we needed to change and add in anything new while the app was being developed. This meant the developers weren’t working from scratch. The mockup was a useful tool for them to base the app off of. Furtrieve also uses the mockup in photoshoots. And we showed it off to venture capitalists so they would know what it would look like and better understand what sort of functionality we were planning.
Step 1 [Idea]: When I started at Furtrieve we were in the process of hiring our developers, so they app did not yet exist, but we needed to begin work on the design of the app. So I decided we needed a mockup. It was good way for us to be able to test and feel out changes before we could implement them.
Step 2 [Iteration]: The Furtrieve app is largely a re-skin of another app, but this came with a host of its own challenges. Incuding, first and foremost, how to make this look and feel like an app that felt true to the Furtrieve brand. We were so early in the Furtrieve brand creation we had not yet figured out our brand colors, so this is largely the way I did it, through iterating on app design.
Step 3 [Modernizing]: I had to start by screenshotting every screen in the other app we were starting from and then I recreated every screen in Adobe XD and hooked them up to make it into a prototype. Because we were not going to fully rewrite the app all of the modernizing I did was within the constraints of the existing app. I also created and replaced all the icons throughout the app. (Most of these icons can be seen on the menu screen under the hamburger menu.) I tried to use default icons as much as I could, but some of them had to be custom.
Step 4 [Testing]: I had many people try the prototype out and as we thought of new features to add or things we needed to remove I would do that. As I made the Furtrieve app more user friendly I ended up taking out a few of the old app’s features, I designed a new onboarding process, condensed two main menu buttons that did the same thing, and helped design the dual view Google maps feature that can be found by clicking on the little orange guy on the satellite version of the “Find My Pet” screen.
You can see the project in use on the Furtrieve website here.
Interactable Adobe XD mockup