View All Projects
Coolfire Solutions

Coolfire Solutions

Published: 2019-07-01

ui ux design mobile SaaS platform chat

Context

While at Coolfire Solutions I worked on client projects and designed the customer portal for Coolfire's new Ronin platform. The goal was to create a unified vision for a new SaaS product.

This project included designs for the public website, the developer dashboard (not shown), as well as sample applications to demonstrate the platform features. Part of Ronin's value prop was simplicity of development, Ronin makes building apps easy and fast. To demonstrate this I designed a custom chat app which was built by a developer in about a week using Ronin's tools.

Challenges

The public website was challenging because I had to account for two key personas. The first was a Technology VP, somebody in a leadership position looking to save time, money, or both build their next application. This persona was looking for detailed information about pricing, platform value, time and cost savings, and how the platform scales. I worked closely with some sales teammates to understand their existing clients and what information is often requested to close the deals.

The other persona was a Developer, the boots on the ground actually using the platform to build things. They were looking for documentation about specific features, tutorials to get started, and flexibility in how they could use the tools. To understand the developer persona more I interviewed our in-house teams, seeking to understand how they evaluate and use different technology for their own projects.

We needed our product to appeal to the Technology VP as our sales teams informed us they often write the check. Yet we also needed to appeal to developers as they actually use the product. If developers had friction they might bubble up concerns to leadership who would drop the platform.

Outcomes

I took a first pass at the public website to get some content in front of stake holders. We workshopped the key features, emphasizing a new one-click onboarding flow, as well as pushing pricing to the background (as it was in progress).

There wasn't a brand for Ronin so I worked with the marketing team to come up with a companion brand that used some tertiary Coolfire colors. The site would be accessed from the main Coolfire website, so it needed to feel distinct but not disjointed. I achieved this through consistent type, site structure, and complimentary color palettes.

Ronin got scrapped in favor of "Coolfire Core". The aim was to keep the product more synonymous with the parent brand. The core components of the public site were still relevant, but some of the branding and imagery has been shifted to the main Coolfire styling.

Ronin Website

home page

The home page features some custom illustrations based on the Japanese inspired brand.

stickers

Eventually I made some stickers for the development teams.

pricing

The pricing page is what spawned my branding design. I wanted something more interesting than "low med high" for the tiers so I went with some Japanese-inspired icons.

demo app

This was a demo app page and features some custom illustrations and code snippets. I designed the messenger app, which is detailed further down. I worked closely with the main developer on the copy for his code snippets to help customers get this app up and running on their own.

The biggest challenge was manually formatting and styling all the blocks of code. It took forever, but really presented the idea well and gave the page more variety.

docs

The FAQ page was bare bones, but the concept was 3 easy steps to get familiar with our product.

  1. Read the core concepts to get the right mental model.
  2. Read how to get set up to start using it.
  3. Download source code for a sample app to see it in action.

contact us

multiple instances

Ronin was an instance-based product, meaning a customer might have multiple apps consuming our services. This interface offered a way to manage those unique instances.

account billing

I felt the billing page needed a strong hierarchy of information - most relevant and expected to change up top, then least relevant or likely to change at bottom.

account edits

Each card could be edited on their own (this just shows all for simplicity). The edit / save states helped make managing changes easier.

Ronin Sample App

Part of selling the platform was including an instance of how it could be used. Ronin was abstract, with different pieces you could use for different things. I partnered with a senior mobile dev to design this app using several key Ronin features.

Ronin Chat is an open-source sample application built on top of the Ronin™️ platform. It was designed to showcase specific Ronin features including the Ronin Message service, UserGroups, SocketIO, and Ronin Sessions.

You can clone this open source application here

chat1 chat2 chat3 chat4 chat5