liveninj-hover

Net2Phone (LiveNinja)

Product Designer 2016 - Current

Net2Phone (LiveNinja)

Product Designer 2016 - Current

Net2Phone (LiveNinja)

Product Designer 2016 - Current

role

I captained the Onboarding

role

I captained the Onboarding

I started working at LiveNinja.com just after their aquisition by Net2Phone.com. Having developed a messaging platform that was intuitive and feature rich, the initial concept was to merge the LiveNinja Messaging platform with Net2Phone’s Business Phone System to develop an industry leading UCaaS product.


We have been in development for the past 16 months and are weeks, if not days away from our Net2Phone 2.0 Release. My direct involvment on the product has been to develop frictionless user experience for user flows that needed special attention.

USER FLOW OPTIMIZATION

  • Complete Reworking and Optimization of Signup experience
  • Design of Onboarding Walkthrough and Coach Marks & Tooltips
  • Optimization of Transfer Messages Experience
  • Development of Adding Team Members to company accounts
  • Complete Reworking and Optimization of the Payment experience
  • Initial concept for Forget password user flow
  • Complete Reworking and Optimization of the Login experience
  • Development of Welcome Menu feature

USER FLOW OPTIMIZATION

  • Complete Reworking and Optimization of the Email User Journey
  • Design and Project Management of the new Net2Phone.com website that is currently under development
  • Co-developed the New Net2Phone Design System with the Director of Product design for Net2phone with visual styleguides and components for the development team and for in-house design needs.
wireframe

context

Where do we go from here?

context

Where do we go from here?

One of my first sprints on the product design team was the Onboarding. I was tasked with coming up with an onboarding flow that seemed to evolve as I continued to work on it. We focused on streamlining our process, and even added some steps to make sure we were allocating our time to what made sense, and not focusing to much on the IA. Once we made sure the IA was finalized, the rest of the design process fell into place. 

workflow

How we do it!

workflow

How we do it!

After the initial sprint planning, I took the requirements and started sketching on paper. After realizing there should be 2 different versions for the onboarding, 1 for organic signups to the site and the other being signups from partners. This made things a bit more complicated and to make sure I had a well thoughout user flow, I sat with one of the Lead QA engineers Ricky. He and I developed user flows on Draw.io.

Screen Shot 2018-10-01 at 9.57.59 AM

After finalizing the user flow, I went ahead and decided to do some comparative analysis of what our competitors were doign during there signup. After analyzing these initial flows, I went back a sketched a quick flow on paper. Met with head of the design team to get any feedback. Once I got the go ahead, I started to work on the initial onbaording. I started with the organic flow, because this flow would be the most complicated as the user would have to bundle their own numbers and phones. 

Screen Shot 2018-10-01 at 10.13.05 AM

Iterating

Hmmmm, lets throw a wrench into the mix

Iterating

Hmmmm, lets throw a wrench into the mix

After our initial version of the onboarding, we realized that we would have to implement some sort of Ecomm portion to the signup so these users could add devices to their accounts. We needed to have a way to make sure that for every number the user was adding to their account, that they also had the ability to add the device and assign it, all within the same flow. 

Screen Shot 2018-10-01 at 10.12.33 AM

prototyping 

So far, so good

prototyping 

So far, so good

The final step in the workflow is the approval from the higher ups using a prototype. Here I uploaded all the screens in the onboarding flow to Invision and went over them as a group that included, the head of design, the product owner, and any of the engineer leads that would be leading this feature. Here we go through the basic flow and try to "catch" anything, it also gives engineers chances to ask questions about the flow and make any suggestions.

Screen Shot 2018-10-01 at 10.12.09 AM

big picture

When its all said and ... done?

big picture

When its all said and ... done?

This was one of the first major user flows that I worked on. I definitely feel that I learned quite a bit. One of the highlights from this process and specifially this flow, was the addition to flow charts to the rest of our design planning sprints. Being able to sit with someone on the engineering team and come up with a clear and visual representation of how the feature should behave was ideal. We started using these for all of the other features we were working on. It let us focus on the overall design, then focus on so much of the basic functionality like we were in the beginning. 

PRODUCT | GRAPHIC DESIGN| UX CONSULTING | 3D DESIGN

 

DRIBBBLE     TWITTER      INSTAGRAM      LINKEDIN

 

Copyright Frank Rycak Jr 2018