Street Smarts for the Internet

A digital and physical guide to avoiding shady practices on the internet from a designer's perspective.

street-smarts-mocks

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

icon-grid-lilac

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.

icon-scale-lilac

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. 

icon-edit-lilac

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

sketch-catfish-mocks-2

Catfish Layout (Visual Heavy)

sketch-catfish-mocks-1

Catfish Layout and Asset Sketches

sketch-password-safety-mocks-1

Password Safety Layout Sketches

sketch-password-safety-mocks-2

Password Safety Sketches (Visual Heavy)

Plan

Wireframes

catfishing-wireframe-left-1

Catfish Left Mock

catfishing-wireframe-right-1

Catfish Right Mock

password-safety-wireframe-left-1

Password Safety Left Mock

password-safety-wireframe-right-1

Password Safety Right Mock

Iterate

Illustration Explorations

street-smarts-illustration-exploration

Iterate + Design

Design Comps

catfishing-comp-v1-left

V1 — Catfish Left Mock

catfishing-comp-v1-right

V1 — Catfish Right Mock

password-safety-comp-v1-left

V1 — Password Safety Left Mock

password-safety-comp-v1-right

V1 — Password Safety Right Mock

catfishing-comp-v2-left

V2 — Catfish Left Mock

catfishing-comp-v2-right

V2 — Catfish Right Mock

password-safety-comp-v2-left

V2 — Password Safety Left Mock

password-safety-comp-v2-right

V2 — Password Safety Right Mock

Design

Final Print Mocks

street-smarts-final-book-mocks-scaled-1

Test

Prototypes

password-test-initial-prototype

Initial Password Safety Interaction Mock

password-safety-interaction-test

Test Interaction Flow

catfishing-prototype

Catfishing Tablet Prototype

catfish-prototype-flow-smaller

Catfishing Prototype Flow

password-prototype

Password Safety Prototype

password-prototype-flow-smaller

Password Safety Prototype Flow

street-smart-device-mocks-angled
street-smart-device-mocks-straight

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. ❤ 

street-smarts-signatures

Free Stickers! 🤩

Free Stickers! 🤩

Let's chat!

© Christina Ho 2023