iOS App Onboarding
ROLES -
UI Designer
Motion Designer
UX Designer
YEAR -
2019-2020
COMPANY -
Neighborhoods.com
SUMMARY -
After the original launch of the MVP app, I advocated for the addition of an onboarding process to help guide both website power users and new users through our brand-new app.
GOALS -
Our primary goal was to help all users immediately feel at home with the app. Whether they were a website power-user who downloaded our app for the first time, or they were completely new to our brand - we wanted to ensure we laid out a clear picture of what features our app offered and why our product should be their go-to home-buying resource.
CHALLENGES -
Though our process and scope were relatively straightforward for this project, we did want to try using a new animation coding tool called "Lottie". At the time, this tool was brand new to the design world and, more specifically, to the iOS toolkit.
Essentially what this tool did was act as a plugin for Adobe After Effects and would allow you to render & export your animations into extremely lightweight code! Once exported, we could deliver the code to our iOS developer which would allow us to have delightful, lightweight animations that our engineers wouldn't have to spend hours fine-tuning easings & timings with our design team breathing down his neck.
COMPETITIVE ANALYSIS & FINDINGS -
Starting out, I actually already knew that our two main competitors, Zillow and Redfin, didn't have any onboarding - which was the main reason I advocated so strongly for this enhancement to take place.
Real estate apps are notorious for being overwhelming & clunky, and was especially true for "pay to play" apps like Zillow and Redfin (aka realtors pay for ad space and/or leads). Neighborhoods.com's business model was slightly different, but we still wanted to nip that stereotype in the bud.
WIREFRAMES -
The UX at its core was to help users feel as comfortable as possible with our app before diving in.
I wanted to make sure this process was accessible for all of our MVP app's user personas and to help minimize bounce rate as much as possible. Working closely with our copywriting team, we brainstormed some catchy, non-overwhelming copy to help lay out what our app is all about.
WIREFRAMES -
After a round of feedback and some back and forth with our content team, we opted to add an additional state to elaborate on some additional features of the app.
I also felt it was important to include state indicators to be as transparent as possible with the user about the length of this onboarding process, as well as making sure the user had an "out" option.
Referring back to our original user testing from the MVP app testing, sometimes people just aren't in the mood for a hand-holding session and want to trailblaze through an app on their own.
ANIMATIONS & VISUAL DESIGNS -
It was important that the animations satisfied three requirements:
1.) Educate the user about what's to come
2.) Help to reinforce the educational copy
3.) Have a minimalist design, but replicate our app's actual UI
From the home listing page to the agent card, all of the elements used in the animations were inspired and aligned with the actual interface of the app.
FINAL PRODUCT -
The app and the onboarding flow are live! Give it a download here and give the onboarding a whirl!