Product Design

M365D Threat Analytics


Microsoft Defender’s Threat analytics is a threat intelligence product, providing users knowledge from expert Microsoft security researchers. It's designed to assist security teams to be as efficient as possible while facing emerging threats and gain awareness avbout active threat actor campaigns, popular and new threat techniques, critical vulnerabilities, and more.



Besides serving as an all-round security knowledge center, it also has the goal of connecting security teams with other integral risks and vulnerabilities within the product to better protect. In my role as the lead Product Designer on this feature, there were two main phases which included different product and engineering teams as well as roll out timings.

Goals - Phase I
  • Improve threat campaign report usability
  • Connect to other product areas that show risk and vulnerabilities for better investigation and configuration efforts
  • Present an aggregated view of relevant organization threats


Research
The initial research included a wide competitive landscape understanding with the collaboration of product managers to see which features are missing and what Microsoft can bring in terms of threat intelligence that other competitors don’t have.

I also conducted user interviews to understand the various security personas and their day-to-day insight into the threat landscape.
One of the main take-aways was Microsoft’s threat intelligence data advantage and the ability to connect the threat report to other risk factors within the product.

An aggregated Analyst Report

The re-design of for the first phase of threat analytics included an aggregated view of associated risk and vulnerability data associated with the specific threat report. The report now not only included well-documented informative text of the threat, but associated data of incidents, affected assets, and relevant recommendations.

This data is summarized in the overview tab, and detailed out in separate tabs where an analyst can continue their investigation flow in other areas of the product.




User Research
In collaborating with the User Research team, a cohesive study was conducted on 8 security professionals on the changes that were applied to the report. The main findings were:
  • Following the threat report design change, the second most commonly used action in threat analytics was drilling down to related incidents from the report which completed the goal of connecting threat analytics to other product areas
  • The most common and dominant action was still reading through the full analyst report with the tendency to look for common indicators and action items to better protect their organization
  • Threat analytics and incidents both tell a similar story about an attack, yet the stories are not identical as each area presents information from a different angle using different visualize means 



Goals - Phase II
  • Expose threat intelligence in a more organized fashion by creating a linked library of actors, campaigns and techniques
  • Maintain relationships between different types of entities so that security analysts can automatically draw smart conclusions
  • Improve the usability of the analyst report based on user feedback and expose action items from the report in more visible and distinguishable areas
Creating a Threat Intelligence library & Threat Actor profiles
  • In creating a unique intelligence library, the re-design included a better fitting layout and look-and-feel
  • Threat Actor profiles were introduced with content presenting more global prevelance and related sectors of threats in different fields
  • In order to set our product apart from competitors, I set up a brainstorming session with various design and product teams to allow us to identify and isolate M365 Defender’s distinguished characteristics that would make the actor profile illustrations stand out
Improving the Analyst report & exposing more report info
  • I refined the UI of the report itself to be easy to navigate
  • Information like attack techniques for a specific threat were exposed in different tabs to tell a more consistent story around investigation
_____________________________________________________________

In Summary
  • A wholesome connection between threats and incidents was made using designed emphasis in the UI and the threat reports
  • The visual language I created in Threat Analytics separated the product from its competitors
  • Threat Analytics became a source of truth of action items for a security professional to take. Based on user feedback I collected, this was no longer just a place to gather and read threat information, but also a valuable starting point for protection. 


Product Design

Wix File Share


Wix File Share is an application for Wix site owners with the goal of being the best tool for sharing files between site owners, members and groups. Users can create a file library so that their community members can easily share files with one another. 




Audience
In collaboration with the feature’s Product Manager, I set out to find the target audience for the app’s social capabilities after its first launch. After a round of user interviews, we defined the main audience for this tool as online academies and communities, while keeping independent business owners as a secondary focal point.




Defining the pain points
The app’s older design made it difficult to take actions on multiple files, navigate between folders, and easily distinguish between a file and a folder.

        
Besides the general usability issues that our own product team found to be problematic, we identified how our users customized and interacted with the product based on their utilization of the app in their websites. The next step was speaking to these same users and collecting app reviews:








Based off of data collected from BI and user talks, the main points I defined were:

  • Basic UI capability improvements such as sort, search, and selection
  • Lack of image + description for files and folders
  • Lack of privacy permissions for files or folders




UI Improvements - Stage Design System integration
Issues like sort & search, selecting files, and navigating between folders were improved with the integration of the Stage Design System which I lead. Later, these changes were tested with usability studies on multiple participants.




Lack of image + description for files and folders
I created initial layout sketches for files with images and description




Mobile Design Prototypes
For mobile, we tested our certain behaviors like file selections and actions and folder creations using a prototype to achieve the best design. Results were documented above.


Privacy Permissions 
In designing the folder permissions flow, I first had to map out the various user journeys for every possible action item that can be taken on a specific file or folder. Later, the full user flow was designed:


In Summary
  • I identified 3 key areas that needed user experience additions and refinement based on data collection, user conversations, and viewing users’ designed websites
  • Design refinements were validated through prototype creation and user testing
  •  Folder and privacy permissions were designed and launched after finding it as the most requested feature

Product Design, UI

Stage Design System


Wix’s Stage Design System is a design system for all of Wix’s vertical apps such as Wix Stores, Wix Bookings, Blog, Forum, and more. Within the team, I researched and designed the components (based on atomic design methodology) that are placed “on stage” when users add such apps to create their website. These apps are eventually themed to the user’s website design but the system creates consistency in functionality and behavior. 


Goals
  • Create consistent behavior and functionality across all Wix’s vertical apps
  • Maintain versality across all apps so that users have the freedom and flexibility to design websites according to their desired taste
  • Increase design and development velocity
  • Improve the standard of quality across all Wix on-stage apps, including meeting all accessibility standards 

Process
There are over 50 repeating components in over 14 On-Stage apps at Wix, so the first step was indexing and mapping out these components.

This is an example of a card component that looks and behaves differently in every product.



Research
For every UI components, a research deck containing different visual and functional refrences and reading materials was created.



Grid, Layout, & Style Instructions
A style guide based on a 4px grid with recommendations for text sizes



Components
A skech library of components with documentation was created for all Product Designers working on various on-stage apps. These components served as “skeletons” for themed UI that can later be stylized according to the website’s style guidelines.
        




Prototypes
Before releasing any component to the official developed library, quick protoypes on actual Wix templates were made to test the affect on the final web design.


Outcome
The result is a sketch library with documentation for the product designers working on the various on-stage apps as well as a detailed website with documentation displaying guidelines for both feature designers and developers.

Implementation on the File Share App
Part of my work was also the actual implementation of the library on products such as the Wix File Share App - on on-stage app that allows website users to share files. 

An example of a user’s website with the File Share App before the Stage Design System was applied

Redesign of the file share app with Stage Design System integration- cleaner layout, ease of use, with lots more flexibility

The Wix Arena


The Wix Arena is a marketplace for Wix Design Experts - freelance web designers - who use Wix as their main site building tool.



A new ratings & reviews system
2017
I worked on a new ratings and reviews system for the Arena to allow clients to project on their experiences. This feature enables a ranking system within the Arena as well.





A new client brief proposal
2017
After user research, we found that the way in which clients search and find Wix experts is long and and complicated and therefore many of them abandon the process and prefer to look elsewhere for help in finding web design professionals. I proposed a concept which has worked on many other Wix products where the form is split up into flows of wheter you’d like to create a new website or fix your existing one. 







The Expert’s Portfolio Page
2017

A slick way to display a Wix Expert’s portfolio when they have many works to showcase. Most of the information shortens when you scroll.




Web Design Projects


As part of the Wix Pages team at Wix.com, I designed various websites for users and as well as for marketing purposes. I also created a website for a conceptual food product with Any.




Work Event Template
2017

A template made for Wix.com for a company event that also includes the “Wix Events” app and it’s customization abilities.






Premium Plans Page
2017



A one pager that gives information to non-users about the various paid features of Wix.com




Private Tutor Template
2019



A simple template designed and illustrated for Wix.com for a private tutor.






Wix Code Examples
2019




A database for cool examples web interactions completed with Wix Code. I designed and coded the site, form, search functionality, and more.





Wellness On Tap
2016



Website, product, and conceptual design for yogurt in the workplace. Made in collaboration with Studio Any.