Learn about the Ribbon app, created by Fueled!

Map your future: Ribbon helps you find your friends in time and space. Learn how Fueled helped shape a simple idea into an app featured in the top spot of Apple's 'New & Noteworthy' app list.

Branding

The ultimate sign of successful branding is when you can't imagine any other option but the one in front of you. But before we arrived at those signature 'R' and ribbon-based logos, we explored other references to time and physical space.

Zigzag
Step 1 in the branding process for Ribbon
Pin
Step 2 in the branding process for Ribbon
Curvy
Step 3 in the branding process for Ribbon

Final Brand

Ultimately, we selected a logo that includes a subtle reference to a physical ribbon. We also decided the aesthetic wouldn't be complete without a custom font to convey a sense of playfulness and fluidity.

User Experience

No matter how functional and promising an app is, users will balk at complex interfaces and steep learning curves. We used a few technological tricks, like automatically grouping cities you can't fly between as one super-metropolitan area. This quickly show users the data they're looking for without forcing them to build complex custom searches with filters.

Userflow

Ribbon is a robust, powerful app. But we knew from the start that maintaining a level of simplicity around navigation and functionality would be key to keeping users engaged from the moment they first opened the app. The userflow maps out how various screens relate to each other and how users will navigate between them.

An example of a userflow that Fueled created for Ribbon
Move around to see the rest of the userflow

Wireframing the User Interface

Wireframes are where we explore individual interface elements and how they'll come together to form the actual screens users interact with. Ribbon's unique functionality and groundbreaking navigational structure came out of an iterative process whereby we experimented with various methods of allowing users to select dates.

We finally settled on our 'ribbon-on-a-wheel' tool where users rotate a ribbon clockwise or counterclockwise to advance the date on display. The currently viewed date lives on a flipboard inspired by classic alarm clocks from the 1950s and 1960s.

Move around all the detail in our wireframes
An example of wireframes which Fueled created for Ribbon

Design

Bringing it together

Our designers can't help but think about final design while they work on wireframes. So much of the work in the design phase is about bringing those wires to life by adding color, textures, gradients, fonts, and other elements of polish that are distinctly Fueled. We add colors, textures, gradients, select fonts, and more.

We carefully crafted an aesthetic that creates cohesive brand while directing a user's eye towards the important parts of the screen. Another key part of the process is indicating functionality. For example, a subtle stitching pattern on the time-changing ribbon helps indicate to users that they can wind the ribbon forwards or backwards rather than merely tapping on it.

More Polish

With the user interface fully designed, the real fun begins. We review every single screen for opportunities to add shine, polish, and a little bit of magic--from the way the date-scroller drops out of view, to the animated Ribbon logo on the app's splash screen.

Much of our polish is almost invisible to the user. They don't notice it, but they'd certainly notice if it was missing. Menu bars pop onto the screen slightly over-sized and bounce back into place almost before users can notice.

The 'Add Trip' screen features a tooltip floating among the clouds and airplanes fly by while the London Eye giant ferris wheel spins in the distance and a yellow taxi circles around Manhattan. These background details are part of the signature Fueled touch.

Map Your Future

From small screen to the big screen
Informative map markers to show stats at a glance
Detailed textures and bold typography
Custom illustrations of famous landmarks