Email Security Platform redesign

User testing, wireframes, design and development of a new look responsive site.

Introduction

Email is the most common way for cyber criminals to attack a business. CORVID's 'Pernix' Email Protection solution protects them and their users against the dangers of email fraud. It compromises of:

  • A banner which appears on every email, giving an indication of any security issues
  • A dashboard where users can manage and recover their emails
  • A secondary dashboard where IT administrators can manage the service

Whilst successful, the service needed an overhaul from a user experience perspective. I was tasked with redesigning the platform with a fresh new look and an improved user experience.

My responsibilities

  • Map out current & desired user flows
  • Conduct user interviews
  • Identify key user journeys & pain points
  • Redesign platform
  • Create page layouts in Bootstrap
  • Create CSS
  • Create new user guides

Challenge

The majority of users were confused by the current service and were also frustrated that the existing site wasn't device-friendly. I wanted to adopt a user-centric design process and deliver a redesign that met the needs of the people using the service but also business requirements.

User research

  • Carried out extensive competitor research
  • Interviewed key stakeholders within the business to get their opinions on the service and find out key requirements
  • Spoke to the development team to understand technical requirements and limits
  • Carried out field visits to interview users of the existing banner and dashboard to gain a better understanding of how people use the service.
  • Used online surveys to gather data from other users
  • Created detailed user personas using the research I gathered
  • Presented findings to key stakeholders

Wireframes and prototype

Once internal stakeholders had agreed to my findings, I then:

  • Created wireframes for each of the required screens and emails
  • Used Balsamiq and then XD to create an interactive prototypes to further test with users. View prototype example
  • Made changes where appropriate following user feedback
A selection of screens from the XD prototype

Design solution

  • Using Photoshop I created a set of pixel perfect designs for each of the screens
  • Created a CSS style sheet
  • Made a detailed style guide was also created with detail of colour, typography styles, icons and more.
The new Pernix solution on a tablet and iphone A selection of screens from the new design

Development

I woked with the lead developer to build the site in Bootstrap. I was responsible for page layouts, css, some javascript development and content creation