Code Labs Redesign

  • Updated

To ensure you experience our labs with ease and almost engagement, we have enhanced the legacy labs experience session. We have fully revamped the entire UI & UX for a simpler yet sophisticated outlook that enhances your experience. 

The new design has been adopted across Remote Desktop Labs, Live Labs, and Hand-on Labs.

Explore the upgrades below. 

Legacy Design.webp

New design.webp

Legacy Design

New Design
TWO tabs (one for the environment - one for instructions)

ONE tab (containing both environments, instructions, AI chatbot, and any other features necessary to run the lab!)
  1. Available time left
  2. Title + path 
  3. Environment deployment time
  4. CTA to start lab deployment (deprecated)
  5. Separate lab steps list (deprecated)
  6. Link to platform help
  7. CTA to abort a lab session 
  8. Live Support floating widget
  1. Available time left for new component
  2. Title + lab type identifier (path removed)
  3. Environment deployment time + average setup time for reference
  4. No click is needed. Lab deployment starts automatically.
  5. Lab steps are displayed as an accordion in the description area.
  6. Platform help integrated into the sidebar.
  7. CTA to abort the lab session has been removed from its prominent position and integrated into the sidebar. A RESTART option has been added.
  8. A live support button integrated into the sidebar
  9. Description detach option ( opens it in the new tab)
  10. The sidebar can be collapsed and hidden to maximize exercise space.

 

Legacy Design

Legacy Design 2.webp

New Design

New Design 2.webp

Legacy Design New Design
11. Floating AI Lab Assistant button 11. Integrated AI Lab Assistant button
12. Floating AI Lab Assistant chatbot 12. Integrated AI Lab Assistant chatbot

 

Legacy Design

Legacy Design 3.webp

New Design

New Design 3.webp

Legacy Design New Design
13. In hands-on labs, validations were placed at the very end of the page or steps. No indicators show the number of validations within the entire exercise.  13. Validations are located at the end of each step within the accordion. By minimizing the accordion, you can see the number of validations for each step (see point 14).

 

Related articles

Comments

0 comments

Article is closed for comments.