As a designer, I’ve spent most of the last 5 years guiding the design of delightful software, effective websites, and distinctive branding.
In this case study, we’ll explore the branding, website, web app, and mobile app design work I’ve overseen for my own product, CrewFire – a social media brand ambassador platform that helps brands turn their customers and fans into brand champions.
CrewFire is bootstrapped and profitable, with a small team consisting of 2 co-founders, 4 full-time team members, and 3 part-time team members.
As of February 2017, CrewFire has helped brands engage 4,816 ambassadors, who’ve creating 64,833 posts across 5,691 campaigns, reaching 9,076,353 impressions on Facebook, Instagram, and Twitter.
Given the name of the product, a fire-related symbol was the obvious choice.
With the logo, our aim was to convey a bold presence, combined with simplicity and elegance – a reflection of the product the logo would be representing: bold, powerful value, delivered via a simple, elegant interface.
Special thanks to my collaborator and designer Dang Nguyen.
The CrewFire platform is youthful, energetic, and social. It’s all about connecting brands with their customers and fans, and mobilizing them on social media.
In other words, it’s all about people.
For the website, we wanted to convey that youthful energy, and put people front and center.
(See it live: http://www.crewfire.com)
We aimed to maintain a clean and modern feel through the site – again, a reflection of the software the audience is learning about.
Though still early, the usage and stats of our platform are compelling enough to offer a strong dose of social proof.
We put these numbers front and center, to communicate the value we’re driving for our customers.
Our pricing is simple enough – two feature tiers, plus a sliding scale based on how many ambassadors the customer is managing.
While simple, we realized this model was tricky to communicate to prospects via normal pricing tables, so we had to get creative.
The Ambassadors slider makes this clear, and we clearly signified the function of the slider using the “Drag” animated tooltip.
The interactivity of the page – watching the Ambassador count and the Plan Pricing increase as you slide the selector – is quite satisfying. A delightful interaction that builds confidence in our brand and product during a critical step in the customer journey.
CrewFire Web App
At the heart of the software are the values of simplicity, power, and speed.
It’s important to me that the software delivers massive amounts of value to the customer, while not compromising on ease-of-use.
I can’t say enough about my collaborator and designer on this project, Minh Tran.
Unsophisticated first-time users should be able to understand the basics of how to use the software, without needing to refer to help documentation.
Power-users should be able to dig deep and really leverage the platform to drive big results.
The People page is really the core of the platform – showing all the team members, their contact information, and some basic stats.
We took inspiration from Facebook Group’s photo mashup images for the images on the Groups page.
Again, at the end of the day, CrewFire is all about people, so we want to take every excuse possible to get their faces into the platform.
The Rankings page is clean and minimal. It was an interesting challenge, experimenting with different ideas to call out the User’s own position in the rankings.
The call-out had to be clear, but not too intrusive. The first obvious choice was highlighting the enter row, but the colored version didn’t sit well with the rest of the dashboard’s clean, minimal aesthetic.
We took inspiration from Google Analytic’s robust date-range selector when designing CrewFire’s.
In particular – we love the preset options, offering the Admin one-click presets for various use cases.
CrewFire Mobile App
Since we’re bootstrapping the business, we launched with web-first.
A Twilio SMS integration and mobile-responsive web app gives us solid coverage on mobile, but the nature of our Instagram sharing necessitates a mobile app build before long.
Basically, Instagram doesn’t allow third party apps to post to the network via API. For now, team members have to download a photo, switch over to the Instagram app, and upload it manually.
This is a poor experience, and leads to lower “conversion” rates on Instagram (manager asks 100 people to post a photo, some small percentage of that completes the post).
With our own native mobile app, we can take advantage of Instagram App Hooks – where the user can click on a button in our app, and be switched over to the Instagram app with the suggested photo queued up in the editor, ready to post with a couple clicks.
Though still not as streamlined of an experience as our Facebook or Twitter posting, the experience will be much, much better for users, leading to increased conversions on Instagram posts and, ultimately, driving more value for our customers.
Like what you see? Depending on current projects, I may be available for consultations or contract projects. Email me at Alan@ZenHustle.com to discuss.