top of page

Onboarding/Sign In Redesign

Clockwork Logistic Systems

Role: User Experience Designer

Industry: Supply Chain

Users: Carriers, Administrators, Clockwork employees

Programs Used: Figma & Zeplin

Problem Statement 

We need a self-onboarding layout where carriers will be able to sign up and connect to their customers by themselves, thereby reducing time spent by the Customer Success Team. Currently, the onboarding is performed by the internal team.​

Constraints

  • It needs to be applicable to customer and other future user onboarding flows

  • It needs to be done in 1 sprints

  • Needs to include all current information required for onboarding

​

Expected Timeline:

  • Design starts in mid December and gets done by end of December (2 weeks)

  • Development in the test environment begins by January and implementation is TBD

Design Process

  • The product manager scheduled a meeting to go over the Jira ticket written, describing the details of the task, reason for the task, and other requirements.                                              

"Carrier Onboarding: Sign up wizard - Provide the design, template, and flow of self-registration for carriers/customers.

​

Why: Need a self-onboarding layout where carriers will be able to sign up for themselves

​

Timeframe: One Sprints / 2 weeks"

  • Start looking at what our competitors are doing for registration. Finding examples of industry standards for this type of interaction. Also, referring back to the current screens, noting what design/usability changes need to be made.

​

  • Present examples and inspiration to product team for feedback. 

​

  • Start designing initial screens just until the transport mode selection to confirm how we should handle that.

​

  • Show the product team progress and move forward with the whole interaction.

​

  • Product manager increases the project scope to include the sign up screens as well.

​

  • Present designs for the entire ticket and get feedback/approval from product team, leadership team, and development team

​

  • Set up separate call with Frontend Developer to go over technical requirements for the screens

Original Screens

Sign In Screen
SignInOG.png
Onboarding Screen
OnboardingOG.png

The Flow & Field Requirements

sign in flow.png
field requirements.png

Final Wireframes

Sign In Screens
Auth Screen 1.png
Forgot Password 1.png
Forgot Password 2.png
Reset Password 1.png
Onboarding Screens
Carrier Onboarding 1.png
Carrier Onboarding 2.png
Carrier Onboarding 3.png
Carrier Onboarding 4.png
Carrier Onboarding 5.png
Carrier Onboarding 7.png
Carrier Onboarding 8.png
Carrier Onboarding 9.png
Carrier Onboarding 10.png
Carrier Onboarding 11.png

Challenges

Challenge 1:

Adding the Sign In screens to the scope was challenging because it was communicated to me in the middle of the sprint which slightly distracted me from the task at hand and added to my work load

How I Overcame It :

Being that the Sign In is related to the onboarding, I came up with a flow to better organize what order to make the wireframes in. I made a plan to better manage my time in the sprint and made sure to make all my inquiries at once and present my progress, in order to prevent reworking in the future.

bottom of page