iOS Onboarding & Enhancements
Designed and implemented a comprehensive onboarding flow for the Neighborhoods.com MVP app by leveraging lightweight Lottie animations to guide both new and power users through key features, as well as enhancing UX pain points.
Company
Neighborhoods.com
Industry
Real Estate
iOS Design
Product UX/UI Design
Competitive Analysis
Research
Overview
Following the launch of the MVP app for Neighborhoods.com, I identified a critical gap in the user experience: the lack of an onboarding process to introduce new users and power users to the app’s features. To address this, I advocated for and led the design and implementation of a comprehensive onboarding flow. Additionally, our team experimented with and introduced the use of a (then) new tool called Lottie to create lightweight animations that elevated the the app's experience. After the success with the onboarding, we expanded our use of Lottie and motion (what we soon referred to as "surprise and delight") throughout our app. As the sole designer on these projects, I managed every phase, from research and ideation to design, animation, and implementation with developers.
The Problems
1. Lack of Guidance for Users:
New users and website power users transitioning to the app were not provided with any guidance for the new app's features and flow, leading to confusion and drop-off.
2. Poor Industry UX History:
Real estate apps like Zillow and Redfin were notorious for being cluttered and overwhelming, reinforcing negative user perceptions when promoting a new app to a competitive market.
3. New Solution to Incorporate Animations:
Existing animation solutions were too resource-heavy for mobile platforms, creating inefficiencies for developers and performance issues for users.
The Goals
As a business, I want to:
1. Create a welcoming experience for all users, regardless of their familiarity with our brand & products, to feel comfortable with the app and quickly understand its features. 2. Minimize bounce rates by providing a clear, concise onboarding flow to retain users and increase engagement during their first impressions and interactions with the app. 3. Introduce lightweight animations by utilizing Lottie, to enhance both our brand's image and user experience, without comprimising performance.
As a user, I want to:
1. Understand the app’s features quickly and feel comfortable using it, regardless of my familiarity with the brand. 2. Experience a smooth and engaging onboarding flow that helps me get started easily without feeling overwhelmed or lost. 3. Enjoy engaging brand visuals and animations that don't impact the app's performance.
The Process
Research and Competitive Analysis:
Identified gaps in the user experience by reviewing onboarding flows across industries. Discovered that direct competitors, Zillow and Redfin, lacked onboarding flows, which presented an opportunity for differentiation. Analyzed user feedback from MVP app testing, which indicated a need for more guidance during initial app use.
Wireframes & Iterations:
Created wireframes to map out a simple and intuitive onboarding flow, emphasizing accessibility for all user personas. Collaborated with the content team to craft clear and concise copy that explained the app’s features without overwhelming users. Added state indicators to manage user expectations about the process length and included a skip option for users who preferred to explore independently.
Lottie & Visual Designs:
Proposed using Lottie to introduce animations into the onboarding flow, highlighting its ability to export Adobe After Effects animations into lightweight, developer-friendly code. Collaborated with developers to demonstrate the tool’s efficiency in reducing manual adjustments for animation timing, easy, and file weight. Designed and created animations that met three key objectives: 1. Educating users about the app’s features. 2. Reinforcing the onboarding copy. 3. Maintaining a minimalist style that aligned with the brand and app’s visual identity. The animations replicated real app UI elements, such as the home listing page and agent cards, to ensure consistency. Check out each state's individual animation below!
Iteration and Testing:
Conducted multiple feedback rounds with stakeholders and design team to refine wireframe flow and visual designs. Incorporated insights from internal guerrilla user testing to add an additional onboarding state highlighting advanced features of the app.
Implementation and Handoff:
Partnered closely with developers to integrate Lottie animations seamlessly into the app. Delivered detailed documentation and assets to ensure a smooth implementation process.
School Search & Scrolling Integration:
Implemented a school search function with a swipe-based navigation system, replicated from the core search and navigation function of the app, for consistency. User research confirmed that homebuyers who were prioritizing school districts found this feature essential to their experience.
Enhanced Save Feature & Empty States:
Designed "saved" states for homes, areas, and searches, improving user accessibility and engagement. Introduced animated empty states to clarify functionality and add delightful motion to a previously simple screen, resulting in over a 35% increase in saved content within the first month.
Interactive Rating System:
Developed a rating system for neighborhoods, agents, and app feedback, incorporating custom star animations and contextual copy. This provided a seamless way to collect valuable user insights while aligning the app with the established web experience.
Success Modals for Key Actions:
Introduced confirmation modals for account creation, neighborhood reviews, and feedback submissions. These reinforced user actions with positive reinforcement while mitigating potential frustration, improving overall user satisfaction.
The Results
Increased Engagement:
Onboarding led to a 20% increase in account creations within the app after download.
Improved User Retention:
Achieved a 10% increase in user retention rate within the first seven days after app installation.
Differentiation in the Market:
The onboarding flow helped position Neighborhoods.com as a more user-friendly alternative to competitors like Zillow and Redfin.
Efficient Development Workflow:
Lottie animations significantly reduced developer workload by eliminating the need for extensive manual adjustments, allowing for faster implementation.
