Fonix System Redesign.

MOBILE PAYMENT SCREENS

UI Problems

Fonix system, B2B Sass software, had an old look and feel and UI system. Three styles togheter were overlapping, with UI features having different shapes for the same functionality and different functionalities with the same shape. The general page architecture had a poor design, with several issues. First of all, a one column system preventing a rational usage of the screen, and busy users in scrolling the pages till the very bottom. A confused and inconsistent navigation system, with call to actions difficult to find and always below the fold.

Please find below a screen with some of the system UI issues: the amount of buttons with several styles, confused page titles, inconsistency of the menu fields.

UI Solutions

The very first issue to resolve was the UI consistency. I created new design sheets and tested them on interactive prototypes. Scattered and differentiated UI features were grouped together to find a new and fresher style, to be rolled all over the product and drive the creation of unified and flexible CSS classes. The page architecture finally found a title system, with improved means of navigation and a multiple and flexible column system to save space and lot of scrolling.

Please find below some slides with a recap of the UI work.

UX Problems

The whole system needed a proper UX work to improve the user journeys at least for three important tasks: mobile payment screen creation, campaign creation and SMS campaign creation. The service creation for the mobile payment screen was confused, with several back and forth during the task completion. Payment screens are the way clients collect subscriptions for services they offer through mobile devices. Fonix system is powerful in delivering them, but the process of the screens creation was a little chaotic and penalized by the old page structure. The poor rationale of the page was pushing the service creation process below the fold, with problems for the users in properly setting up a competitive end product. The final outcome had a poor and old-fashioned look and feel.

Please find below a screen with some of the UX problems related to the payment screens.

UX Mobile Payment Screen research and wireframe.

Once fixed a consistent UI system and a solid page architecture the road for the ux redesign was finallhy open. After interviews and sessions with clients and stakeholders I could focus on the issues of the existent user journeys and try to imagine an improved structure for the content and the user journeys. The tabs needed for the service creation were reduced, and lot of information condensed into more meaningful chunks. The service creation was enriched with 2 more screens to be added to the end product, and the prototyping had to keep them into consideration.

Please find below some screenshots with the old page architecture and user journeys, and the very first wireframes for the project.

UX Mobile Payment Screen prototypes.

I used the above new visual system to prototype the new top bar, the dashboard widgets and their UI features. I've done the work using Sketch App and Axure and iterated it several times.

Please find below some details of the designs and interactive prototypes.

Final Product

Coming soon ...