UX, UI and Interaction designer

MySonicWall

SonicWall - MySonicWall

SonicWall Logo.png

Company: SonicWall
 

Overview

SonicWall provides network security solutions for the entire range of IT deployments. The design team at SonicWall was responsible for redesigning one of the main existing management applications called MySonicWall. This web app allows administrators to manage product licenses and services, firmware downloads, and support. One of my favorite aspects of this project is that I was able to participate in a wide range of design activities and see the project through from idea to execution.

 

MySonicWall - old site design

MSW Old Site.png

User research and initial concepts

In order to successfully redesign the MySonicWall UI, our design team interviewed users from a variety of network deployments in order to understand their workflows, needs and use cases. After uncovering the core needs and goals we were able to begin our initial design concepts. At various milestones in the project, I conducted user research; from writing scripts to running sessions, analyzing the data and extracting design insights, I was able to gain a deeper understanding of a domain I had little experience with professionally before working at SonicWall.

 

A simplified design - less is more

Compared to the interface on the firewall itself, the MySonicWall application has always been geared towards managing all products. Over the last 20 years, it had accumulated a lot of additional functionality that was rarely used which only added to the interface clutter. Using the Material Design framework to quickly create assets, we were able to create a new interface which highlighted the key product areas in a tabbed navigation: finding and downloading new firmware, managing licenses, cloud backups, and checking high-level device status.

One of my core tasks was creating extensive and simplified user flows for the new system. I also built a number of components including many of the various card types, the download center. I developed a much more keen sense of visual space for 'readability' and learned how to more effectively create and redline visual mockups to produce final assets for the engineering team.

 

MySonicWall Authentication redesigned screens

These are example screens from the currently live MySonicWall website. I completed the flows, wireframes, and visual design for the majority of this component of the site.

 

MySonicWall Simplified View

Below are mockups of the visual design assets created for the simplified homepage and product view, as well as the download center.

 

Zero Touch - Product Onboarding Experience

Similar to the currently live authentication, these are example screens for an upcoming feature involving Zero Touch privisioning of new firewall devices.

 

Concept testing & collaboration with engineering

After creating a concept for a simplified product view, our team was able to put our designs in front of actual users in order to get critical feedback in order to refine the designs. We also worked closely with engineers to implement and adjust our designs as necessary based on the requirements. We applied this process throughout the system; from the login flows to the core system navigation and UI. Using a mostly agile approach, we were able to track issues as well as create and update detailed specifications for the layout, flows, interaction and assets.

 

Individual contribution and takeaways

This was my first project seeing a project through its entire cycle; from research, to design to implementation. A benefit of working in this way is that it gives you much more nuanced knowledge of the design compared to being siloed within one skill team. Beyond improving my skills in visual design, user research and UX, I got a deep appreciation for doing enterprise design for expert users. While every design seeks to be intuitive and easy to use, working on a project of this magnitude showed me how to work through the challenges of merging the domain knowledge of expert users, in this case IT professionals, with simplified UX pattern in order to better serve their needs.