It all started with "please guys, buy a UI/UX".
Ouch.
Fair enough, I was doing most of the UI/UX, and honestly, I felt I hit my limits more than once.
At the time, March 2020, we knew we identified a strong value proposition and a potential market-fit.
But we felt the need to offer a more... "finished" product.
You probably see everywhere quotes of Reid Hoffman saying "If you’re not embarrassed by the first version of your product, you’ve launched too late."
We did follow this advice, the first version was as ugly as it could be, but at some point you gotta step up.
Unsurprisingly, building a brand (image) is not something easy, and not to take lightly.
Your brand is the first contact you have with prospects, and hopefully customers.
With the third version of Captain Data's released this January 2021, I wanted to come back on the past 6 months.
On how we built the Captain Data brand.
Drafting the layout
You need to prepare a LOT the brief.
All in all, our brief was 11 pages long. And in this case: the more the better.
Going back to April 2020, I drafted the following table of content:
- Objectives: in our case, defining a clear branding (colors, titles, general style, etc.), building coherence between the website and the app branding & UI-wise and finally enhancing UX here and there
- Idea: What problem do you solve and why is it a real problem? Add a few key facts to know about the environment (market)
- About: How and why have you been starting working together? Beliefs? Manifesto? Values?
- Target: Who is the 1st very niche you target? What people do without your solution? Do you talk to them? How? What's your secret sauce?
- Tone of voice: SO important! there's a few games like "What is the personality of the startup?" that you can play with your co-founders
- Inspiration: Competitors and similar products? Which design website do you think rocks? Which awesome brands/products inspire you the most for your start-up? Which interface do you find awesome?
- Production: describe the different phases, this will help a lot if you need a freelance/agency to work on the subject(s)
For use it was: (1) Branding Guidelines, (2) Design System, (3) Main Landing Page, (4) Platform styling & integration, (5) UX enhancements - To take into account: absolute requirements, like the technology you're using, any specifics
- Deadline: you need to be very precise here, otherwise the project can be delayed at great length; you should have a clear planning attached to the quote/commercial offer
- Annex: any other materials you should add, like a mood-board
Don't hesitate to reach out if you want an empty version of the template.
Launching the project
Who you are going to work with will be immensely important.
It's not "another freelance", you need to have a strong fit with the person/agency: all-in-all, we've talked with five pre-selected agencies, so five quotes to choose from.
We've worked with LORD from A to Z, brand to implementation.
They're going to influence a lot of decisions, and that's normal. If you have a clear brief, it's going to be all the more "guided" and easy for them to understand what you want to achieve.
Right after signing the quote, we (co-founders) sat down to brainstorm about the brand: what Captain Data meant for us, for our clients and investors: it is an additional piece of data that will help greatly when working on the concepts.
Note that we did 20 client interviews in June 2020 to really understand what it meant to be a Captain Data customer, which clearly helped us like nothing else.
Once we shared the brief, the brainstorming and the results of our interviews, we went through a series of interviews with LORD.
This helped them understand better our "vision", ideas we had, to help them choose two concepts.
In our case, in late June 2020, two concepts emerged:
- Space: exploration, captain, "web gate", etc.
- Formula 1 ("boost"): mostly linked to the founding team (too much energy?) and "boosting" your data
Analyzing the concepts is probably the most important thing in the process, more than the production itself.
We discussed a lot possible updates, meanings and so on, to finally merge the two concepts in a single, powerful one.
There's obviously an untold story behind the brand, one you might not see or feel, but that gives a strong consistency.
The idea behind the brand was to create a mascot that would act as "The Captain", that goes on a mission in a galaxy of data.
Even our pricing plan names are inspired from the "space" concept.
The "boost" metaphor of the concept is illustrated with tart and flashy colors, emphasized by a "dark tech" design.
The Captain has been built in 3D to make everything even more alive. And it's really cool 🔥
Typography and the overall UI brings clarity in the illustration and express the plug & play potential of the product.
Following the line
You need to create a sense of consistency: clear branding equals clear wording.
You should work on what you want to convey: are you a premium brand? who is it for, do you talk to everybody?
By creating this "line" you will set a clear environment in which users/leads/customers will evolve.
In our case, we used different words for the same meaning, which led to confusion even among the team itself.
We listed every words that should be removed from our communication and replaced them with a unique designation.
For example, if you take a look at our website, you won't ever see the word "scraping" (ok, maybe once or twice).
Why? Because we do not want to be associated with the technology, since:
- it's often wrongly described
- we're bringing so much more value on the table than "just scraping"
We also focused on three types of personas: sales, marketing and HR. All non-technicals.
We wanted to "directly speak" to them, without any technological wording: the value we're providing is linked to technology, behind the hood, but we're essentially selling to non-tech savvy profiles.
Again, we removed a few words.
Mockups here and there
Just because you're working with a freelance/agency does not mean that you should not do any mockups.
Anybody can do it, even with a paper and a pen.
Start from scratch, place the main titles and the main ideas you want to convey.
I did it only with bullet points on a word-like format (on Notion).
It looked like this:
Which eventually lead to this:
Your job is to guide the agency, supporting them with quality content and a few ideas.
Here the idea of blocks/cubes emerged from what our technology is: an assemble of different ready-made bricks.
Validating the concept
After validating the main concept, LORD worked on the details, the universe as they call it:
- what colors will we be using
- what typography (title, paragraph, etc.)
- the tone
- icons and so on
More mockups
Starts the "real" mockups, the ones created to "make everything alive".
The most exciting part, really, when you discover your whole unique universe coming to life.
This was one of the first "alive" mockups:
It enables you to really project yourself in the universe.
We chose on purpose this specific view of the application. For us, it was even more important than the website's mockups, because we struggled a lot with it, we knew we had UI and UX problems (and we still do I guess 🤷♂️ ).
From there, everything "just" looks like back-and-forth validations until code production.
Production & implementation
From the first line of code to the release, it took us four months to:
- code the website from scratch, import all the content, validate SEO..
- create a library of proprietary UI components for the platform (we chose to get rid of Bootstrap, a CSS framework, which we did not even finished yet)
- integrate everything with on-going development (we hired a front-end developer!)
- release everything
This was our biggest release so far, we hope you'll like it!
Take a look a Captain Data's website.
You can also request access to the platform.
Conclusion
We're almost a year later after realizing that "we need a better UI/UX", I guess it does take time to build "elegant and robust" products, like Paul Graham likes to say 🙂
Note that in the meantime we also revised/upgraded our offers, to better match the overall experience that we wanted to create.
I can't thank enough LORD for their awesome work 🙌
And of course, the Captain Data team to ship so quickly something so big ♥️
{{marketing-component}}
