Abolishing Barriers: Interactivity to Tear Down Walls
Challenge Statement
Whether we like it or not, the world we live in is filled with societal barriers. In St. Louis especially, there are wide ranges of segregated communities that have formed over long periods of time. This project aims to inform people about their own city. Through an interactive website, people will be able to click through a map of both city and county municipalities. In order to make conception of this project successful, it will take a copious amount of sketching and ideation. Throughout these posts, you will see drafts of the website formulated in Photoshop and/or Illustrator. The target audience for this particular website will be adults who live in St. Louis around the ages of 25–50.
The Importance of Research
Research is important for a design project because for most projects that you work on for clients, you don’t know everything about the topic you’re designing for. The more relevant information you find about your topic, the better design choices you can make for your users.
The Interview
They interviewed students from an organization called Abolish Barriers through Leadership and Empowerment. These students were experts in their particular field because of their experience with social barriers. Some key points that they covered included why stereotypes occur, what it means to be involved with certain religions, and how barriers are formed in society.
Data Research
The data set is called Bias in U.S. Domestic Terror Reporting. The sources for the data sets include Justice Quarterly, The Guardian, and Reveal News. The data set shows that Muslims are reported in the news more for terrorist crimes than right wing individuals, but there are actually almost twice as many right wing terrorist crimes than Muslim terrorist crimes. This shows that the media creates barriers by making our news sources biased, which is also one cause of ignorance.
Community Research
The name of the article is Report: Racial Divide Leads To Health Disparity In St. Louis. The article was written by Camille Phillips from St. Louis Public Radio. The article explains racial and wealth gaps in Delmar and explains how Segregated of a city St. Louis is. This plays into the project I plan on executing because I would like to see what other areas of St. Louis are similar to this.
Ideation
Task 1: Generate Ideas
Idea #1
Overall Concept: Create an app that educates people on Muslim persecution in the United States.
Users: Muslim-Americans, other religious groups
Sketches:
Examples: https://apps.apple.com/us/app/muslim-education-islam-games/id1434806469
(Examples of games and apps for Muslims)
(Proof that Muslims are not as big of a terrorist threat as the Unites States media portrays them as)
Idea #2
Overall Concept: Create an interactive timeline that highlights generational morals and values so people can see the differences in generations.
Users: Teenagers, middle aged individuals
Sketches:
Examples: https://ppnbstripes.wordpress.com/2013/07/21/generation-gaps-in-the-workplace/
http://www.cnn.com/interactive/2011/05/living/infographic.boomer/index.html
Idea #3
Overall Concept: Create an interactive map of neighborhoods in St. Louis showing demographics displayed on a website.
Users: Upper class, lower class, government officials
Sketches:
Examples:
(My inspiration for my project)
(Example of interactive maps showing demographics of your choosing across the world)
(“Heat map” of the population of the United States. This has the potential to be interactive)
(Example of an interactive map of Forest Park)
User Journey
Prototyping
In my prototyping phase, I implemented just about everything I intended to in Xd and got some very good feedback from other students during my User Journey. I included a loading/informational page, a clickable map, a search bar, and a scrollable list of things to do. Below, you’ll see the results of my prototype.
The loading page is fairly simple. I decided to design the start button to reflect those in cars such as Jeeps and BMW’s because I feel as though cars and maps go hand in hand. Maps are meant to send people on the road.
After you click the start button, you end up at the information feed (left). You have the ability to click through the icons and see what certain community events are coming up, music venues and stores, good eats (middle), and places to shop. You also have the ability to click through highlighted neighborhoods to see what events, music, food, and shopping that particular area has to offer (right). I would like to make the neighborhood you click on protrude slightly when you wave your mouse over it to give it a three dimensional feel. When all said and done, I would like to have a majority of this map highlighted to make it fully interactive.
If you look at the top left of this picture, you will see that I included a search bar that extends when you click on it. Though it is not fully functional in this prototype, you will be able to search for neighborhoods and activities in the final product.
All in all, I had fun ideating and prototyping. I have never used Xd before, but the interface is fairly simple and easy to catch on to so there isn’t much of a learning curve. I would like to implement a couple more things before turning in my final product in order to make this the best user experience possible.
Design Write-Up
For this initial page, I wanted to make it simple and easy to understand for the user. I thought that a simple explanation of the website and a simple click to start button would suffice for this initial interaction. “Push to start” is a button commonly used in modern cars, and with this being a map help get people around, I thought it would be appropriate.
Originally, I had the colors from each of the neighborhoods in the background. For instance, since Forest Park is red, then the background of the informational section on the right would be red as well. This was a problem when trying to implement a consistent visual language with these about sections so I decided to just go with the yellow, navy, and white.
I felt that icons would best let the viewer know that there are clickable options for each area of interest (calendar representing upcoming events, music, food, and shopping). I also established some visual hierarchy for the information as well.
For the entirety of the color scheme, I wanted it to mimic muted colors of the St. Louis flag, however, I thought that it would be a simple decision to pick out three colors (yellow, dark/navy blue, and white) to communicate to the viewers.
User Testing
Introduction:
The user tests conducted were done with one qualified World Wide Technology user technology designer, a St. Louis bar and nightlife enthusiast, and an individual who has only lived here for three months. All of these individuals provided relevant insight into how to better my design and what to include, change, and take away concerning the interactivity of the site itself.
1. Adam Doll-Hennis
Adam is a very outgoing and charismatic individual. He has lived in many places across the country but is still very familiar with the St. Louis area. Some activities he partakes in is going out to bars such as Molly’s in Soulard and Up Down in the Central West End. This is why he is a great candidate for this websites testing. He is always looking for a good time, especially on the weekends.
Positive Outcomes
Adam had some positive interactions with the website. Overall, he stated that it was fairly easy to maneuver and was easy to understand. He had an easy time locating the back buttons and the informational sections. When it came to the overall concept, he stated that he would use it during the holidays to see what events were taking place, such as haunted houses, new bars, and attractions. He stated that, “The icons were pretty self explanatory and were easy to understand.”
Negative Outcomes
One suggestion that he made was to “include an art icon since you have music”. St. Louis has a prominent art environment especially downtown so this may be a relevant suggestion. Also, when asked how to improve the website overall, he suggested that I divide the activities and locations up into age groups (family/child friendly events, events for young adults, and events for older adults).
2. Lynda Tolley
Lynda is a young and fairly new user experience designer at World Wide Technology. She is not very familiar with the city, though she is increasing her knowledge as she works downtown.
Positive Outcomes
Lynda had an easy time maneuvering the map. She also located the icons and distinguished their meanings. “The functionality is there and it is easy to use,” she stated. “Interacting and clicking through the site was easy and was easy for a user to pick up.”
As for the target market she stated that it would be most useful for people in the county area such as Alton and Ballwin and for individuals who are from out of town looking for things to do in St. Louis city.
Negative Outcomes
The biggest problem Lynda had when reviewing the site was the legibility of the text. “The white text on the yellow background is very hard to read,” she stated. She also had some input on the buttons and said that they were too big, especially the back button. The ‘learn more’ button also competed with the content according to her. She suggested making this particular button 44x44 pixels and to locate it under the content rather than to the side. I explained to her that eventually I would have the entire map filled in
3. Keagan Gauthier
Like Adam, Keagan is very much an enthusiast of the weekend life in St. Louis. He works at Cooper’s Hawk so he has an idea of what the culture is like in the county, however, he is not as familiar with the city as Adam because he’s only lived here for a couple of months. He knows some spots in the St. Louis area that are popular and would like to expand his knowledge about the city in general.
Positive Outcomes
Keagan operated the icons with ease and found the map to be the area that he felt the most comfortable. He also found the search bar and the headings to be self explanatory. In contrary to the others, Keagan navigated the circular links to the neighborhoods on the far left side of the page on his own whereas the other candidates did not.
Negative Outcomes
Keagan claimed that the experience was “too much like MapQuest” and found some of the content difficult to understand, similar to Lynda. Upon Keagans inquiry, I did discover that my design was very similar to MapQuest including the placement of the search bar and the icons.
Conclusion
Overall, each of my candidates provided useful feedback, whether it was positive or negative. The experience was very easy for each of them, but the common theme that they struggled with was the design of the content.
Finalizing Design
Introduction
My final design was solely based on the interview feedback and things that I needed to include to give the website more context. The overall feedback led to changes in design, specifically changes in the informational parts of the experience, specifically when you click on the neighborhoods.
Changes
The first big change I made was completing the map. Among many other small changes, I decided to make the four neighborhoods that were accessible color coordinated in order to make them stand out when users go through this initial prototype. This will help distinguish which neighborhoods to click on. The completed map will also give users an idea of what the finished map will look like.
There are several changes made on this phase of the user experience, one being the size of the back button in the top left corner. I took Lynda’s advice and made the height of the button 44 pixels to not distract the viewer.
Since users struggled the most understanding this page specifically, I redesigned the entire thing. In order for viewers to distinguish the title from the content, I decided to invert the colors of the title and the background. I also changed the content background to navy because this gave more of an avenue for contrast given the color palette I chose. White, navy blue, and taupe are the colors included on this page specifically.
As for the type, I chose to establish and emphasize visual hierarchy by making the name of the neighborhood the largest, the headings the second largest, the subheadings the second smallest, and finally the content the smallest. To make the title of the neighborhood stand out, I made the text bold while the headings are semibold. I did the same with the subheadings and the paragraphs of text to further establish the hierarchy of the page.
Additionally, I made the ‘Learn More’ button 44 pixels in height so that it was not competing visually with the rest of the content and placed it underneath each section to ‘conclude’ each section of information.
Conclusion
This is obviously not a finished website and still needs a lot more work, however, I took what my candidates deemed were the most troublesome parts of the website throughout and changed them to make it more understandable for all. I think that to really make this a finished product, I will need to repeat the cycle of interviewing and improving several times. Overall, I made the changes I needed to make thus far.
