Street Smarts for the Internet
A digital and physical guide to avoiding shady practices on the internet from a designer's perspective.
Overview
MY ROLE
UX/UI and Visual Designer
MY TEAM
5 Designers
PLATFORM
Microsoft Duo Tablet, Printed Book
Street Smarts for the Internet is a guide to the internet through a designer’s lens. Ranging from catfishing to internet cookies, this book focuses on identifying dangerous patterns and practices across the internet and teaches readers how to avoid them.
Each designer selected two topics related to digital dangers they were passionate about and aimed to create a comprehensive tool to educate users on potential risks in the digital world. Topics such as password security and catfishing/phishing awareness were vital to me since they are crucial in preventing common privacy breaches caused by weak passwords and gullibility online. As technology evolves, so do the skills and methods of digital attackers. That is why spreading knowledge of what we know is essential and a never-ending battle.
My Creative Process
Research / Plan / Design / Iterate / Test
Research
Our Digital Climate
Advancing Technology
Even as someone working in a tech field, catching up to each digital trend and advancement is a formidable task many cannot keep up with. Every day a new thing is created or extorted and staying informed becomes more and more difficult. If someone in a digital industry can find themselves lost in this space, those who aren't tech-savvy will be left in the dust, which is something I see firsthand every day.
Susceptible Users
Users unaware of their digital surroundings and security can encounter significant harm. For example, they may fall prey to scams that result in financial loss, be subjected to harassment that affects their mental health, or have their personal information and identity stolen. These practices exploit the faith and naivety of the individuals involved, making it difficult for them to protect themselves against these digital threats. The consequences of these practices can be long-lasting and far-reaching, affecting not just the individual, but also their family and friends.
Digital Predators
From a predator's perspective, dark online practices and patterns are means to exploit vulnerable individuals for personal gain. They use phishing, catfishing, and grooming tactics to manipulate and control their victims. The goal is to gain power and control through personal information and trust. Digital predators benefit from the anonymity of the internet and access to many potential victims. To protect against them, individuals should be aware of common tactics and take steps to protect their personal information and privacy online.
Research
How can we mitigate harm?
1. Identify best practices
Researching reputable cybersecurity websites and articles was essential to determine solutions for security. I looked into many companies from password managers and malware protection to government FTC (federal trade commission), so I could pick up apart the most impactful tips. For me, these tips would decrease cybersecurity risks significantly and did not require too much uplift to achieve, and were simple habits to help the user adapt.
2. Inform in a memorable way
We can give users all the information they need to make better digital choices, however, if we want them to remember these tips, the information has to be digestible, engaging, and provide tidbits that can help them reassociate back with that topic.
3. Provide tools to make better choices
While educating the readers on how to live a secure life, each topic will be paired with an interactive game that simulates these practices, for example, a password phrase generator and a phishing email detector minigame. These games will also incorporate many visual cues to encourage users to associate these practices with specific imagery.
Research
Learning New Things
Physical Layouts
I've never made a book or printed material before this project. So I went to different bookstores and libraries to see how different books/magazines lay out content, educate their readers, and balance visuals and text. This gave me a lot of insight into the different formatting patterns between books and magazines and helped inspire the direction I could use for my topics.
Best Printing Practices
I've created digital materials like posters, book mocks, and infographics. However, this was my first opportunity to have designs on a physical product. So with that, my team and I had to learn the basics of setting up the document for printing like setting bleed and trim lines, using a CMYK palette, and conducting printing tests.
CMYK Color mode
I mainly work in RGB colorspaces. It was interesting to learn the limitations and workarounds of working in CMYK. I initially worked in RGB mode, then used color converters to see what colors matched best. I found that the colors would get desaturated, and during print tests, the colors on screen would sometimes look different on physical paper.
Plan
Sketches
Catfish Layout (Visual Heavy)
Catfish Layout and Asset Sketches
Password Safety Layout Sketches
Password Safety Sketches (Visual Heavy)
Plan
Wireframes
Catfish Left Mock
Catfish Right Mock
Password Safety Left Mock
Password Safety Right Mock
Iterate
Illustration Explorations
Iterate + Design
Design Comps
V1 — Catfish Left Mock
V1 — Catfish Right Mock
V1 — Password Safety Left Mock
V1 — Password Safety Right Mock
V2 — Catfish Left Mock
V2 — Catfish Right Mock
V2 — Password Safety Left Mock
V2 — Password Safety Right Mock
Design
Final Print Mocks
Test
Prototypes
Initial Password Safety Interaction Mock
Test Interaction Flow
Catfishing Tablet Prototype
Catfishing Prototype Flow
Password Safety Prototype
Password Safety Prototype Flow
Reflection
Takeaways
Takeaways
Collaboration
As a team of five designers, communication was vital. We found that many teams beginning hurdles was identifying a design system to keep a consistent feel throughout their book among multiple heads. Right away we found that we valued everyone's distinct style and wanted everyone to get an opportunity to showcase this. We let everyone choose their design direction, but we identified guidelines that must stay consistent to make the pages feel uniform. Some examples included using the same typeface, letter spacing, and text hierarchy. It was essential to stay in sync, share our workspaces, and keep group notes to keep track of everyone's progress and design updates throughout our timeline.
Trial and error
There were many facets in this project that I was new to, from working asynchronously due to covid, and creating printed materials, to working on a newly released device that wouldn't have many reference materials. To get the product to its highest potential testing was essential. I had to test prints and layouts multiple times to ensure alignment, colors, graphics, and sizing translated how I imagined. Testing my products is a part of my design flow, but since we chose a device that was so new and inaccessible, I had to work around as best as possible. So I traced out the tablet's dimensions on paper and compared that to my screens on Figma. However, through this testing, I communicated best practices for each of the specific products to my team, from the legibility of text to the spacing of items.
Honestly, this project was a pleasure to work on, I'm thankful for my team and their extraordinary and distinct design styles. We each had an opportunity to showcase how we approach design and educate people on matters that mean the most to us. It was great to be on a team with equally passionate designers who were patient, reliable, realistic, and comforting! Thank you team Street Smahts.
Honestly, this project was a pleasure to work on, I'm thankful for my team and their extraordinary and distinct design styles. We each had an opportunity to showcase how we approach design and educate people on matters that mean the most to us. It was great to be on a team with equally passionate designers who were patient, reliable, realistic, and comforting! Thank you team Street Smahts.
Free Stickers!
Free Stickers!