Chengsu Chen
 
 
 

Background

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. 

 

Role

UX Design Intern

Duration

3 months (Sept - Dec 2015)

 
 
 
 

 
 
 
 

Identifying use cases

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.

 
 
 

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. 

firstiteration.png
 
 
 
 

Second iteration

As Commerce has just began developing their product, there was a lot of ambiguity surrounding a concrete design language. In this iteration, we 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.)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.)

 
 
 
finaliteration.png
 
final-bg.png