Mebliss: App Development UX/UI Case Study

Mebliss is a news application that incorporates social media traits to attract the young generation in order to amplify awareness of their surroundings.

Overview

In the United States, 21 out of 1,000 young people are victims of violent crimes. This may not look like much, but it actually transfers to 6 million people a year in the US alone. Now these statistics are specifically from 2019, this is because in 2020 due to the COVID pandemic most people were at home and the rate dropped 22%. However, when looking at previous years the numbers stayed about the same, so it is safe to say that in average 6 million people are young victims of violent crimes within a year.

A major cause of this is the lack of awareness in the young minds. We have all seen that teenager walking late at night after night-shift or passing through an unsafe area, who scrolls through social media rather than pay attention to his/her surroundings. This generation chooses to ignore or are not aware that crime really does exists. How do I change this? By combining what this youth hates and loves the most, boring news and the ability to talk gibberish online.

Project Time Line

Problem Statement

High school and college students need a way to asses their surroundings and be able to perceive if they are in a dangerous situation in order to feel comfortable to relax and know they are safe at any present or future location.

User Interviews + Affinity Diagram

After my desktop research I was lucky to find 3 interviews from which I collected more data. Then, I arranged all the information into an affinity diagram using an application called "Miro" to have a clearer view of the problem and formulate the solution.

Persona

Once the affinity diagram was completed I was able to put together a persona to help me obtain a deeper understanding of who I was designing for and what were their needs.

Present & Future Journey Maps

My persona helped me create a present and a future journey map to understand Kyle's activities and identify how could my app help make a difference in his daily life. I began with a scenario where Kyle needed to find a new apartment to live in, however, he was not entirely sure if the places he had seen within his budget were actually safe zones.

The future journey map shows how useful it would be to be able to click a button and know every dangerous event reported in those particular areas for the past couple of years. This way he is able to know what happened in those areas and the level of danger he would be facing on a daily basis.

Once all the information was in place, it was time to visualize the app. User flows, a style tile and wireframes are my next step in this process.

User Flows

Sitemap

Wireframes

Style Tile

Prototype

Welcome! to Mebliss, let's take a look inside the news app.

Home Page

In the home page, I would like to call your attention to the icons on the top left corner of the articles. Within my research I found many people do not watch or read to news due to the lack of trust. Many news media outlets shape the truth to what they see fit. This button is where you can choose the source of the article if you have a specific media outlet you trust, if you don't you can still compare the article changes from all different sources.

For example, if this article is published by CNN but you trust FOX instead, you can click the icon, choose "Fox News" and it will show you their take on this matter.

This is a useful feature for people who have doubts about how truthful an article is. If there is no specific media you trust, seeing how the article differs from different sources can also give you a clue to what is the actual truth.

First Flow

For my first user flow I decided to focus on what the user would need the most "What is happening near you?"

When clicking on nearby cases you can see a map that shows you everything that has happened around you in comparison to your own location. As well as the articles of each case as you can see below.

You can access the articles either by clicking on the locations within the map or clicking on the listed articles below the map.

You can also save, comment, or share on any article to gather more information or give your own take on the matter.

Second Flow

For my second flow, I focused on the parts that would interest the young users the most "What's in it for me?" During my research I found that people enjoy having followers on social media because it makes them feel heard. The more people follow you, the more people are reading your feed, the more your voice is being heard. I decided to add this trait into the app inspired by instagram.

Another app I drew inspiration from was Duolingo, which uses a competitive board challenging the users to keep using the app. I also incorporated this trait into my design, backed by more research stating that people tend to do more when rewarded.

This score board is based on a point system, the more articles you read, comment and share the more points you obtain. Whoever gains first place at the end of the week will be able to post an article of their choice and write their own thoughts about it for the entire world to see. Because we all know now a days teenagers love going viral.

Take a look at this feature below.

If interested, you can access my prototype below by opening it to full screen on the top right corner of the prototype's window.

All design is connected one way or another, however, there are different skills corresponing to each category. I have used my skills in different places as they grow along the way.

Conclusion

Mebliss began as an idea to create awareness within the young community. It has now become a tool where the young minds can be fully aware and involved in what is happening around them and throughout the world.

Next Steps

This application still has a long way to go, some additional steps I would like to take are as follows:

• Build up a forum where the victim's stories are shared if they choose to do so, stories that don't make it into national news or a local paper.
• Create a content page explaining which social media outlets are considered the most trustworthy an why?
• Have a profile set up for those journalists who chase the truth about important cases.