Below you will find select screens from various flows within the GoodVets iOS app. This is not intended to be all-encompassing and show every screen and state, but it's intended to show key screens that make up the core features of the app UI/UX. The app is divided up into 5 primary tabs: Home, Appointments, My Pets, Hospitals, and Prescriptions, along with Account Settings screens to manage various aspects of the experience including owner information, notification settings, reminder settings, payment settings, linked accounts, and more.
To map out the overall structure of the product, I put together a sitemap to help organize the desired features into 5 primary sections: Settings, Hospitals, Appointments, My Pets, and Prescriptions.
User flows were mapped out to help visualize and plan the architecture of the product and the ways that users move throughout the app. These helped plan out what screens certain calls-to-action were needed to create as seamless of an experience as possible. Primary actions like Book An Appointment are linked wherever a user may be when they need it, including on a Hospital page, one of their Pets profiles, on a Prescription for a follow-up appointment, or even on the Splash page with the ability to Quick Book for emergencies.
GoodVets patients vary in age, so the new system had to be as accessible as possible for the different user groups. As their patients have different devices and operating systems, I was hired to build out full functionality for the iOS and Android Apps along with a Web App for patient use. The staff have another internal Web App to manage their side of it (not pictured). The primary difference between the two mobile apps is navigation structure, both inheriting best practices from their respective ecosystems. For simplicity, the remainder of the screens on this page are from the iOS App, please inquire about screens on the other two platforms if you are curious to see more.
As GoodVets primary brand color has always been yellow, that was the guiding light for all three of the brand directions GoodVets was provided from the other agency completing the rebranding. I ultimately decided to design the app based on the first brand concept that was presented. The color palette included a deeper mustard yellow along with cool, welcoming greens, a soft red/orange and and a periwinkle, paired with neutral background tones. In the interface, the red is mostly used to indicate actions that require immediate attention, notifications, or permanent actions, the greens are used to indicate booking an appointment, areas related to payments, and areas with increased importance.
Due to the necessity for users to confirm a variety of actions before proceeding, I designed a system of Dialog Cards to be used to present confirmations, upsells, and secondary actions like sorting and filtering results.
In order for the full feature set of the GoodVets app to function at full capacity, there is a decent amount of user information that needs to be collected up front. We made the decision to break this process up into digestible and logical (but skippable) steps, including an email confirmation code (not pictured), owner information, pet information, reminder settings, notification settings (not pictured), and a payment method. A new user can skip through these steps to get started as quickly as possible, but they will see more empty states after the onboarding process.
If I had more time on this project... I would like to A/B test how using progressive exposure and moving some of the onboarding screens (e.g. reminder settings, notification settings, payment settings) later in the experience impacts the onboarding conversion and bounce rate.
The Main Level is the landing point for a new user after onboarding or for a returning user after signing in. At it's core the Home tab is an overview which compiles important information and links to the different parts of the app. The Main Level also includes Notifications and Account Settings, which there is more information about below.
If I had more time on this project... I would like to conduct A/B testing to determine the best order for the different sliders on the Home tab and what is the most useful configuration.
One of the core features of the GoodVets app is the ability for patients to schedule and manage appointments so the staff at the various care centers don't need to spend as much time taking calls regarding appointments and to automate that process so they can focus on helping patients that are on-site. It also acts as a single point of communication between providers and patients regarding upcoming or past appointments.
If I had more time on this project... First, I would like to add the ability to change hospital/location from the Booking screen. I would also like to conduct usability testing on the entire appointments flow to determine points of frustration or confusion and make it a more enjoyable experience of scheduling appointments, managing upcoming appointments, and reviewing past appointments. I would also like to further explore the Contact Provider feature, as it was still under consideration while I was designing the interface.
As pet parents often have multiple pets, GoodVets needed an easy way for patients to manage their entire family of pets in one place. Each pet has individual appointments, prescriptions, and Standard of Care. The app tracks the status and importance of various vaccinations and exams and notifies pet owners when their pet is overdue for certain services.
If I had more time on this project... I would like to re-explore the Standard of Care section to prevent truncation of text strings and add more breathing room for better readability.
As all of the care centers have unique and beautiful interior design, we decided to highlight that aspect with large header images. Not only is the hospital itself important, but the providers and clinicians that work there are equally as important and since making a decision for who will care for your family pet is of utmost importance, we implemented a comprehensive rating and review system for Hospitals, Providers and Clinicians. With this system, potential patients can learn about other patients personal experiences with any specific location or provider in the GoodVets network and make informed decisions for their family.
If I had more time on this project... I would like to conduct usability testing on this entire flow, including the process of leaving and browsing reviews. I would also like to explore how adding more specific review points like Care of Pet (e.g. Communication, Kindness, Helpfulness) might impact the user experience. I would also like to explore adding the ability to search keywords in reviews so users can narrow down and only see reviews that are relevant to them.
As Prescriptions was a feature intended for a future phase, we spent less time and energy finessing the explicit details of the feature and instead designed a placeholder that would later be updated once more information was made available regarding pharmacy integrations and requirements.
If I had more time on this project... I would like to further explore the pharmacy integration and how that could work. After building that out, I would like to conduct usability testing to determine if this is a useful solution or if there are any changes we could make to improve the experience.
Users have a large variety of settings to manage for the GoodVets app to allow all of the features to work properly. As such, we built out a comprehensive Settings system as a single area to manage everything associated with a user account and any overflow links such as Frequently Asked Questions.
If you like what you see and want to work together, let's chat!