Develop new UI/UX to replace an aging .NET based responsive web application. The application supports customized branding and style sheets with existing clients so consideration was given to this throughout the redesign process.

Starting Position

Feature rich LMS with a somewhat dated feel and layout. Although the application was responsive it did not take advantage of high resolution displays, contained dated navigation and lacked visual appeal making it more of a chore to use than a pleasure. 

topyx_old.png

Concept

The concept was to take advantage of wasted white space, simplify the navigation, improve the main catalog and training views with both a card/grid view and a detailed list view. In the main pages for each section introduce a side panel which would provide additional/complimentary information and shortcuts. 

Process

  • Developed initial concept for catalog, course home pages and course tree as the most heavily trafficked pages.

  • Worked through a few improvement iterations taking into account internal feedback.

  • Developed remaining pages and user flows in Figma and created clickable prototypes to allow live walk throughs.

  • Reviewed development team sprints and provided final sign off on new UI/UX.

  • Worked with client service managers to develop rollout strategy and worked with key clients on helping them leverage the new UI/UX.

  • Assisted branding team with client updates, which included applying new themes and graphics so clients switching to new UI would have a seamless experience

Results

Initial UI prototypes were developed and finalized over 3 months and development took around 5 months to complete. The new UI was then rolled out as a major updates to clients over the next 3 months, with many clients reporting good feedback from their users on how much easier the platform was to use. In addition the sales team reported positive feedback from prospects and found that demoing and selling the platform was easier than the prior version. 

ipad community.png
LearningCatalog.png