media awareness,
mindfulness and
education

Knowable

Mobile App and Responsive Website

Knowable is a mobile app and website that helps users manage media consumption and teaches media literacy concepts. My tasks for this project included: Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

ROLE

Lead UX Designer and Researcher

TOOLS

Figma | Figjam | Photoshop | Illustrator

TIMELINE

March - April, 2023

Slide Deck

The problem

Social Media use can have negative effects on users’ mental health and can be a source of misinformation. Available resources are heavily focused on kids and very few are created for adults.

The goal

Provide a resource for older teens and adult users to become more mindful about media consumption and learn about media literacy.

Understanding the User

User Research

I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was adults and older teens accessing resources for themselves. There are many resources available for regulating kids' access to media, as well as media literacy curricula available for an academic setting. My research revealed that that this user group would benefit from self-serve resources geared towards individual users and with less academic and/or youth-focused content.

Persona 1

“I want to stay informed about issues I care about.” 

Grey

Age: 29
Education: G.E.D.
Hometown: Independence, MO
Family: Lives with Parents
Occupation: Line Cook

Problem Statement:

Grey is a politically aware millennial who is active on social media and needs a way to get accurate information without consuming too much or being misinformed. They want to stay involved, but not be overwhelmed and they want to help their older parents navigate information online.

Goals:

  • Stay informed on current events and political issues
  • Limit the amount of information consumed
  • Find accurate information 
  • Learn ways of spotting misinformation in the media
  • Learn ways to communicate with their parents about misinformation

Frustrations:

  • “There is so much information and content. It’s overwhelming.”
  • “Sometimes I doom scroll and read to many articles. I don’t even remember what I read.”
  • “Sometimes I can sense information is inaccurate but sometimes I can’t.”
  • “My parents more susceptible to misinformation.”

Grey is a 29-year-old line cook who lives with their parents. They help to care for their disabled mother. They work late shifts and when they get home from work most of their friends and family are already asleep. They often go on social media to connect with people. Grey cares about current events and social issues, and often reads articles but is concerned about fake news and misinformation. They believe their parents often are manipulated by misinformation but they struggle to discuss issues productively and just end up fighting.

Persona 2

“I like using social media but sometimes it makes me depressed.” 

Leti

Age: 16
Education: High Schooler
Hometown: Chicago, IL
Family: Lives with Parents
Occupation: Student

Problem Statement:

Leti is a high schooler who is active on social media who needs to access the content that is beneficial to her and avoid what is harmful or makes her feel bad because she doesn’t want to waste time and get depressed when she is online.

Goals:

  • Use her phone for positive things in her life
  • Avoid content on the internet that makes her feel depressed or anxious
  • Manage the amount of time she spends on her phone
  • Be safe and not be bothered by scammers or predators

Frustrations:

  • “Adults act like the internet is all bad but they are on it all the time.”
  • “Sometimes I feel bad after spending a lot of time on my phone and I don’t even know why.”
  • “I know there are scams and creeps on the internet but I’m not sure that affects me.”

Leti is a 16-year-old high school student who spends a lot of time on social media. She loves music and crafts, so she likes apps that help her learn new things or listen to music. She gets frustrated when adults constantly complain about kids and their phones because they don’t notice the positive aspects. She knows there are lots of positive things about the internet but she also notices that she feels depressed or anxious after consuming too much content on some websites. She struggles to manage her time and choose content that is beneficial.

Research

I did extensive research to find relevant media literacy content that would be accessible for self-learning by adults and older teens. While there are apps and resources for users to monitor app use, there is a huge opportunity to provide media literacy curricula for adults.

Ideation

I created some quick thumbnails during ideation to solve user pain points and to develop solutions for the questions, How might we make adults aware of the topic of media literacy? and How might we make adults want to become media literate?

Starting the Design

Digital Wireframes

After the ideation phase I created initial wireframes for the app that lets users access social media through the app so they can better monitor use. They can also track their moods before and after using different apps.

Low-fidelity prototype

To prepare for usability testing, I created a low-fidelity prototype for the user flow of signing up for the app, connected social media apps, tracking mood and taking a lesson.

View the Prototype

Usability study findings

1

Data

Users wanted more data about their social media app usage to be available.

2

Learning

Users wanted to see an outline of the media literacy course rather than just see random articles.

3

Time Limits

Users weren’t sure how the time limits they set in the beginning were affected by the time limits set at the social gateway.

Style

Logos

Fonts

Colors

Buttons/Icons

Refining the Design

Mockups

Based on insights from the usability study I created a dashboard with a variety of data about app usage.

Additional design changes included adding an outline of the media literacy course so users could see what lessons are next and how far along they are.

High-fidelity prototype

The high-fidelity prototype adds additional functionality to the user flow by expanding the lessons and social gateway sections.

Accessibility considerations

1

Onboarding

Simplified onboarding screens guide users step by step through the sign-up process.

2

Content

Media literacy articles contain short, easily understood content so users are not overwhelmed with information.

Responsive Design

Sitemap

The responsive website serves a slightly different use case than the app. I created the sitemap to guide the organizational structure to indicate the different purpose offered by each resource.

Responsive designs

Going forward

Takeaways

Impact

Users felt the app would be very useful in bringing awareness to their browsing habits.

What I learned

I learned that media literacy is a complex and multi-faceted issue and this app only addresses the tip of the iceberg. It was very interesting to research the topic and I look forward to diving deeper in future projects.

Next steps

1

Research

I would love to conduct more research into media literacy and be able to create or contribute to a more thorough curriculum for adults.

2

Expand

I would like to expand these resources to include the topics of digital citizenship and create a course that users could complete for certification.

3

Thoughts

As social media and tech companies have come under scrutiny for their content and privacy practices, they could ameliorate these issues to some extent by contributing to resources like this.