

I love TripIt, but I hate their iPhone app, so I redesigned it. - andrewmackenzie
http://drewmackenzie.com/tripit.html

======
guywithabike
Just a heads up: that JS-induced header flickering is distracting as hell. Use
`position: fixed;` instead of a JavaScript hack that constantly flickers the
header in and out of the window.

~~~
cantlin
Yup, and the 126px fixed height is over 20% of my window on this MBA. Might be
worthwhile compacting it a bit on devices with small displays.

~~~
andrewmackenzie
Ya, :fixed doesn't behave as intended there. I tried it out on a 15" MBP, 13"
MBP, iPad, Cinema Display, and phones, so I've seen that it's pretty cramped.
I'm not great at responsive design yet, but I'll mess with it. Any advice on
getting the images and text to scale to smaller screens within their divs
would be appreciated.

On that note, can't wait to see how Polygon.com is built.

~~~
rglover
For images, you can specify either multiple file types (load different
resolutions with media queries), or use .SVG graphics (support is spotty in
older browsers). Here are two handy guides: <http://bit.ly/LzRkfN> and
<http://bit.ly/MH1bjq>.

For text, it depends on which part. For body text (paragraphs), the easiest
thing is to have a percentage based container and change font-sizes based on
break points with media queries (e.g. at a screen with min-width of 768px,
change font to this size). Headers are a bit different, you can follow the
same approach as paragraph text or, use something like FitText
(<http://fittextjs.com/>).

Love your work. Hit me up at me@ryanglover.net if you need code help.

~~~
andrewmackenzie
Awesome, checking this out. Didn't know Smashing did a totally responsive
redesign either. Thanks!

------
mitchellh
Great redesign.

In case any TripIt engineers/employees/etc are browsing, I do want to say that
design aside, the biggest issue with the iPhone app is that API requests are
made in the main thread, so the GUI locks up. It is incredibly annoying to tap
on a page, have it be frozen, then a few seconds later the API requests
finishes and it processes your tap which takes you to a SECOND screen which
requires an API request, and you're frozen again.

TripIt should be one of those apps that is "open, read, close" in 10 to 15
seconds. The API requests are brutal, brutal.

~~~
barbs
> The biggest issue with the iPhone app is that API requests are made in the
> main thread, so the GUI locks up.

Wow, really? That seems like a major oversight. I'm pretty inexperienced in
the iPhone development scene, but I know with Android development this sort of
thing is strongly discouraged. There's even a mode called "StrictMode" where
any file and network access on the main thread will cause a crash instead of
hanging.

~~~
srik
Blocking the main thread is just as much discouraged in iOS development too.
Wonder how it got through testing.

------
conradev
> When moved to a slide-down tray at the top, you can jump between sections
> more quickly

I don't like when people are quick to skip over system-provided controls. In
this example, an UITabBar would be a perfect replacement for the drag down
menu at the top. What were the reasons for making it a custom drag down menu?

> Menus are Temporary

I don't agree in this case. The tabs in UITabBar are always visible so that
the user knows precisely where they are in the application at all times.
Furthermore, a user already knows how to use an UITabBar, whereas with this
new control, the user has to learn to scroll down from the top to navigate
anywhere.

~~~
andrewmackenzie
Comments appreciated!

> What were the reasons for making it a custom drag down menu?

It takes up so much valuable screen real estate! Though I haven't scaled it
for the iPhone 5 screen yet. Path is a great example of skipping over system-
provided controls.

> The tabs in UITabBar are always visible so that the user knows precisely
> where they are in the application at all times.

In TripIt's case, I disagree. I spend 90% of my time in the Trip section.
Though if the Network section was more robust, there would also need to be
some kind of notification in the top bar, too.

------
johns
TripIt makes me sad. It had such huge potential and has almost entirely
stagnated. The point tracker is frequently just plain broken, the app is
indeed terribly slow (especially offline, the mode I'm usually in when I need
it most) and poorly designed. They've essentially banked on two killer
features: email itinerary parsing (no small feat) and alerts (which are very
good). I wish they'd put more effort into the rest of the product.

~~~
LawnGnome
Agreed. I find the Web site itself to be quite poorly designed, too: I often
find it difficult to parse out the pieces of information I want from an
itinerary from the pieces I don't (such as automatic directions).

Also, the permanent nag-bar at the top of each page because I haven't set up
automatic importing (and don't want to) is particularly irritating. Plus, it
can't remember my Google Apps domain, let alone my login.

I love the itinerary parsing, but wish I could love the rest of the service as
much.

------
twog
Thank you for presenting spec work as spec work, and not as a concept or some
vendetta against the company. Other designers should take note.

~~~
justin
Serious question: what's the difference between spec work and a concept?

------
ComputerGuru
Actually, there's another option as well. If you have the FlightTracker app
for iOS (it's a great app, btw), you can configure it to pull your TripIt
flights. Just throwing this out there.

Nice design, though! Great work.

~~~
potatolicious
FYI the app is named FlightTrack and FlightTrack Pro (I used to work on it).
It's also available on Android.

~~~
andrewmackenzie
That looks pretty good. Any plans for companion apps for other modes o'
transport?

I didn't realize TripIt handled so much potential data, until I mapped out the
whole app in Keynote to start this project. Credit where it's due – while I
hate the existing app, it's still no small feat.

------
helloburin
This is great! I work as a dev on a related travel product (mentioned in a
comment here actually) and our in-progress redesign has the things you mention
as priorities (speed/clarity).

I'm going to go ahead and say travel apps in general suck, so I'm not
surprised to hear your sentiment towards TripIt's iPhone app haha.

One thing that I appreciate is that you understand the difficulty in designing
these kinds of apps. On the surface it's "oh. well it's really just a bunch of
lists and buttons with labels and text", and I think that's the approach a LOT
of travel companies take. They value the tech/info more than the way it's
presented. Luckily there is a LOT of room for improvement in this industry,
and with devs who care about experience and designers who understand tech we
should be able to make a big dent. I honestly thought TripIt would be one of
those companies though...

------
johnrydell
Cool concepts. But TripIt's mobile app isn't as bad as you are saying. I can
always quickly and easily get what I need from it. The mobile app is one of
the few "pro" upgrades I actually pay for on any app and it is worth it for
someone who travels 15+ times per year.

~~~
jpiasetz
Which phone do you have? On my iPhone4 it lags and is slow all the time. I
think particularly when it's in air plane mode but it might just be my
perception.

~~~
andrewmackenzie
Same here, I'm on an iPhone 4. Apparently it's just constantly pinging the
server when you launch it, even in airplane mode. You'd think it would know to
skip that. Will certainly be testing it out on the iPhone 5 when I upgrade
next month.

------
marknutter
I try not to go off topic and bitch about the site when stuff is posted like
this, but sometimes being fancy can come back to bite you: on my 11" macbook
each "slide" (if you want to call them that) doesn't actually fit on my
screen. The header bar takes up so much damn space I can barely see the main
content. A basic website with no frills that I could just scroll, using the
maximum amount of real-estate I have available to me, would have been a much
better experience for me. Sometimes simpler is better.

~~~
andrewmackenzie
Agreed. I shrunk the header on the content pages to remedy that a little, but
I'm still learning about responsive design to accommodate 11", iPad and phone
screens. Feedback appreciated.

~~~
marknutter
Sounds great! Keep at it!

------
SeoxyS
I think this is fantastic.

Clearly you've thought this through, and don't use eye candy frivolously; but
rather use it for a purpose. This is a perfect example of design done right,
and what can come out of a job when practical considerations are kept in
check, and when the design is thought through thoroughly. TripIt would be
crazy to not try to snatch you up on the spot—hell, any company should. If
you're looking for a gig, shoot me an email!

~~~
andrewmackenzie
Ha, thank you. I actually mapped out the existing app's "potential data" in a
51-slide Keynote before starting this, and the 11 iterations before it. Nobody
will ever see that – it's just bones – but I hoped the thought process would
show through a bit.

TripIt favorited my tweet to the link, but... that's it. I'm not really
looking to join Concur. I'm just hoping they haven't quit on their loyal and
loving users yet.

------
sensecall
You've done a great job on the redesign.

Perhaps the only thing I'm unsure of is 1) the hidden tab bar at the top of
the screen and 2) the somewhat ambiguous icons in the nav bar.

~~~
andrewmackenzie
Thanks! The hidden nav is certainly a risk. The bumps on the bottom of the bar
try to suggest it, but are very subtle. A major overhaul like this would
involve some marketing efforts, and/or a NUX tutorial upon first launch.
They'd lose that chunk of existing users who hate change, no matter what
progress is made. I can picture the streams of tweet rage already...

Recommendations on clearer nav icons? Always seeking constructive feedback
from people wiser than I.

------
voxmatt
Oh no! Faux leather!! Just kidding--very nice work.

~~~
andrewmackenzie
Yaaa guilty as charged. My last iteration carried the same topography pattern
down from the menu bar, but it washed the whole thing out. Lacked contrast.
This seems deeper, more pleasing to the eye.

~~~
voxmatt
I think it's used tastefully and intelligently.

------
krzyk
You could try TripCase, I think it has much the same functionality but
different design. It might suit you better.

~~~
andrewmackenzie
Trying it out – UX is super fast, easily superior on both iOS and web. The
confirmation email parsing doesn't seem to be working for the first few I've
sent in. Feels kinda like filling out an expense report. Gonna run this side-
by-side with TripIt on a road trip next week, and see if I actually end up
using it. Thanks!

~~~
andrewmackenzie
Scratch that – parsing just takes a few minutes.

------
mbesto
I would easily pay for premium if TripIt could make the app like this. I smell
a disruption brewing...

------
alid
I'm impressed! Nice redesign man. My startup's in travel - we should connect.

~~~
andrewmackenzie
(o, and I'm @andrewmackenzie on Twitter)

------
kngspook
TripIt should definitely take note. I'd love to use this (spec'd) app.

