Request
Redesign/Modify a desktop application so that it displays properly on mobile devices.
Challenge
The desktop app was not completely designed to be easily ported over to mobile.
Some pages transfer over very nicely but others needed some rework.
Below are two(2) sections of the Desktop-to-Mobile UX Document I created...
'My Dashboard' Conversion
The transition from desktop(DV) to mobile(MV) is rather simple. The DV has been designed with the MV in mind.
We will simply be scaling it all down to fit on a smaller screen.
Desktop Version of 'My Dashboard'
Mobile Version & Notes of 'My Dashboard'
The only real design change was the Header & Left Nav...
•I collapsed everything in the left-side nav (header icons and text links) into a hamburger button/menu.
•I also collapsed the profile name, and logout, into a profile icon.
•The text label would remain, so the user would always know where they were.
Header for Desktop App
Header for Mobile App
Details about the Hamburger Menu
'Learning Path' Conversion
Converting the 'Learning Path' screen to Mobile wasn't initially difficult. The real challenge was with navigating between the Course Path and the Course Content. On the DV both of these elements could be presented at once but on mobile I needed to be a little bit more creative.
Desktop Version of the 'Learning Path'
So my creative solution was to introduce a swiping-interaction to allow the user to quickly change from the Outline to the Content.
With that all minor challenge out of the way the entire interface could just scale down to the mobile dimensions.
Mobile Version of the 'Learning Path/Outline Area'
Mobile Version of the 'Learning Path/Content Area'
The last element that I had to take into consideration was that the simulations would not be accessible via mobile. My solution for those cards in the Content Area was to still present them to the user BUT have them almost 'ghosted' and locked. If the user was to click on a locked piece of content they would be presented with a popup informing them why.
