Shir Zalzberg

OverOps Product

Mask

The OverOps product allows developers to view log exceptions in their product’s code, even when the product is live. This app is very technical, with a target audience of developers.
Over time, more and more features were added, resulting in a crowded and inconsistent interface.
In this project I focused on creating a long term solution. 
I started with a style guide to prevent future inconsistencies, and continued to a re-design of the interface. The result is a consistent, clear product that can grow over time.

The side bar 

The sidebar received special attention.Through the sidebar users can:
- Filter their views (view exceptions from the last day/week etc.) 
- See what they put under auto-hide (exceptions they wish to ignore)
- view their Labels (which tags do they have)

While organizing the sidebar, a decision was made to add titles for each of the categories, enabling a collapse and expand option. This helped reduce crowdedness, and created a more intuitive user experience. The “Views” category is the most important one in the sidebar. It is expanded by default when users arrive at the page, displaying the 8 most used views. The rest of the views are found under the ‘show more’ button. 

Mask

The style guide

When I approached to create the style sheet, I started with remapping all the assets the app currently have.
I found different kind of toggles, buttons that behave differently between screens and colors that don’t match.
In the style sheet I tried to unify everything and to give as much information as I can to prevent this situation to repeat itself.
In the process I also decided to give the app’s assets more depth. In the old design everything was very flat, but looking at the more complex screens, you could see that the flat design didn’t work well enough. With the use of depth, I was able to create different assets that signify to the users how to use them without causing confusion.

Mask

Implementing the
new style

Once the new interface was approved, it was time to go step by step through our system, and adapt each and every page to our new design. We aimed to do it pixel perfect.

I want to see more!

Once the new interface was approved, it was time to go step by step through our system, and adapt each and every page to our new design. We aimed to do it pixel perfect.

Implementing the new style

Shir Zalzberg

OverOps Product

The OverOps product allows developers to view log exceptions in their product’s code, even when the product is live. This app is very technical, with a target audience of developers.
Over time, more and more features were added, resulting in a crowded and inconsistent interface. In this project I focused on creating a long term solution. I started with a style guide to prevent future inconsistencies, and continued to a re-design of the interface. The result is a consistent, clear product that can grow over time.

The sidebar received special attention. Through the sidebar users can:
- Filter their views   (view exceptions from the last day/week etc.)
- See what they put under auto-hide   (exceptions they wish to ignore)
- view their Labels (which tags do they have)

While organizing the sidebar, a decision was made to add titles for each of the categories, enabling a collapse and expand option. This helped reduce crowdedness, and created a more intuitive user experience. The “Views” category is the most important one in the sidebar. It is expanded by default when users arrive at the page, displaying the 8 most used views. The rest of the views are found under the ‘show more’ button.

The style guide

When I approched to create the style sheet, I started with remapping all the assets the app currently have. I found different kind of toggles, buttons that behave differently between screens and colors that don’t match. In the style sheet I tried to unify everything and to give as much information as I can to prevent this situation to repeat itself. In the process I also decided to give the app’s assets more depth. In the old design everything was very flat, but looking at the more complex screens, you could see that the flat design didn’t work well enough. With the usge of depth, I was able to creatre different a assets that signifies to the users how to use them without causing confusion.

MaskMaskMask
Mask
Mask

The side bar

Mask

The OverOps product allows developers to view log exceptions in their product’s code, even when the product is live. This app is very technical, with a target audience of developers.
Over time, more and more features were added, resulting in a crowded and inconsistent interface. In this project I focused on creating a long term solution. I started with a style guide to prevent future inconsistencies, and continued to a re-design of the interface. The result is a consistent, clear product that can grow over time.

OverOps Product

Implementing the new style

Once the new interface was approved, it was time to go step by step through our system, and adapt each and every page to our new design. We aimed to do it pixel perfect.

The sidebar received special attention.
Through the sidebar users can:
- Filter their views  
(view exceptions from the last day/week etc.)
- See what they put under auto-hide  
(exceptions they wish to ignore)
- view their Labels (which tags do they have)

While organizing the sidebar, a decision was made to add titles for each of the categories, enabling a collapse and expand option. This helped reduce crowdedness, and created a more intuitive user experience. The “Views” category is the most important one in the sidebar. It is expanded by default when users arrive at the page, displaying the 8 most used views. The rest of the views are found under the ‘show more’ button.

The side bar

The style guide

When I approached to create the style sheet, I started with remapping all the assets the app currently have. I found different kind of toggles, buttons that behave differently between screens and colors that don’t match. In the style sheet I tried to unify everything and to give as much information as I can to prevent this situation to repeat itself. In the process I also decided to give the app’s assets more depth. In the old design everything was very flat, but looking at the more complex screens, you could see that the flat design didn’t work well enough. With the use of depth, I was able to create different assets that signify to the users how to use them without causing confusion.

Mask
MaskMaskMask