ecommerce customized form

role

Research, Design, Development

Project Background

A 20 year old eCommerce UI was rewritten in AngularJS. The AngularJS version of the site has been live for around 2 years. The site had a stepped form that expanded/collapsed each step. The input fields in this form were not customizable and we were having low adoption rates due to the lack of this feature. When adding this feature to our administrative tool, we decided to also look at the experience of the form and make any necessary improvements.

goal

Ensure a recently built eCommerce UI form provides a quality user experience

Research

I conducted user interviews with users that had previously provided feedback via our website about the form. These users were across different roles and types of customers.

Key insights from the user interviews:

• The current form was much easier to use than the 20 year old version

• The power users disliked clicking next every section

• The power users also disliked how certain fields didn’t allow for keyboard entry (ex: time)

• The users found some labels were confusing and didn't make sense

• Some auto-suggestions felt cluttered and unnecessary for some, but others used the autosuggestions every time

• There was confusion over some fields that weren’t marked as required but were required

• The confirmation page did not give correct call to action buttons

• The users requested the ability to have a template for the form

• The website was unresponsive so having it side by side with other windows was difficult

Design

I built two different, clickable workflows in AdobeXD using a common scenario discovered in user observations. The users were asked to complete the form using sample data. I hoped to contrast a stepped form with a template and a single page form with a confirmation page.

Key insights from the usability tests:

• Users preferred having a long, single page form (Option A) so they could quickly tab through without clicks

• They were able to complete the task much faster (to their delight) than the current screens using Option A

• The nested auto-suggests in Option A felt like a happy medium to both types of users 

• Users would like the form to autofill information for certain form fields

• The templates in Option B tested poorly and would need further design iterations to meet the initial request of the users

• Users did not feel that a summary, like in Option B, was necessary and preferred a page after submission that helped them navigate to the next steps

Using the findings from the usability tests, I decided to break typical form convention and proceed with the long, single form. I took elements that tested well in both designs and combined them into the design proposed to the stakeholders.

DEVELOPMENT

I worked with the business analyst and lead developer to turn the designs into requirements for the larger development team.

I also hosted a workshop with the team to teach them best practices on the responsive Bootstrap3 grid so we could meet our users needs for having the window side by side. I also built the form in HTML/SCSS and collaborated with the developers to hook this code into the React application.