top of page

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!

bottom of page