Developing for mobile: I thought I was screwed
Jul 18 2012
“Mobile first” … “Mobile first” … “Mobile first” …
This is the phrase that Executive Director John Clark pounded into our heads since day one of WhichWayNC.com, a news site about North Carolina politics that is designed for mobile users. In fact, I occasionally hear John’s voice in my sleep, enthusiastically chanting “mobile first.”
Weird dreams aside, the phrase is vital to our project, especially in terms of the website’s design and content. Last week I, along with designer Colleen McEnaney, developed an interactive tool that allows users to enter their loan amount, interest rate and the term of the loan. The tool tells the user exactly how much money he or she will owe, translating that number into products familiar to college students. For example, if I had a loan for $10,000 at an interest rate of 5 percent and had 10 years to pay it back, I would end up paying $12,728 – or 6,364 PBRs. Crazy, right?
The idea behind this interactive is to highlight a serious issue – the true cost of college and the potential burden on the student – through a comical, personal lens. I will be the first to admit that I have consumed at least one meal that consisted of PBR and Ramen, and I am not ashamed. College students, current, future or past, can use this tool and see just how screwed they are in terms of PBR, Cook Out trays, toilet paper and, possibly the most essential, Ramen noodles.
Now, how did we take a mobile-first approach with this project, you might ask? Well, we really focused on how a mobile user would provide the necessary input to gather the desired output. In the newsroom, the consensus seemed to be that we all hate typing on our mobile devices (mostly iPhones). So, we decided to go with drop-down menus that provide the user with a specific number of options. This was optimal for two reasons: 1) it is easy and intuitive for the users and 2) it prevents the users from having to worry about the specifics of the input, like needing a number (not a word) or the specifics of their personal loans.
Also in a mobile-first mindset, the calculator provides the users with a menu that allows them to pick between the metrics, whether they want the output in terms of PBRs or Cook Out trays. Originally, we envisioned this feature as a set of tabs. However, personal experience told us that users do not like tabs, especially in a mobile environment. Thus, we designed the menu that is always visible and quickly allows the user to switch between metrics.