During my first year of working at BorrowMyDoggy we frequently encountered issues stemming from our outdated mobile app. The app not only employed a previous brand identity but development of it had been halted for some time, mainly due to its reliance on Ruby Motion, a technology that had fallen out of favour, making it challenging to find available developers. As a result, the app fell behind the website and blocked new feature development on the website.
Despite these challenges, the app had regular users. We needed a plan to replace it in a strategic and iterative way, without causing excessive disruption to our existing users.
Enhance mobile user experience
Align brand presentation with the website
Eliminate development blockers
Enhance accessibility
Resolve Apple Pay subscription bugs and issues
Lay groundwork for feature parity with the website
Business goal: Increase subscriptions
MVP scoping
Strategic planning
Wireframing
Prototyping
Guerrilla usability testing
Visual interface design
Accessibility
Component library creation
Technical specification
As a remarkably small team comprising one designer and two developers responsible for the entire BorrowMyDoggy product, spanning both web and app platforms, we could not afford to invest months of work into an initial release. Rather than attempting to deliver a fully-featured app right away, our approach was to start with an MVP (Minimum Viable Product). This MVP would serve as a companion app for our existing members.
This strategic choice allowed us to continue serving the members who were already using the older app, while simultaneously gathering feedback and incrementally adding more functionality to gradually align it with the website. The existing app was only available on iPhone, but as we had ambitions to add Android we decided to use React Native and build for iPhone in the first instance.
High level feature release plan
Drawing upon my deep understanding of our members, insights from prior usability tests, valuable contributions from our customer service team, and user feedback, I swiftly created wireframes and prototypes for the MVP version of the app. This approach expedited the development process by allowing our developers to lay the project's architectural foundations while I focused on shaping the app's visual style and refining user interactions.
While working on the website, I had encountered limitations imposed by existing design patterns. However, the introduction of this new app provided an opportunity to refresh the usage of our brand assets and establish new design patterns. Over time, these updates would find their way into improvements on the website.
Appstore screenshots of initial release
The MVP allowed members to perform fundamental actions like searching for others, viewing profiles, and exchanging messages – the core functions of our product. We then rapidly rolled out a series of releases to introduce the following features:
Subscription (requiring a complete rebuild of the Apple pay products and processes)
Safety checks
Sign up
Account management
Profile management
New members push notifications
Liking
With each of these iterations, we diligently fixed bugs, and addressed usability issues. My role involved planning each iteration, gathering user feedback, designing the UX and UI, conducting guerrilla testing, validating my designs with internal stakeholders, and preparing thorough technical specifications for new and modified components, screens, and functionalities. I also manually tested the components and screens with VoiceOver (Apple's native screen reader), oversaw the testing of successive builds and approved releases.
Layout and spec sample
Even though the app was not entirely at feature parity with the website, we believed it had become valuable enough to warrant an Android release. This effort turned out to be more extensive from a development standpoint than we initially anticipated. However, from a design perspective, the work was relatively straightforward. I had intentionally adopted platform-agnostic design patterns wherever feasible, requiring only a few adjustments for Android. Most of these changes could be managed at the component level, making the UI adaptation an efficient process.
I retested the Android app using TalkBack to ensure that it was as accessible as the iPhone version.
Example of UI changes for Android
Our early releases inevitably attracted some criticism as they had fewer functions than the app that we replaced and, as expected, had some bugs that needed addressing. However, as we progressed with subsequent releases, which were more stable and feature rich, we noticed a notable shift. Members' feedback became increasingly positive, paralleled by a steady rise in app downloads, heightened usage, and a significant uptick in sign-ups and subscriptions.
We succeeded in bringing the brand in line with the website, while also modernising its implementation. All development blockers were eliminated, allowing us to proceed with further updates to the app and website in parallel. The new Apple products resolved many of the bugs and issues that we had previously seen associated with Apple subscriptions. The new app addressed accessibility issues, making it much easier to use for screenreader users in particular.