The widget bar was always visible, users found themselves having to hide it every time they used this page.
The layout of the different buttons was cluttered and confusing: Button actions that affected the project as a whole were next to button actions that affected the widgets individually.
The vertical space on the screen felt like it could be optimized.
The Solution
I designed a simpler, less cluttered and more responsive design by:
Grouping all project buttons & functions together on the top right corner.
Grouping all widget buttons and functions together in a menu bar right on top of the widget area.
Implementing a separate widget panel that becomes visible after clicking a button on the menu bar. This way users can see the widgets only when they are needing to add them to their projects and they go away when they are not needed,
New Edit Interface
Here is an interactive prototype of a very simple concept idea to improve the experience when editing a widget. when selecting a widget the user will be presented with a floating bar at the bottom of the screen and if the user selects Edit, a now modal slides out revealing all the settings for each widget together with a live preview of what the widget would look like based on the settings selected.
Mobile Navigation and Menu Bar redesign
Here I show the process of creating multiple iterations in my design to simplify the interface of the diagnostics screen in the mobile view. each step has a description of the changes and the reasons for the changes.