The Problem

The existing framework was old and out dated and we needed to modernize it with a more intuitive experience and new technology following suite of the new mobile application we built.
The outdated framework was causing extra time and energy on users behalf causing a slew of challenges for their day to day.

First steps, reviewed the legacy system and worked closley with users + Product Owners to create a sitemap to develop framework hierarchy along with estimated roadmap.

REVIEW LEGACY

Get a better understand of the existing application. What are the main features and what does it entail. From there we create a site map that includes main features, drill downs and specific actions for each.

Research

Conducted multiple user research sessions to review the legacy based on each workflow. Here the goal was to understand the users workflow, the missing loop holes and gaps and technology users wanted to see from the experience.

PROCESS: LEGACY TO NEW FRAMEWORK

My initial steps when developing a new framework from existing legacy system is understand the current application. This means sitting with end user and stake holders to define the current navigation structure, and what we need to consolidate / remove or change verbally. From this I create a site map to define this new navigation.

Framework design

Once we have the initial sitemap in place we then begin designing the framework. What the navigation looks like and the initial framework of the application.

Screen resolutions

After reviewing the data and initial features I will work with end user and stakeholders to develop UIs that work for the screen resolution.

Mobile Flows

Will sit with stakeholders to show them how the data will be consolidated for the mobile view. Educating them on processes and best UX for mobile.

SHOW HIDE DATA

Heavy data tables, I have the solution with the ability to show hide columns when needed.

Heavy forms

Reviewing heavy legacy data forms to transition into a better UX.

FORM RESOLUTION

Created a tabular form that defines data in a hierarchical fashion to help user navigate through the form with ease.
Added google map feature to allow users to add addresses via map functionality.

Increased business revenue and users time and efficiency by over 50%.
If want to see more of this example please reach out to me directly: asmith@smithdezign.com