Arity: Creating an Onboarding Flow for Collectr
Overview
Arity develops consumer-facing products (e.g. Routely) that track vehicle trip data for insurance uses. To validate algorithms and production data, the company's data team relied on internal employees to manually label trips using Collectr. As a Summer 2023 Intern, I was responsible for designing the onboarding flow.
Context
Full-time remote internship
Timeline: 3 weeks (July 2023)
Team
2 Designers,
1 Content Designer
1 Researchers
1 PMs
1 Developers
My role
Requirements Gathering
Wireframing
Prototyping
IMPACT
Advanced development phase by 1 month and saved $60K in third-party subscription costs.
Before Collectr, Arity relied on a third-party vendor for their labeling app. As I joined the project, I had three weeks to work on the onboarding flow as well as co-design other core functionalities for a successful MVP launch in August/September 2023.
GOAL
Create an onboarding flow for Collectr, ensuring users grant required access.
The design should support both iOS and Android systems in light and dark modes, compatible across multiple OS versions and various device dimensions.
ITERATIONS
Onboarding design best practices: inform users of the progress
Using Routely's onboarding as a foundation, I've expanded it with Collectr's needs: an extra email field and modified permissions. I noticed that the Routely flow didn't have any progress indicator, so to inform users, I included a screen previewing required access and a progress bar.
I went through multiple rounds of iteration with other designers, PMs, and developers. Below are the major changes, besides smaller changes like primary vs. accent colors, illustrations, and copy updates:
1. Splitting the welcome and email screen
The initial design functioned well on larger devices. However, on smaller phones, opening the keyboard would push content up and hide a button, potentially causing user confusion.
2. Moving the progress bar up
Moving up the progress bar would 1) maintain design consistency with screens lacking it, and 2) enhance both visual and informational hierarchy.
FINAL DESIGN
Sets user expectations by showing required permissions before walking through allowing access
Welcome Screen
Encourage Arity's employees to label trips using Collectr
Email Address
Collect email for data purposes. I implemented Apple native UI components for iOS design while adhering to Material Design 3 for Android devices
Permissions Overview
Preview all permissions that need to be granted access. Android devices require one extra permission.
Permissions Walkthrough
Showing users the exact action to take through copy and graphics.
Success!
Indicate success with a pop-up message, and explain how the app works in the empty state.
Warning
What if users didn't grant all the required accees? Missing one permission will lead to a warning in the blank state.
DESIGN HANDOFFS
Keep the design file organized with clear annotation of specs, interactions, and flows.
A key internship takeaway was learning effective design handoffs to developers through organized files. This involved leaving explanatory notes, flow arrows, and detailed specifications.
My handoff file
KEY LEARNINGS
Working as a UX Designer within a Product team.
Cross-functional collaboration
The internship was super eye-opening and an awesome opportunity to understand UX design outside of the classroom by actually seeing it in action within a Product team. I got to collaborate closely with Product Owners, Developers, Researchers, and other Designers, as well as sat in on roadmap planning sessions and different scrum meetings to see how it all came together.
Not your cookie cutter, but a real design processes
When I started redesigning the Collectr onboarding without any user research or big ideation and solutions, I was pretty confused. However, through the visual research and feedback rounds with the team, I learned that there is always room for improvement in design, even with an existing flow like onboarding. I now understand how to keep a balance between user, business, and technical considerations to create effective designs.
MORE ABOUT THE INTERNSHIP
The more user research skills, the better
My 12-week internship expanded my skillset beyond Collectr with 2 additional research projects:
1. Wisdom Management for Design Research Confluence
My very first project involved a deep analysis of wisdom management within the Design Research team. The initial goal was to assess the information architecture and rebuild the Design Research Confluence. However, through interviewing stakeholders (Designers, POs, Developers, Marketing Managers, etc.), I realized the problem was how the Design Research team documented research. The project evolved with the final recommendations focused on streamlining the documentation process and organizing the Confluence.
Card sort study using UserTesting
Interview synthesis
2. Identify Routely's problems through app reviews and tickets
In my last project, I analyzed app reviews and Salesforce tickets to identify the biggest pain points that users run into while using Routely. Through my work, I identified a major bug that was significantly affecting the user experience, as well as influenced product strategy and roadmap by presenting data-driven insights to key stakeholders.
Ticket data visualization
The best part? Meeting the AXD team in-person!
Volunteering
Lunchin' at the Mart
Brainstorming at our lego workshop
THANK YOU FOR MAKING THIS FAR DOWN!
Still interested? Check out more of my work!
CLIENT PROJECT / DELIVERED