Case Study '25: At Risk
This year, I worked with a team to design and prototype an information website aimed at solving a specific problem for a targeted audience. The website was meant to be an interactive prototype, paired with a social media campaign and physical handouts to share the message.
We’ve all likely been targeted by a phishing attack at some point, whether through a phone call, text, or email. These attacks can cause serious damage. While many people know how to spot them and what to do, there are still groups, especially younger people and older generations, who are less aware. This website was created to help raise awareness and reduce the risk of phishing attacks.
The Problem
Our increasingly digital world has become the perfect playground for scammers. A lack of knowledge on up-to-date scam methods keeps Canadians vulnerable, and allows phishing attacks to happen in personal and professional settings.
Our solution is to inform users on the most common types of attacks, provide context for the phishing risk in Canada, and create a hub for victims of cyberattacks to find their next steps.
Initial Research
The first step that we took in approaching this problem was to determine who our target audience was and how to make the website accessible and understandable to them. Below is what we determined:
The target audience would be victims of phishing, younger adults who are concerned about their aging loved ones, and older adults concerned about their children's with access to the internet.
Next, we researched existing websites that are focused on raising similar awareness to gain insights into what they were doing well and identify areas where they were lacking. We examined two resources related to cybersecurity and one example of strong information design. The findings from this analysis are outlined below.
User Personas
From the above research combined with empathy maps, we were able to determine three user personas that would represent the target audience that this website would be made for. This would help us determine what features would need to be included.
Meet Samuel, Emma, and Walter, who are all individuals that have either been affected directly or indirectly by incidents of phishing. They are looking for a solution to this ever-growing problem.
Creating a Moodboard
The next step was to curate a moodboard to would communicate the direction and inspiration for this project. We wanted to combine a simple colour palette with rich illustrations that helped to enhance our theme. Below is a collection of images, wireframes, typography, and colours that we would want to reflect in our final website.
Planning & Concepts
The next step was to develop a plan for the website's layout and functionality, ensuring it was accessible to users of all ages. Given the website’s simplicity, with only two pages, the user flow was straightforward, offering limited pathways for navigation. Below is the example user flow we created to illustrate this process.
After establishing the user flow, we developed wireframes for all the pages the user would interact with on the website. Below is an overview of the high-fidelity wireframes created during this phase for the desktop version of the site.
Website Elements
As this was a group project, design choices had to be made at the start of the process to ensure consistency throughout the final website and its deliverables. We did this by establishing a strong colour palette as well as a simple typography hierarchy.
Next, we created a series of illustrations and imagery that would be placed into the website to create one meaningful story. We also created any components that our users would interact with on our website, including buttons, carousels and cards. Below is the unique set of illustrations that were created for this project.
Final Prototype
This is the final prototype designed to educate and protect individuals at risk of phishing attacks. The prototype includes a homepage that walks users through the various stages of a phishing attempt, along with a "Next Steps" page that directs users to essential resources. Below is a carousel showcasing key snapshots of the completed website.
User Testing
As this website was intended for a wide audience, gathering feedback on the presentation of information was crucial. After the prototype was completed, we shared the website with friends, family, and fellow designers to gather their input. Their feedback helped us to refine our work, and below are the key insights we received:
"The text size is clear and easy to read, which ensures no strain for older audiences."
"Even though phishing can be a daunting topic, the website presents it in a manageable way."
"The website presents information in a friendly and approachable way, with illustrations and a welcoming feel."
"The design is simple and accessible, with large buttons that are easy for users with limited mobility to click."
This feedback will be taken into consideration as we continue to develop this website and its deliverables in the future.
What Did I Learn?
Throughout this process, I gained a deeper understanding of the importance of having a strong narrative when designing a website, particularly one intended to educate users on a serious topic. A clear narrative shapes everything from illustrations to pacing and the selection of information to present. Without it, users may struggle to grasp the "why" behind the content being shared.
I also learned that there are countless ways to present information, whether it be through statistics or step-by-step instructions. However, it's essential to recognize that each user will interpret the information differently. By considering multiple perspectives in your design, you can ensure that the content is accessible and usable by a broader range of audiences, not just your target group.