Logo

TrafficDito Blog

  • Random
  • Archive
  • RSS
  • Ask us anything!

Paper’s Not Dead: Top 3 Product Books

by Pam de Manila, Product Team

As part of the product team, we naturally have to keep up with all the latest innovations and trends. Aside from keeping up with tech-related news online (mobile, Internet, CoD tactics), some of the best information and learnings have come from reading some good old paper books. We’ve read a lot of them and I must say, they’ve really helped us improve our knowledge of things and do our job better. It helps that having book assignments made me feel like I was back in school except this time around, I’m being paid, which is waaay better IMO.

Contrary to to popular belief, paper isn’t dead. At least not yet. Incidentally, the books on my list are all in paperback, although some of our books are in digital format (but I digress). Without further ado, and in no particular order, here are my top 3 product books:

The Elements of User Experience by Jesse James Garrett

This is one of the first books my team read during our first few weeks on the job. I highly recommend this book if you want to get into product management because it explains user experience in simple terms. UX, as it’s more commonly called, is incredibly important when creating products, and in my opinion, Jesse James Garrett explained each element really well.

If you’re wondering what UX is, it describes the experience a product creates for the people who use it in the real world. It involves a lot of things, from the visual aspect of a product, down to the user needs and product objectives. These words may sound intimidating now, but read the book and you’ll see how the author was able to shed light into each term clearly and thoroughly, so much so that even n00bs could understand them.

Simple and Usable by Giles Colborne

Aside from being well-written, I liked this book because it contains a lot of really cool illustrations and pictures. I enjoyed reading Simple and Usable because it was visually stimulating. Its layout was just beautiful and its content, compelling.

It’s pretty straightforward - it’s about how products (web and mobile) should be designed. Giles Colborne, the author of the book, has a conversational writing style, which makes the book easy to understand. What I like about it is that it provides a lot of examples on how to simplify product design. This book actually served as a guide when we made crucial design decisions for the TrafficDito app. In designing products, it’s important to remember the four strategies for simplicity, specifically, HORD (hide, organize, remove, and displace). This book is surely a recommended read for web designers and product people out there.

100 Things Every Designer Needs to Know About People by Susan M. Weinschenk

I’m sure you’re familiar with the saying, “don’t judge a book by its cover”. Let’s try to ignore that for a few seconds here and look at this book’s cover. Now doesn’t that say “FUN”? Yes? No? Well it does for me.

100 Things is a treasure trove of trivia. The facts, which are backed by research and scientifically proven, can be all applied to web design (or can be used as conversation starters to make you sound smart). According to the author (and I couldn’t agree more), “designing without understanding what makes people act the way they do, is like exploring a new city without a map: results will be haphazard, confusing, and inefficient.” I use this book as a reference for human behavior. Even if you’re not into products, you might want to grab a copy of this book just to pick up all the cool things you can learn. I guarantee that you won’t be disappointed.

I hope that I’ve convinced you to grab a copy of at least one of these books. They’re all pretty easy to read and understand. They’ve also got lots of pictures in them, just in case you’re a visual learner like me. If you want to get into product management, I (pinky) promise that reading these will be worth your while.


P.S.

Awesome news! TrafficDito just got featured in one of Asia’s top tech blogs! Formerly known as Penn Olson, TechInAsia.com has the latest in tech news and upcoming startups in the Asian region. If you’ve got the time, check it out!

Also, The AralDito Project is closing in on it’s 1000th report! As of writing, the counters are showing 981 reports for the project, for a total donation count of P4,905. Hopefully by the time you’re reading this, we’d have already passed the 1000 mark! Keep on reporting through the app, and of course through Twitter using the #TrafficDito hashtag to help out!

    • #ProductDesign
    • #TrafficDitoCommunity
  • 1 year ago
  • Comments
  • Permalink
  • Share
    Tweet

TrafficDito Version 1.3.0: NB? EB? OMGWTFBBQ!

With March just right around the corner marking the beginning of the summer months, expect more of the blazing afternoon heat we’ve been experiencing these past few days. Not really being huge fans of being outdoors, this just meant more time for us to stay indoors and work on TrafficDito! LOL. The latest version of the iPhone app is live and ready for download on the App Store, still for the low low cost of… absolutely nothing!

Roads Ain’t All North or South

To say that Metro Manila’s roads are confusing is an understatement. While most of our main roads head either northbound or southbound, some of you guys have pointed out that there are a couple of ‘em where it wouldn’t make sense to say you’re headed in either direction.

Worry not then, fellow traffic-haters! We’ve tweaked the TrafficDito app to reflect Northbound/Southbound along roads like EDSA, C5, Commonwealth, etc. and Eastbound/Westbound along Ortigas, España, and Shaw Blvd., among others. Even along those winding and zig-zaggedy roads, the new compass should be able to detect your bearing without any problems!

Compass Confusion?

“Nasa C5 Libis na ako papuntang Ortigas pero BV yung traffic!”

We also realize that all these NB/SB/EB/WB acronyms can become a pain sometimes. For all the directionally-challenged out there, we’ve also changed the way TrafficDito spells out where you’re headed. The TD app now indicates the next major intersection or area you’re headed towards. If you report on the app, instead of “C5 Libis SB” for instance, it’ll now show “C5 Libis SB to Ortigas” on both the app and on TrafficDito.com’s stream. Awesome. Now I don’t have to use the sun to show me whether or not I’m headed east or west.

So make like a traffic ninja and head on over to the App Store and download the latest update or the TrafficDito app if (for shame!) you haven’t yet!

Also, don’t forget! After the recent launch of The AralDito Project, every single one of the reports you make on the TrafficDito app count for a P5 donation from us to the Tulong Dunong Foundation Inc.’s scholarship grant. Help send a teen to school just by reporting traffic. :)

-EJ, Product Marketing Padawan

    • #TrafficDitoUpdates
    • #SoftwareDevelopment
    • #ProductDesign
  • 1 year ago
  • Comments
  • Permalink
  • Share
    Tweet

Deadberry: A Eulogy for Blackberry (2012 Prediction)

The Mayans have supposedly predicted our demise this 2012. Now much like everyone else, I don’t think I believe in any of that. However, I would like to make my own prediction. If there’s one thing I’m quite sure of, it’s that the one who will be experiencing an end-of-their days scenario this year is going to be RIM (Research In Motion), makers of the BlackBerry.

Here’s why:

In 2010, BlackBerry had a solid market share of 15%.

Last year, it suffered a 4 percent decrease in its global market share, likely due to Android’s rapid growth.

It seems that Lady Luck hasn’t been too kind to BlackBerry lately. Last year, RIM shipped 11.8 million BlackBerries in the three months ending September 30. That compares with 12.4 million BlackBerry shipments in the same quarter of 2010, according to data from the International Data Corporation (IDC). RIM’s shipment numbers dropped by 600,000 units. It may not sound like much considering these figures are for global shipments, but let’s assume an average cost of 15,000 pesos per unit. That’s 9 billion pesos in lost revenue.

As if things weren’t bad enough, RIM was once again put under the spotlight last year when BlackBerry’s email service went down for almost 3 days globally – causing massive backlash from its customers. Imagine having to read 3 days’ worth of email.

From that point on, things seemed to only get worse. A truck carrying a shipment of 5,000 BlackBerry PlayBooks was stolen from a truck stop in Indiana, USA. That’s around 74.8 million pesos worth of junk goodies. I bet even the crooks behind the crime were a bit disappointed that the truck wasn’t loaded with Apple products instead.

BlackBerry enjoyed substantial market share in Asia last year. But at the rate it’s going now, it won’t last for much longer. BlackBerry had a 9.93% OS market share in 2010 before nosediving down to 1.53% last year. People are now starting to realize that there are other BBM-like services/apps and that owning an alternative like an Android smartphone can even cost less. And with all the publicity (including articles like “Stats Show iPhone Owners Get More Sex”) it’s getting, people are  continually being drawn to the iPhone. Even Nokia doesn’t seem to care much for Symbian anymore, so I’m not even going to bother bringing it into the conversation.

Smartphone competition is getting tougher as more devices are introduced into the market, Android-powered ones in particular. Smartphone manufacturers are now eager to capture a new market, and a lot of them have their sights set on Asia. With this, BlackBerry is likely to continue to suffer from a dwindling market share as its competition step in.

One of the few reasons why BlackBerry has a substantial market share in Asia is because of their BBM (BlackBerry Messenger) service. It’s instant, affordable, and easy to use. Personally, I think it’s the ONLY reason people still bother with their berries. Unsurprisingly, even my Blackberry-owning friends say the only reason they bought ‘em was “just for the BBM.”

It seems that even the exclusivity of BBM is soon to be a thing of the past though. Rumor has it that RIM is considering the move to license its operating system, including BBM. Would you still buy a BlackBerry if the service was available on other sleeker and better-performing smartphones? Yeah, I didn’t think so either.

Even if BlackBerry stops producing hardware and pivots to become solely a software and services company, they’re in for a rough ride financially. Selling a messaging service app is going to be tough. A lot of other messaging apps very similar to BBM are already available in Apple’s App store and in the Android market. And yes, most of them are free. Nowadays, even the fall of SMS seems to be imminent. Take the following as an example: Samsung released its own messaging app called ChatOn, which will be pre-installed on all of their feature phones, Bada OS powered phones, and other smartphones. Similar to Apple’s iMessage, all it needs is a mobile internet connection.

It’s possible that a hardware upgrade might change RIM’s luck in the smartphone industry. But during last month’s earnings call, RIM announced that there would be no BlackBerry 10 phones until late 2012. Their current phone lineup is nowhere near being at par with the competing iPhone 4 and Samsung Galaxy Nexus.

The hardware specs aren’t even the worst part. It’s the crappy software and lack of apps! When it comes to software and apps, BlackBerry doesn’t even come close to Apple or Android. Already being left in the dust by its competitors, BlackBerry might have to name its next phone the BlackBerry Miracle.

Knowing us Filipinos, we’re likely to follow the trends we’re seeing in the west, Blackberry’s decline included. From a publicity standpoint, the company has already found itself in a very tight spot. It’s getting a lot of bad press when it comes to its market share, consumer surveys, testimonials, and product reviews. They’re going to have to go through hell to convince their competitors’ users to convert, and even convincing their existing users to stay is going to be a tough sell. It’s all downhill for them.

Locally, Globe, Smart, and Sun are currently offering the berries at affordable prices. But last time I checked, Android phones have already begun to outnumber the BlackBerry phones being offered by the three major telcos. Pretty soon, other smartphones being offered at a similar price point is going to steal the price advantage that BBs currently have. It seems BlackBerry just can’t catch a break.

Actually, BlackBerry used to be relatively comfortable with their product pricing, especially on their premium models, because of their focus on the upper-class market and business-oriented individuals. When they started losing hold of this niche, BlackBerry introduced their entry level phone, the Curve 8520. However, even with the recent success they’ve experienced in the middle-class market, it doesn’t seem sustainable in the long run. After all, they can’t expect other smartphone manufacturers to just step back. Even here in the Philippines, there are already a lot of affordable Androids available. If you’re thinking about getting a BB just because of the price, I highly suggest you check Greenhills’ prices for some alternatives first before purchasing one.

In fact, let me help you guys out. If you’re thinking Android, when it comes to price, the Samsung Galaxy Y would be a good choice. Owning this is a steal, being priced at 5,990 pesos. This entry level model is one of the reasons why Samsung stores here have been getting a lot of foot traffic lately.

Now compare that to owning a BlackBerry Curve 8520 which hovers around the 8,000 peso price point! There are a lot of other phones out there that are not only cheaper, but are superior in performance and user-experience.

Although slightly pricier, Apple’s iPhones are worth considering too. Since Apple releases a new phone almost every year, older models start to get cheaper. The iPhone 3GS and the iPhone 4 are now at a price point that may appeal to middle-class individuals. Alongside the iPhone 4S, these two complete Apple’s broader-reaching iPhone product line.

To sum it all up, I predict BlackBerry will soon be known as DeadBerry or RottenBerry. Before you say anything, I have to say that I have nothing against BlackBerry. In fact, I admire them for offering an affordable messaging service that most Filipinos can afford. But it’s hard to deny the facts that all point towards BlackBerry’s fall. My prediction: 2012 will be the year of BlackBerry’s death.

May it rest in peace.

-Roegan, Product Team Hipster

    • #ProductDesign
  • 1 year ago
  • Comments
  • Permalink
  • Share
    Tweet

I Scream, You Scream, We All Scream for… the TD Stream!

I was hoping for some ice cream too. :(

In our earlier blog post, we talked about TrafficDito’s formative stages. At its earliest stage as a young budding beta app, barely able to stand on its own, it was pretty much a one trick pony. All it had was a traffic stream, allowing people to view the crowdsourced twitter reports from the TD website. It’s this stream though, that served as the foundation for the fantabulous final product it is today!

 

I’m not too sure what we were thinking at the time, but for some reason, we thought these “chicklet” indicators looked cool. A report with a red chicklet indicated heavy traffic, blue for moderate, green for light and gray for mixed traffic conditions. When the user tapped on a report, he would see the Report Details screen. Yeah, yeah.. she wasn’t much of a looker at the time, notice how the red search bar suddenly turns blue. Meh.

We made more tweaks. That ugly blue bar was too much of an eyesore to ignore so it had to get the axe ASAP. Having it in candy-apple-red meant transitions looked smoother when tapping on a report from the stream. Sure, this was all cosmetic, but hey, aside from working smoothly, the app needs to look good too!

We noticed that popular mobile apps like Twitter and Facebook had the pull-to-refresh feature.  Not that we wanted to be copycats, but hey, why mess with good design? To update the Stream and get new reports, just pull!   

The third version of the Stream screen had a number of design changes. We switched out the awkward looking chicklets for some cleaner looking circles. A static legend view for Stream was positioned under the search bar.  We also changed the way time stamps were displayed on the reports. Instead of displaying the actual time (5:18 pm), we changed it to relative time (5 mins ago).

If you look closely, you might notice that we tried to get a little fancy by adding color gradient to the reports’ backgrounds. Also, As a traffic app, it made a lot of sense to include a map in the Report Details view (Driving and maps a good combination? D’oh! Well that sure took a while!). Every report sent from the app would show a “Map” icon. This way, tapping on a report would show users exactly where the report was sent from.

We were sold on the whole gradient idea for the Stream. We fiddled around with more and decided to give it this rounded effect. Unfortunately, we had to dump it anyway. It was the only tab that featured a gradient and made all the other tabs feel sort of unloved. I guess we were getting too fancy. Sigh.

 

The fifth version of the Stream was updated with simplified traffic condition icons. We also removed the legend because the icons looked like buttons. During early usability testing, some users mistakenly thought that the legend could be tapped and used as filters. It also took up space that made the Stream screen look cluttered. So of course, we ditched the whole legend thing altogether. After all, how hard can it to be? Red = bad. Green = good.

With the decision to incorporate reporting directly from either Stream or Map view, we then relocated the Report Button on the upper right of the screen. This was the sixth makeover for the Stream view! For first-time users of the app, we added a welcome callout inviting people to report. Making it huge was, of course, all part of the plan! This callout only shows once and won’t ever appear again, unless the user re-installs the app.

The map was repositioned above the report so that the users could see the location first. Doing this puts more focus on the map since users can see the information of the report from the Stream anyway.

As you can see, while it may seem simple, a lot of effort was put in to making Stream view the way it is now. Now, I wonder who among you will be first to find out the hidden Stream view easter egg we’ve thrown in there!

-Jacy, The Product Team’s Official China Doll


    • #TrafficDitoUpdates
    • #ProductDesign
  • 1 year ago
  • 21
  • Comments
  • Permalink
  • Share
    Tweet

Little Big TD Details: They Animate While U Wait!

On the TrafficDito website, searching for traffic reports involves filtering through millions and millions of tweets floating around the world. So while our furry elves manually stalk your tweets, looking for EDSA-related tweets for example, we figured we’d try to distract you give you a little something nice to look at since the internet speed in Manila is just about as fast as C5 traffic on a rainy payday Friday. 


 
While waiting for the “official” design for the loading graphic we’d use, we found this adorable animated jeepney GIF and used it as a placeholder in the meantime. Honestly, it was really cute and I was pretty bummed to see it go when we put up the final loading graphic.
 
Check out the new loading graphic we used below:


 
The candy bar loading graphic matches the site better this time. Just like fashion, a good design must be coherent. The new loading graphic is the perfect accessory for TD’s red red ensemble.
 
How about you? Which do you like better - the jeepney or the candy bar loading graphic? 

-Pam de Manila, Product
    • #TrafficDitoUpdates
    • #ProductDesign
  • 1 year ago
  • Comments
  • Permalink
  • Share
    Tweet

Little Big TD Details: Pac-Man Chompin’ it up on TrafficDito

Sometimes, we have the tendency to overlook the little things. Small as they may be, these details contribute to the overall feel of the design. That’s why these blog posts are meant to put them in the spotlight, hence the title “Little Big TD Details.” In the TrafficDito website and app, we added these small details that we’re going to talk about in a series of mini blog entries. Kind of like the Twilight Saga, only more interesting.

If you look closely, the loading animation used when validating fields in our modal windows is actually Pac-man, complete with chomping action! We were feeling extra patriotic that day and decided to throw it in there in honor of Manny “Pac-man” Pacquiao himself. :)

-Pam de Manila, Product
    • #TrafficDitoUpdates
    • #ProductDesign
  • 1 year ago
  • 6
  • Comments
  • Permalink
  • Share
    Tweet

Fold Focus: Design for More Mileage Online

You must be wondering what the heck a “fold” is. No, I ain’t talking about yo mama folding laundry. 


The term “fold” originally referred to how newspapers are folded in half. Headlines are placed on the front page, above the newspaper’s fold. Since most newspapers are folded for shipping, anything printed at the bottom of the page wouldn’t be seen by any passerby. So yes, as a reporter, having your article printed below the fold sucked.

This idea of a fold applies to websites as well. Above is the first design layout for the TrafficDito site. The red line above the shaded area of the screen represents the “fold”. Elements above the fold are considered crucial on a webpage. The basic rule of thumb for most websites is that content displayed above the fold should be enough for users to understand what the site’s about.
 
So here’s what we did: obviously, we needed to place the website’s main features above the fold line. Users could search for a location and see 3-4 traffic reports without having to scroll down. The users could also see the total reports count, top searches and top reporters. Putting these together, we thought, made it pretty clear what the website was all about.
 
Information that appears above the “fold” on a website should engage users, the same way a newspaper captivates its readers with exciting stories and headlines above the fold.
 
So the website was looking pretty good, at least until we realized, “Hey, we have an iPhone app in the works and we need users to notice it fast!”
 
Just by looking at our design at the time, what we needed to do next was pretty obvious.
    


Users had to scroll down just to see the app promotion. And yes, our social media buttons suffered the same fate, looking lonely and forgotten at the bottom of the page.

Some may ask “So what’s the big deal?” Having to scroll down may not seem like much, but we need people to see these buttons right away. We need them fans and followers too!

We wanted to make everything as smooth as possible. No scrolling, no mouse-touching, nothing. We wanted users to notice the app promotion and social media buttons as soon as the page loaded so here’s what we came up with:


Since our iPhone app is now available, we placed the app promo above the fold, which should make it easier for our users to notice it. We also created new graphics for our Facebook and Twitter buttons. Aside from looking pretty cool (street signs! see what we did there?) , the new placement meant they’d be hard for users to miss.


We also added text links at the bottom so that users won’t have to scroll the way up just to visit our awesome TrafficDito Facebook and Twitter pages :D

That’s about it. The fold may not sound much, but it really does make a huge difference when it comes to user experience. Think about it, would you even be reading this post if it were at the bottom of the page?

Don’t forget to download our iPhone app!

-Roegan, Product Hipster

    • #ProductDesign
    • #TrafficDitoUpdates
  • 1 year ago
  • Comments
  • Permalink
  • Share
    Tweet

Dots Mark The Spot: The TrafficDito Map

They say a picture is worth a thousand words. This saying applies even to, well… traffic reports! With the Map screen’s birds eye view of Metro Manila, you can get the low down on traffic reports in real time and see exactly where they are. Color-coded dots make viewing intuitive. Green is light, blue is moderate, and of course, juicy big red ones for the biggest pain in the arse: heavy traffic.

Our Map screen has four main features.

Map Callout

The map callout is that speech bubble-looking thing that pops out when you tap on any dot on the map. These are where you can view all the report details, yes, including all the rants a user may have noted with them.

The first version of the callout had a fixed height. See the awkward white space on top of the report inside the callout? Aside from looking even worse with one-liner reports, the space it took up would cover portions of the map!

 

To fix this problem, we made the callout box’s height dynamically resize depending on the length of a traffic report. By getting rid of the empty white space, it started looking much better, at least until we noticed another problem. The red strip on top of the callout looked awkward and confusing above a blue or green dot.

We thought about matching the color of the strip to the dot color but decided to scrap the red strip altogether and make the whole callout translucent black. Aside from solving all the problems in the previous version, it just, well.. it looked a lot cooler this way!

Cycling Reports

The second feature is cycling over the reports. When a user taps on the left and right arrows on the top navigation bar, she can cycle through traffic reports.

We made sure that cycling through reports was kept as simple and practical as possible. Tapping the right button would bring up reports from the closest to the farthest from your current location, and vice versa with the left button.

Report Button

Putting the report button right on the map screen felt more natural and just made the reporting process a lot simpler. The map already shows where you are, it wouldn’t be practical to have users tap on a separate tab to report. Just hit the red button, key in the traffic condition and voila! Your report shows up on the map.

Snapping Traffic Dots Into Place

In anticipation of multiple reports near the same location, the issue of overlapping dots became a concern. This, and GPS inaccuracies meant that some dots would sometimes appear off the road. (Heavy traffic in the middle of UP AyalaLand Technohub?) Unless you’re crazy enough to drive on the sidewalk, who wants to see off-road traffic reports?

Ahhh, that’s better. Look how all the dots are all neatly in line. All thanks to the TrafficDito-assisted GPS! Now all the dots snap to the middle of the road. Now if only we could get those buses to snap to the middle of their lanes.

 
-Jacy, Product Team’s Official China Doll 

    • #TrafficDitoUpdates
    • #ProductDesign
  • 1 year ago
  • 15
  • Comments
  • Permalink
  • Share
    Tweet

TrafficDito Logo Creation Case Study


The Creative Brief

TrafficDito is the first social traffic monitoring app that enables commuters to identify trouble spots in Metro Manila through fellow app users and the Twitterverse. This means users get only the most relevant and recent traffic updates from people actually on the road.

When designing the TrafficDito logo, several goals were on the table. We knew that the logo would be appearing in a variety of environments such as online, in print, and on a mobile platform, so one of the primary goals was flexibility. It also needed to reflect that TrafficDito has a serious side in that it’s a helpful social utility, but at the same time needed to have a soft edge and not come off as overly technical or unfriendly.


Initial Direction

The initial direction pulled from a number of aspects that surround traffic. Elements of sand, water and asphalt were set against the Metro Manila skyline painting a picture representative of travel and commuting. 3D characteristics brought depth to the logo, and gave us an opportunity to illustrate traffic trailing into the distance with a perspective quality. However, as the initial direction became more visually complex, it moved further away from the goal of being crisp and clear at small sizes so this version was placed on the back burner.


Final Direction

When starting the second and final direction, retaining a simpler form became a higher priority in attempt to keep the logo identifiable at a variety of sizes. This was especially important for the iPhone’s small Application Icon, which is an icon users put on their Home screens and tap to start an application.

As Apple states it, “This is a place where branding and strong visual design should come together into a compact, instantly recognizable, attractive package”.The final direction ended up being comprised of a modern compact car, backed by a large, red bus riding its tail. With the use of visual-scale we created a feeling of closeness and tension between the vehicles which we all know as common attributes of Manila traffic jams.


Color Selection


The final logo’s color palette moved away from the cool-blue colors found in the initial direction, and picked up red as its primary voice. The study of color theory tells us that red is a color which signifies power, and we’ve all heard the old adage that says “knowledge is power”, right? This tied in perfectly with TrafficDito’s principal goal of sharing traffic related knowledge with other commuters.

Additionally, in direct relation to traffic, red tells commuters to stop and signifies “no motion”. From a practical standpoint red also worked out as a base color for our then soon-to-be-designed TrafficDito t-shirts that were to be given out to street vendors to help spread the word about our new product. We felt red was a natural all-star at standing out in the crowd and was a logical color that would serve our needs well.

Vehicle Creation

Throughout the design process, several vehicle styles were illustrated and experimented with. Jeepneys were in the running, but were axed in favor of a large simple-shaped bus that provided better contrast to the car in the foreground. Our initial car was playful and cartoon-like, but possessed too much of a Big-Body-Benz or Bentley feel, and didn’t convey the common vehicle types found on Manila roads. Instead, the final car was modeled after a modern Honda Civic to better reflect Metro Manila traffic.

-Josh, UX designer dude who loves cats

    • #ProductDesign
  • 1 year ago
  • 7
  • Comments
  • Permalink
  • Share
    Tweet

App-volution of TrafficDito

When it comes to building apps, our philosophy here at TrafficDito is to take an incremental approach. We focus on one task first before moving on to the next. Which is why the first version of the app started out with just one tab - the Stream tab:

In the first version, the stream simply pulled reports from TrafficDito.com and presented it in a neat, scrollable stream. The next few builds focused on making the Stream more awesome – by adding the Report Detail screen and autocomplete feature in the search box.

Once we were satisfied with how the Stream screen worked, we added the Report tab.

You had to manually type in your location then! Primitive as it was, we had to make sure it worked first before making it pretty. You don’t want to put lipstick on a pig. Well, unless you’re a hottie eating bacon.

Okay, GPS technology sure sounds sexy, but even with satellites 22,000 kilometers up in space travelling at 14,000 km/hr, it doesn’t always get the location right. I mean Superman flies higher and faster and can still instantly find a cute kitten stuck in a tree. So why can’t GPS do the same? Sigh. Anyways, we figured it’d be a good idea to provide users an alternative option just in case. This means allowing users to manually enter their location.

Once we were happy with the Report screen, the Map screen was next. Tapping the map screen allows you to see the pins and their corresponding traffic condition. Tapping the crosshair button on the upper right will center the map based on where you are (the blue dot).

The report callouts that pop out when tapping the pins is something we implemented eventually, but we’ll save that story for another time.

Then there were four. Adding the More tab gave us a place to house the Registration, Sign In, About, FAQ and Feedback screens.

After staring at the app every single day, we realized that the More tab label was kind of… vague. “More…what? Stuff?”, we asked ourselves. Bleh. So we decided to rename it to “Settings” instead. We also changed the icon from three dots to two cogs.

And then, we decided to remove the Report tab and create a Report button on the Stream and the Map instead. Why? To make it easier for you to report of course! You don’t have to switch tabs to report anymore, which makes  the screen flow faster. You tap Report, the form slides up, you type in the deets, the form slides down, then BAM!, you’re done. We made the Report button omnipresent… except in the Settings tab.

Notice  that we changed the color of the tab highlight (which indicates that you’re on that tab) to make it more uniform with the design. The blue didn’t really match our color palette, so we changed it to white. Good thing we did because mismatching colors is a big fashion faux pas. We also noticed that the Settings tab icon is chubbier than it should be. After making them go under a strict diet (just kidding), we made the cogs look sexier. Now that’s hot!

So we went from one tab to two tabs to three, then four tabs, and back to three. It’s not that we can’t make up our minds, we just feel the screen flow is easier and faster with less tabs. We’re always trying to make our interface as clean as possible and that means eliminating unnecessary elements.

Simplifying things is actually difficult. But there are four ways to make products simpler: hide, organize, remove, and displace. Or HORD. The most obvious way to simplify is to remove what’s not really needed, while the quickest way is to organize or arrange elements into groups that make sense. Hiding is pretty self-explanatory and displacing is moving the elements from one place to another. What we did was we removed the Report tab from the tab bar and displaced it to the Stream and Map screens. By making this change, we feel we improved the screen flow since the user can now report directly from the Stream or Map screen instead of having to tap on the Report tab first.

We want reporting to be really simple, fast, and easy.

So that’s a short history of the evolution of tabs for version 1.0. Stay tuned for more updates. Please download our app if you haven’t already!

- Pam de Manila, Product

    • #TrafficDitoUpdates
    • #productdesign
  • 1 year ago
  • 19
  • Comments
  • Permalink
  • Share
    Tweet

Visit our website at

TrafficDito.com


See what else we've been working on:

looloo

Discover Manila's best places.

looloo blog

Check out the blog for updates, promos, and features!


Blog Post Categories:

  1.    • Manila Traffic News
  2.    • TrafficDito Updates
  3.    • Software Development
  4.    • Product Design
  5.    • TrafficDito Community

Check us out yo!

  • @TrafficDito on Twitter
  • Facebook Profile
  • trafficdito on Flickr

TrafficDito Tweets!

loading tweets…

  • RSS
  • Random
  • Archive
  • Ask us anything!
  • Mobile