During Commerce's early development stage, we wanted to create a simple on-boarding wizard that allows merchants to sync their existing e-commerce platform with Commerce in order to sell on social media channels. The idea is that Commerce will take all the data provided by a back-end payment platform like Shopify, and customize that data for the merchant in the main product. 


DATE  Sept - Dec 2015
TEAM  Product (Founder, Front-end Eng)
ROLE  UX Design Intern
PROJECT  Commerce website's on-boarding flow


Initial Sketches

While collaborating with Commerce's Head of Product, we established two use cases. The first is when a new user signs up and completes the flow. The second use case is a returning user who has registered but has not completed the flow. I started out mapping out the basic flow of the what the wizard needed to accomplish. The flow needed to have a log in screen, a success screen, and a screen with platforms for the user to choose from.

Use case 1:  New user

Use case 1: New user

Use case 2:  Returning user

Use case 2: Returning user


First Iteration

I took in to account for error handling and what happens when a user logs out of the wizard but has not yet completed the sync progress. I incorporated the company logo in order to make this process more customized for the user. 


Second Iteration

As Commerce has just began developing their product, there was a lot of ambiguity surrounding a concrete design language. In this iteration, I decided that it may be worthwhile to add in an option for users to add and manage their platforms once they have successfully synced one platform. The reason is so that the user can go back and modify/update previously entered data.


Final iteration

We went with a simplified approach to show progress and utilized the left panel to give users brief instructions on their current step. We also added a support email on the bottom of the panel. We also opted to omit the login screen and reduce the number of steps since the data can be accessed and modified via the platform's developer page. (This was a change that was made during the later development stages.)


What I Learned

I'd like to thank John Wantz for being a badass manager and mentor and for helping me navigate my first design internship (and shoutout to my co-intern Dorothy for the illustrations). I've learned a lot about the e-commerce space and how to create a clean UI while being scrappy at a startup.