Final: Interactive Brazil

Why?

Through this project I wanted to explore how one can understand a different culture through its music. Music is an integral part of any culture, as it’s the collective way people express issues their own country faces. Brazil has become a very important part of my life in the past two years, for I have become close with many people from the country. Music is an incredible outlet for Brazilians- many of the most famous musicians from the country also have served as activists. Brazil is also a very large and diverse country. Within its 27 states and 5 regions, music has a distinct presence in each area. Yet the most interesting aspect is that music is also a way the country stays unified and optimistic.

Concept:

This is an app that explores music from the 5 regions of Brazil. It’s a way for someone to learn more about the country by learning about different musicians from one of the five regions. The user is able to interact with the music of the country and play with the sounds to create a unique experience.

Initial wireframes:

My original idea was to have one map that the user would be able to touch different parts of the country to play music from that specific region.

_aoac_final_wireframes

However, that proved to be very difficult for me and I spent many many hours and days in Illustrator making maps of Brazil. I played a lot with clipping images to fit inside of the region. The current result is something I am happy with, but they are many improvements to be made in its next iteration.

favelas_new

_new_southeast_hover_new_centraleast_hover_new_south_cover _test_new_hover_north

_new_north_cover_all_whole1

Screen Shot 2016-05-03 at 12.03.51 AM Screen Shot 2016-05-03 at 12.04.01 AM Screen Shot 2016-05-03 at 12.04.15 AM

Screen Shot 2016-05-02 at 8.08.01 PM

What doesn’t work:

Saving to the local storage on page 3

Effect buttons have the same functionality as the navigation buttons

Lembra: Midterm

I made a few significant changes since the last time I presented my app. One major thing is that I changed the colors to make it more simple, but approachable. I added the ability for people to add more dictionaries of languages they are learning. This would be useful at a place like ITP, or even living in New York City in general, where you are constantly meeting and surrounded by people from other countries. You learn a word here and there and this app gives you a secure place to record those words to practice in the future.

Screen Shot 2016-03-08 at 12.02.18 PM Screen Shot 2016-03-08 at 12.02.04 PM

IMG_3996 IMG_3997

IMG_3990

IMG_3991

IMG_3992

IMG_3993

IMG_3994

App update: local storage, color scheme, functions

This past week I made some nice updates to my app, which I’m really satisfied with. The more I work and it comes together, the more ideas I have for design changes. I started playing with the colors using the steam roller on JQuery mobile, which was super easy once I understand how to implement it in my code. I’m still playing with color schemes, but happy since it’s starting to shape up the actual look of the app.

IMG_3807

IMG_3808

My goal this week was to store the words and translations from the first page to the second page, which is the dictionary. Shawn had told me in office hours last week that I would need to use localStorage and to follow the examples on the class site. This was much more challenging than I had anticipating. I ended up writing two functions, one to save the words and translations to the local storage, and then another to show it in the dictionary. This took me about 3 hours. Ah, coding!

Screen Shot 2016-02-26 at 9.50.10 AM

IMG_3809

IMG_3810

IMG_3811

Once I was able to figure out local storage, I went to sleep for as long as possible. My next step was to make the dictionary page a little more visually appealing. Thankfully, JQuery Mobile is like magic to add ordered lists and a filter.

IMG_3849

IMG_3850

Week 3: bringing app to life + jQuery mobile

This week was fairly challenging for me and it’s clear now more than ever that I have a lot of studying to do with HTML, CSS, Javascript, and jQuery. After being able to sculpt out some of the app, I decided to re-design the UI wireframes. The app is much simpler than before and I think the navigation is much clearer.

FullSizeRender 17

FullSizeRender 22

FullSizeRender 19

FullSizeRender 18

FullSizeRender 21

FullSizeRender 20

FullSizeRender 23

FullSizeRender 16

Below are the screenshots of my current progress. It is 4 pages with a navigation bar on each page to tell you where you are. What I’m trying to do next is save the words entered on the first page to an array on the second page, which is the dictionary.  Although I have an idea about how to do this, I’m still having issues getting it done.

Screen Shot 2016-02-15 at 10.52.19 PM  Screen Shot 2016-02-15 at 10.52.31 PM

Screen Shot 2016-02-15 at 10.52.40 PM

Screen Shot 2016-02-15 at 10.53.22 PM Screen Shot 2016-02-15 at 10.53.30 PM

Week 2: app concept, design, wireframes

My main objective for this semester is to build an app that is super simple and allows me to focus more on the coding than a complicated concept. In order to do this I thought about what I would really want. Lately, I’m trying to spend more of my “mobile time” on apps that help organize my life. I have been trying to spend more time on apps like Wunderlist, making lists and using my phone in a more effective and meaningful way. I wanted to make an app that would be simple to make, but useful and that I could build on throughout and after the semester.

App concept:

This app is to help someone learning a new language organize the new vocabulary they are learning. It is not to define words. Its sole purpose to give someone who is on the go have an easy, accessible way of recording the new words they have encountered. It’s a very common practice for a language learner to keep a notebook with new words/phrases, but it’s difficult to always remember to bring your language notebook. Especially if you are out with your friends or family.

Audience:

Someone learning a new language who doesn’t have time to carry or remember to carry a notebook with everything they learn throughout a given day. It’s someone who’s serious about language learning, but needs a consistent place to keep track of all of the new words they’ve heard, or encounter.

Use cases:

Graduate student is studying full-time, but still wants to learn a new language on the side for a distinct purpose, i.e traveling, or for the practice of learning.

Teenager is interested in a different culture and wants to learn a new language to understand the culture better. Paper is so last year. But their phone is always there.

Professional adult works full-time, in addition to having a family or a very serious social life. They don’t have the time or space to carry a notebook to record the words they want to learn and use in their target language.

User scenarios:

Luis is originally from Colombia and is  a full-time graduate student at NYU. Although he speaks English proficiently, he has been learning a lot of English slang words and phrases. His American friends are constantly saying words he doesn’t commonly use, but wants to in order to sound more natural. He doesn’t have time or money to take English lessons, nor does he have the space in his backpack to carry another notebook specifically for English.

Angela love Japanese Anime and would love to travel to Japan after she graduates from high school. She has a full-time school schedule, plus extra-curricular activities. She’s constantly writing new Japanese words in her various notebooks, and even on random napkins. She would love a single place to put all of the Japanese words she hears during her Anime shows that doesn’t make her think any more than required.

Jeff is a marketing director at a start-up. He spends more time at work than at home, but has an upcoming trip to Brazil to celebrate Carnaval. He wants to be able to relax and socialize with the locals without having to look everything up in a dictionary. He takes a Portuguese class once a week, but never remembers to bring his Portuguese notebook to work, and therefore doesn’t spend enough time studying throughout the week.

FullSizeRender 13

FullSizeRender 8

FullSizeRender 9

FullSizeRender 12

FullSizeRender 7

FullSizeRender 14

FullSizeRender 10

FullSizeRender 11

Apps I like:

IMG_3745 IMG_3746

I am huge fan of the Foursquare app (can’t deny it). It’s so easy to navigate and I love how it creepily always knows where I am.

IMG_3743 IMG_3747\

Wunderlist, which I spoke about earlier, is a great app. So simple, clear, and useful. The design isn’t overwhelming. Even the choice of green is calming.

My phone, the love story

It’s difficult to answer the question of what my relationship with my phone is, as I am slightly embarrassed about my clinging dependency. Last Thursday I unexpectedly had to fly out to Chicago for a family emergency. My flight was at 7:12am, meaning I should arrive at the airport, at 6:15-6:30. I woke up a bit later than I had wanted and frantically tried to get my things together. I don’t usually use Uber to get to the airport, but I felt desperate. So, I actually downloaded the Uber app and requested a ride. With my battery at 5%, it was basically all it could handle before it shut off. And of course, my phone charger was nowhere to be seen, as we were experiencing a drought of phone charger between the 4 people staying at my apartment over the break. I thought about it hard for about 45 seconds, whether or not to reschedule my flight. I can’t fly to Chicago without a phone, I thought. How will I let my family know I’m leaving? How will anyone know that I landed? How will I entertain myself? How will I know that the Uber is not ripping me off and taking the long way to JFK?

I spent $75 to reschedule my flight. This secret stays here, on my ITP blog.

Why is this anecdote relevant to the relationship with my phone? I think it shows that I put everything else second when it comes to my phone, apparently even finances as a broke graduate student.

The sad part is that it’s not my phone that I’m attached to, well it is in the way that you like to have things that are yours. But if someone were to give me a brand new phone tomorrow, without any of my contacts, calendar events, apps, I wouldn’t even mind. In fact, I frequently add and delete the same apps, i.e. the Uber app–I already had an Uber account before the flying fiasco; I just often delete it, and re-install it when I desperately need it. The truth is, I have too many pictures. They’re like the cancer of my emails. I act like if I delete them I will actually feel a void in my life, despite rarely looking back at them.

I am not even one to have interesting and useful apps on my phone. I would bet that 90% of my phone usage is flipping back and forth from Facebook to the incredible amount of emails I have accumulated. This is very contradictory to some of the goals I have in educational technology, in exploring ways to integrate mobile devices during in-class instruction. If we are going to use them, can we find ways to help improve our lives. There are people that do use their phones in useful ways, but how can we make that true for the majority of people?

In this course, I’d like to explore how we can translate the idea of our phones being always on and connected to how we can we become always on and connected through our phones. Instead of using our phone as a blanket to hide behind hide direct, physical interaction, how can we take the advice of a phone and be present and aware in ourselves?