What is SmartPay
SmartPay is a lease-to-own payment plan that lets users shop for electronics and spread payments over time. They work with different vendors to offer these plans.
The dashboard consisted of two parts. First, was the on boarding process for vendors willing to sign up with SmartPay. Second, was the dashboard where they could view all their transactions made with SmartPay. My challenge was to carry out its complete redesign.
The old system consisted of three significant pain points. First, it had a lot of repetitive form fields. Second, it didn't indicate any progression that let users know which set of forms they were at. And lastly, the dashboard was very disorganized with cluttered content.
I researched different sign up forms to learn how others approached this problem. Then, I eliminated the repetitive form fields to minimize the set of forms.
I added a progression indicator to give feedback to users. There are three parts to the indicator, first the bold text (set 3) to let users know which set of forms they are at, second gray regular text (sets 1 & 2) are the sets they have already completed and lastly, gray light text (sets 4,5,6) are the sets they will have to fill next. I also included a progress bar for reference.
The dashboard was very disorganized. So, I decided to put the primary navigation on the side bar. The logo and profile info on the top. The idea was to leave as much space as possible for content.
The more detailed the style guide is, the more helpful it will be for developers to implement my design. Here is just a small part of the style guide, some basic elements like colors, typeface and UI.