We like building quality products,” is a mantra you hear a lot at the Collective Ray office. It crops up when Brian Benitez describes how he and co-founder Josh Guffey started the company after a string of frustrations at other consultancies, and it’s heard again when lead designer Wells Riley talks about his reasons for joining the team.

Collective Ray’s ethos represents a new kind of design that’s not just built around beautiful color palettes and arresting typography (although they do that too); it’s about creating powerful new user experiences. “I think I came to California as a designer,” Riley says about his transformation, “and learned about product by working with a lot of people and at a lot of startups.” Now at Collective Ray, you can find his hands on production code and product concepts as much as the traditional design components.

Similarly, fellow Collective Ray designer, Rickie Sherman remembers how he started out as a general designer and then found himself more and more interested in working on UI. “Ever since I had a PSP and learned how to manipulate it, I would change the way the UI looked - that’s when I first fell in love with it.” Sherman quickly started mocking up fake Mac OS apps, even without a developer to actually make any of them, sure that “one day, I knew I could do this for real.”

This thirst for interesting and successful products explains why Collective Ray has such a wide and diverse portfolio - from the Aspire App for Dr. Phil that helps people escape domestic violence, to designs for Cover, a lockscreen app recently acquired by Twitter. Collective Ray makes a point of searching out partners willing to put the user experience above egos. Riley once created a primer for budding entrepreneurs called, Startups, this is how design works, advocating for great design as a building block of successful products.

Collective Ray Office

The Collective Ray Office

Wells Riley

Designer Wells Riley

Whistle Sketches

New Dog, New Tricks

The team is fearless in taking on daunting projects - when the start-up Whistle came to Collective Ray, there was not much more than a concept for a dog activity monitor. The designers needed to transform the raw data that the device spewed out, into a friendly, engaging consumer-facing app. And they were starting from scratch.

“There was just a graph that would spike and jump - no real way to understand that my dog is active,” Benitz recalls. “We thought a lot about the data visualization and making it consumable.” One of the team’s key goals was to make dog’s daily activity report connect with the dog owners on a human-level. “We tried to approach with the idea of, ‘How would you and I talk about what a dog did during the day?’”

The designers tested out iteration after iteration with real users, using Flinto to create quick and dirty prototypes. “We could whip together a few screens - something as low fidelity as black and white wireframes - then throw them in Flinto and have them tap through,” describes Benitez. “We weren’t going to go and build every idea to put in front of users - instead we were able to achieve the same results without the heavy investment.”

Original flows and sketches for Whistle
Original flows and sketches for Whistle

Collective Ray’s original flows
and sketches for Whistle

Indeed, the team could tell immediately when a concept stuck with users or not. “If it wasn’t working, users would get hung up on screens or not really understand what they were looking at,” says Benitez. “When people started saying, ‘Oh yeah, I get this’ - we knew we were onto something.” Thus, through this trial-and-error process, the designers finally landed on a narrative, story-telling approach to the daily report, assured that it connected emotionally with owners.

Through designing the flows, wireframes, UI and visual look and feel, the Collective Ray team delivered a richly cohesive experience for Whistle, who have already sold 10,000 units that connect to the app.

Whistle
“When people started saying,
‘Oh yeah, I get this’ -
We knew we were on to something”

Applying lessons learned

After working with so many start-ups to clarify and develop their vision, the Collective Ray team started to itch to build a product of their own. “It’s great to have all of the pieces under our control,” Riley says, “because we’ll usually get only 2 out of 3, or 1 out of 3: an interesting
product or idea, design, and code.”

And thus, Flaer, their first app was born. Flaer lets you send single-use location beacons to friends, and was conceived out of their personal frustration with getting together with friends and the dirth of good apps in the space. “There are location sharing apps, but they’re terrible - they either track you the entire time and drain your battery, or they’re only iPhone to iPhone,” says Benitez.

In contrast, Flaer is compatible with any mobile platform - it simply texts someone a link to your location. The team iterated on the idea endlessly in sketches, Photoshop and builds. They relied on Flinto to try out many of their ideas. Benitez recalls, “It was just a useful way, even on the design side, to organize the screens, instead of just having static exports of this is this screen, or even printing it out.”

The Flinto prototypes allowed them to quickly validate and adjust design. “Nothing’s really the same as seeing how the UI relates to each other and to see it actually working,” Benitez explains. “You tap this button and this happens - we were using Flinto as part of the design process, in parallel to designing the screens.”

“In Flinto, to be able to look at a complete flow anytime you want was really powerful,” Sherman adds.

Orange
“Just being able to have the
product that we were making
in our hands as we were
designing, that’s really valuable.”

Always Learning

The entire Collective Ray team is eager to simply continue throwing themselves into making great products. When Benitz thinks about the future, he’s most interested in pushing the team’s boundaries to create experiences that surprise and delight their users.

“It’s a very holistic approach - interaction, visual, etc., not one of those things is a product,” Benitez says. “They’re all just tools in our tool belt - things that we employ in order to build a product that is intuitive, that works, that’s useful - a lot of that comes through learning, a lot of that comes through just trial and error, we just continue to push the envelope and see how everyone else responds to it.”

“We just continue to push the envelope and see how everyone else responds to it.”