O’Phish
Case Study
PRODUCT: Website ROLE: UX DESIGNER YEAR: 2017/2018
1.2 What is Currently Out There
1.3 Identify the best way to make O’phish user friendly
2.1 What are the current pain points?
INTRODUCTION Top 
What is phishing?
Phishing is the attempt to obtain sensitive information such as usernames, passwords, and credit card details (and money), often for malicious reasons, by disguising as a trustworthy entity in an electronic communication. The word is a neologism created as a homophone of fishing due to the similarity of using a bait in an attempt to catch a victim. According to the 2013 Microsoft Computing Safety Index, released in February 2014, the annual worldwide impact of phishing could be as high as US$5 billion.
Phishing is typically carried out by email spoofing or instant messaging, and it often directs users to enter personal information at a fake website, the look and feel of which are identical to the legitimate one and the only difference is the URL of the website in concern. Communications purporting to be from social web sites, auction sites, banks, online payment processors or IT administrators are often used to lure victims. Phishing emails may contain links to websites that are infected with malware.
Attempts to deal with the growing number of reported phishing incidents include legislation, user training, public awareness, and technical security measures.
Business need to adopt anti-phishing strategies to safeguard confidential information from competitors. One strategy for combating phishing is to train people to recognise phishing attempts, and to deal with them. Education can be effective, especially where training emphasises conceptual knowledge and provides direct feedback.
What is O’Phish? Top
O’phish is a platform that can be used to train employees of a company against phishing. O’phish is a Phishing Simulator and it delivers a complete solution to assess, train, and test employee vigilance across a company.
The final objective of this project is to create wireframes of O’phish in order to improve the current user experience already available on http://client.ophish.com/. The user needs to log in, create campaigns and see the results, O’phish interface must be intuitive and user friendly. The business goal being to attract and retain O’phish customers.
Project management and client relationship Top
We have a small team of three people. A product owner, a developer and me. We work remotely. We have an open channel of communication and cooperative work, they are totally involved in the process. I suggested the plan and schedule where we established the process for work prioritisation and milestones.
The opportunity Top
Discover what the user need in order to plan and conduct successful training strategies agains phishing.
Who are we Designing for Top
As part of the user research I chose three personas who will be the primary users of O’phish:
1. DISCOVER Top
During this stage I conducted the research. I looked at the competitive landscape and interviewed people.
1.1 Understanding the users Top
Methods: user interviews
During the research I conducted interviews and user tests to gain insight into what people experience when using O’phish website:
A) The user doesn’t know what are the opportunities offered by O’phish
B) They have problems signing in, creating a campaign and they don’t know what’s the outcome
C) Users think phishing their employees for training purposes is useful, but they have to trust O’phish to have good intentions and not to use their methods an inappropriate way
“It would be great to find out who are the weak links in the company and offer them special training”.
Anna
1.2 What is Currently Out There
1.2 What is currently out there Top
Methods: competitive analysis
We have conducted an extensive competitive research among direct competitors. Here’s a short summary that highlights a selection of competitors and the key findings that are relevant to our project.
O’Phish’s competitors
The competitors landing page present what is the problem, what solution they offer. They explain clearly the methods they use to solve it. They offer demos, have testimonials and number of satisfied users. They have privacy policy to indicate they are trustworthy.
1.3 Identify the best way to make O’phish user friendly
1.3 Identify the best way to make O’phish user friendly Top
Methods: user flow
I try O’phish and identify the user flow necessary to achieve the main objective on the website: create a campaign.
User flow
2. DEFINE Top
2.1 What are the current pain points? Top
Experience map
Determine how people approach platforms similar to O’phishing and what the current pain points are.
Experience map, primary user’s journey
The pain points are related to filling up forms. Users don’t like forms because it takes time. Users don’t like :
· forms that ask questions you don’t know how to answer
· forms with multiple-choice questions that don’t have the choice you want
· forms that ask for too much information, or information you’d rather not give
· forms with huge quantities of information or confusing instructions
Estabilish trust: We must declare the purpose of the form. Why they should fill it, what benefits will they get by doing so and most importantly, how will the provided information be used by O’phish.
Reward the user: Everybody likes to be rewarded after completing a process. Sometimes a smaller yet immediate reward can be more motivating, than a bigger in the future. This can be done with simple feedback messages that the user has done a good job. We have to choose a reward that covers the effort of filling out the form.
3. DEVELOP Top
Testing initial ideas, creating paper prototypes and digital wireframes
3.1 Idea generation Top
Methods: design studio
I brainstorm ideas around such topics as how the user can approach a phishing simulator, understand the results and analyse data. I test the current website with users and identify usability problems. I look at the user flow developed on the previous stage (discovery).
3.2 Testing initial ideas Top
Methods: rapid paper prototypes, user testing
Based on the ideas generated during the brainstorm, I created rapid paper prototypes that I started testing with users. I went through several rounds of iterations to ensure that users could complete the tasks and understand the functionality behind the features.
3.3 Iterative evolution Top
Methods: paper prototypes, digital wireframing, user testing, clickable prototyping in InVision
Simple paper prototypes evolved into more detailed and high fidelity wireframes that were tested and adjusted along the way.
This stage of the work consisted in two main actions: identify usability problems and create wireframes to present usability solutions. It was divided in 2 themes: register new user and create a campaign.
A) Register new user Top
A.1 Identify usability problems
Methods: user testing
The importance of getting people off on the right foot. The following images are print screens of O’Phish website.
This is the path taken by a new user to register at O’Phish platform.
Image 1 – Homepage
Image 2 – Register
Image 3 – Register (continuation)
Usability problem: asking the user for information you don’t really need. Most users are very skeptical of requests for personal information and find it annoying if a site asks for more that what’s needed to do the task at hand.
Image 4 – Error message
Usability problem: pushing the user for not doing things your way. The user should never have to think about formatting data. Don’t make the user jump through hoops just because you don’t want to write more code. On this specific case, the user inserted a personal email and the feedback message is: “OOPS! Something was wrong with user registration!”. O’Phish doesn’t accept personal emails. The field email should indicate what type of emails are accepted for registration and the error message should have a good feedback about the problem and how to solve it.
Image 5 – Dashboard
Usability problems: once the user logs in he is on his own. There is no information about what is O’Phish, what does it offers to the user and how to do something on the platform. It is also important to think about Web navigation because “figuring out where you are” is a much more pervasive problem on the Web than in physical spaces. We’re inherently lost when we’re on the Web.
Between other things, a website has to be:
Learnable: can people figure out how to use it?
Memorable: Do they have to relearn it each time they use it?
Effective: does it get the job done?
Efficient: does it do it with a reasonable amount of time and effort?
A.2 Present solutions to usability problems Top
Methods: wireframing
The following images are wireframes of O’Phish website taking into consideration usability problems and presenting usability solutions.
Image 6 – Homepage
Image 7 – Register/ start trial
Asking just enough information to take the user to the next stage and try O’Phish services. The title “Get Your Free O’Phish Account” explains why the user has to fill up the form. There is information besides the email box about what type of emails are accepted on this field and why there are constrains. It is important to have error messages that are specific for each problem and present solutions to the user.
Image 10 & 11 – Select a template and feedback message
This is a simplified version of “Create a campaign”. It is tailored for the new user that is being introduced to O’Phish. On the internet, the competition is only one click away, so if you frustrate users they will head somewhere else. We ask the minimum information necessary so the user can achieve the main objective: create a campaign, and as a result, fully understand how O’Phish works.
Image 12 & 13 – Checking the results and first glance at the dashboard
On the wireframe 6 the user has two options. The message says: “Do you want to see what the users received?” “Send me an example” “Or click here to see the results” with an arrow pointing to the dashboard link. The user can click on the button to receive an email with the template he choose on wireframe 4 and/or click on the dashboard link on the left side menu. Once he have done it he will see the dashboard for the first time.
Image 14 & 15 – Breaking down the dashboard on tutorial mode
On image 7: “Here you can see the results of your campaign (it is early, your users probably didn’t have time to check their emails yet).” Percentage of users that need special attention.
On image 8: “What did the users do with the phishing email of the first campaign?”
B) Create a campaign Top
B.1 Identify usability problems
Methods: user testing
This is the path taken to create a campaign.
Image 16 – Step 1
It would be better if the title indicated an action, for example: “Name it”, instead of the actual title “Campaign Name” (the campaign does not have a name yet).
Affordances are visual clues in an object’s design that suggests how we can use it. A rectangular box with a border around it suggests that you can click it and type something. If we have an editable text box without a border, the user could still click on it and type in it if he knew if it was there. But it’s the affordance – the border – that makes its function clear.
Since a large part of what people are doing on the Web is looking for the next thing to click, it’s important to make it easy to tell what’s clickable. As we scan a page, we’re looking for a variety of visual clues that identify things as clickable – things like shape, location, and formatting (colour and underlining). On this case the link is red (colour that is usually used for error messages) and the title of the page, “Step 1” is also red.
Image 17 – Step 2
On this stage the user has to add Learners (employees of the user’s company). The word learners gives the impression that O’Phish will provide courses about phishing.
On step 2 the user can only choose employees from a list. The list is a result of adding employees on another section of the platform. If the user wants to add another employee to the campaign he would have to abandon the process and it would not be saved.
Image 18 – Step 3
On step 3 the user has to choose templates from a list. The only information the user has to make this choice is the name of the template.
Image 19 – Step 4
On this stage the user has to insert dates and it is not clear what is the reasoning behind this choice.
Image 20 – Step 4 (continuation)
When the user clicks on the field “Date from” a calendar pops out. The calendar is not adjusted to the page.
B.2 Presenting solutions to usability problems Top
Methods: wireframing
Image 21 & 22 – Create a campaign, step 1
The user clicks on Campaign on the left side menu. He can see the campaigns list and the side menu expands with the action word “Create”. The title of the first step indicates an action: “Name it”. A rectangular box with a border around it suggests that you can click it and type something.
Image 23 & 24 – Step 2 and 3
On Step 2 the user can add new users (employees) that are still not listed on the platform. The title of step 2 is “Select users”, the page has lists with tick boxes and a button “Add more users”. On step 3 the user can see images of the templates.
Image 25 & 26 – Step 4 and feedback message
On Step 4 the title is “When do you want to send it?”. The option “Now” is automatically ticked and the second option displays a calendar.
4. GENERAL USABILITY PROBLEMS Top
Steve Krug, on the book “Don’t make me think”, says it is useful to imagine that every time the user enters a website he starts out with a reservoir of goodwill. Each problem the user encounters on the site lowers the level of that reservoir. On the image 27 you can see O’Phish home page. The left side menu is the primary form of navigation.
Image 27 – O’Phish platform home page
When the user clicks on Learners he would expect to go to a different page, but nothing happens except the left side menu expands, as you can see on Image 28.
Image 28 – Left side menu
The user clicks on List (on the left side menu) and he goes to a different page, as seen on image 29.
Image 29 – Learner’s list
The next image is a proposition of the improved home page.
Image 30 – Improved home page
It is important to have an effective home page, it is like the North Star. Being able to click on the home page gives you a fresh start. It is also where we will have the first impression of your website. We expect to go to the home page when we click on the company logo on the top. The home page should accommodate: site identity and mission, site hierarchy, search, teases, content promos, feature promos, timely content, deals, shortcuts, registration. The home page has to show the user where to start. It also has to establish credibility and trust. The home page has to answer the four questions the user has in his head: What is this? What do they have here? What can I do here? Why should I be here – and not somewhere else?
There are three important places on the page where we expect to find explicit statements of what the site is about. A) The tagline: it is a phrase that’s visually connected to the site ID, it is a description of the whole site. B) The welcome blurb: a terse description of the site, displayed usually on a prominent block on the top left of the home page. C) The “Learn more”. Innovative products tend to require a fair amount of explanation. People have become accustomed to watching short videos on their computer and mobile devices.
Image 30 – Example of improved page
I will wrap up indicating other suggestions for improvement as you can see on the Image 30 and also on the O’Phish interactive prototype.
The left side menu is more responsive. As an example, when you click on “Campaigns” you will see the Campaigns list page.
You know where you are. All the pages have an orange title that correspond with what you clicked before. If you are lost you can always go to the home page. All the pages have a back button.
You know where to click. All the links are blue, except for the eventual green button, as you can see on Image 30. The green button is the most prominent on the page because he will create the action that will make the users keep using the platform.
You know where to type, you know what to type. Search boxes and empty fields are actual boxes and have common sense instructions.
5. DELIVER Top
I have created a clickable prototype that addressed the two main pain points of Adam’s experience by including the following feature:
1. Tutorial mode for the new user achieved by understanding the user journey and making the first user’s objective (create a campaign and understand the results) intuitive and user friendly.
2. Improvement on the current user experience available on http://client.ophish.com/, the business goal being to attract and retain O’Phish customers. This was done by discovering what the user need in order to plan and conduct successful training strategies agains phishing.
Claudia Loch 