Haiku Crow - Product design for strategic pricing web app and marketing website

Written by Agustina Feijóo.

Mar 2020 - Aug 2020


Haiku Crow (now rebranded as Haiku Optimizer) was the last product I worked on during my time at Haiku.

Haiku for Teams seeks to help teams improve their collaborative processes through innovative tools. In the case of Crow, it's aimed towards marketing and sales teams on subscription companies, and it allows them to experiment and iterate on their pricing strategies without writing code.

Company website
Crow (Optimizer) website

Problem statement

At the beginning of 2020, the company's Founder and CEO decided to start building a new product that would be intrinsically connected to the business aspect of SaaS companies. He envisioned that this new product would help marketing and sales executives grow their businesses and increase revenue by exploiting untapped markets and getting better and more detailed reports containing a comprehensive breakdown of their data.

The initial idea for the MVP was to start by offering pricing localization features. This would allow SaaS companies to increase acquisition and extract more revenue by offering potential customers from other parts of the world, who would otherwise have found it difficult to afford their products/services, a tailored pricing structure in line with their purchasing power parity (PPP). In other words, we worked from the hypothesis that Haiku Crow would allow companies to avoid leaving money on the table.

Users and audience

This product would be designed with the needs and wants of three types of users in mind:

Scope and constraints

We were a small and distributed team working across time zones on a tight deadline building a new technology that seemed to be unique at the time.

My role

I was the only designer working on this product, collaborating directly with the company's founder and CEO. I:


Prior to the implementation process, we invested a couple of weeks in research to validate or invalidate the product idea

Originally, there were other product ideas competing with Crow. To settle on one, we needed to make some basic definitions regarding each option and later go through a validation process:

All the definitions made at this point were assumptions that we needed to validate. To do that, I put together a framework (after consulting multiple sources) through which we could filter the ideas and see which one made it to the end of the race.

The framework consisted of four validation phases. Each of these phases offered multiple tactical options varying in complexity and cost. I went through this framework with the company CEO and we settled on a strategy that was feasible given our resources and time-frame. These phases were, in short:

After the first couple of validation phases, the company decided to move forward with Crow.

Screenshots of the first few pages of the market validation report I crafted (4 of 21 pages).

Regarding my participation in this process:

With the product idea defined, I started building the visual language for Crow

I started by putting together a series of color palette options, varying in complexity (from a couple of complementary colors to square or pentagon color combinations).

Initial color palette explorations by me.

After a couple of options were discussed with the CEO and selected, y created some basic placeholder website mockups to show how the colors interacted with one another, which allowed us to observe the strengths and shortcomings of the different options. Through this process, we ended up selecting what would be the final palette for Haiku Crow.

Color palette trial on placeholder mockups created by me.

We selected this palette due to its versatility (which would be useful on the myriad of graphs, illustrations and other infographics we knew were going to be needed) as well as its personality (serious enough but never boring) and good contrast.

Selected color palette for Haiku Crow.

I conducted a similar process for the selection of a type family. I used the same placeholder mockups to display an array of options ranging from modern sans serifs, to elegant serifs and a spectrum of font pairings in between. We decided to go with FF Real by Erik Spiekermann. This type family would also be used on the brand redesigns we had planned for the other company/product logos, and on the new versions of our marketing websites.

Trial of multiple type families and font pairings.
Haiku brand redesign (by me) using the selected type family (FF Real).
I also participated in the brand explorations for this product, always collaborating hand to hand with the founder, who had a very clear idea and vision for the logo. This process had the added complexity that after further ideation and data collection, the product changed names multiple times, going from "Pricer", to "Crow" and finally to "Optimizer" (this last switched happened after I left the company). For each of these product names we experimented and tried a lot of different concepts and ideas.
Screenshot of a fraction of the Crow brand design file.

Finally, I defined the typographic hierarchies and started building some basic UI components and design tokens like buttons, links, cards, shadows, spacing, and so on. I created a style library in Figma, which we would later consume to create our marketing website and the product itself.

Screenshot of a section of the Figma component library I put together.

With the visual language in place, I moved forward with the creation of the first two versions of the website, with varying degrees of clarity around functionality and messaging

At first, we had a general understanding of the idea behind Crow, but there was still a lot of uncertainty regarding specific features and behavior. So, in the first iteration of the marketing website, we focused more on the idea or strategy and less on the specifics and tactics.

Rough sketch outlining the website done on my iPad.

The CEO put together a content outline for the first version of the website, and from that, I created some rough sketches on my iPad, and once approved I applied the visual styles we had defined so far, plus other stylistic details, that continued to morph over time.

Mockup created by me of the first iteration of the marketing website for Crow.

After a little time, we had more data, more clarity in the vision, and more definitions around functionality. At this time, we were ready to embark on phase three of the validation process (validate willingness to pay via a concierge MVP) and start offering the product and all it could do (which, in a concierge MVP, a lot of it is mostly done by hand behind the stage to avoid creating a robust implementation ahead of the validation process). The CEO produced a new content outline and I drafted, created mockups, and implemented this second iteration of the marketing website using Webflow for speed (the website was ready to be deployed in under two days, responsive and all).

Mockup created by me of the second iteration of the marketing website for Crow.

Product design

Laying down the groundwork for the product design through information architecture and wireframing

This process started with one-on-one meetings between the founder and myself during which we discussed his vision for the product, we explored some user flows, discussed the main screens necessary for the MVP, and observed patterns and strategies from other related and non-related products. During this exchange, we both created low-res drafts for the key screens of the app and discussed their pros and cons.

Rough sketches made by me on my iPad for the Crow app, used as discussion starters.

After we achieved a certain level of understanding regarding the core of the idea and the necessary behaviors we needed to design for, I created an information taxonomy map with numerated screens and sections to be later matched with the corresponding wireframes and mockups, to serve as a road-map for the upcoming design phases.

Information taxonomy map I created for the Crow app.

Having laid out the basic structure of screens, sections, and how they connect, we started focusing on the behavior and patterns of each screen. These are some of the user stories we needed to cover in the design:

Note: at this stage, I planned and created the baseline structure of the app, not only for the concierge MVP but also for V1.

Wireframe of the "Cohort list view" (dashboard) screen of the Crow app (1/28 wireframes I created for the entire app).

With the structure and the style library in place, I proceeded to put together the high-fidelity mockups for the product

Along the way, new feature ideas came up. Each one was discussed, drafted, added to the application map with its corresponding nomenclature, and mocked up.

Mockup I created for the dashboard of the app.

One of those added flows was the cohort creation wizard, including the smart pricing feature.

This new flow gave the primary user (sales/marketing exec) more control over the cohort creation process, going from just picking countries and naming the cohort, to additionally:

At the same time, this could be done much more easily thanks to the in-depth automatic recommendations in smart pricing, which took into consideration data points such as the base plan pricing, the selected area's PPP, and annual/monthly rounding to get whole numbers.

Aiding with implementation

During this project, I also had the chance to help the development team out by personally shipping code to get the implementation to look as close to the design as possible.

Screenshot of my GitHub contributions. Contributions to the Crow repos are highlighted.

The app was implemented using Vue. I modified some of the design tokens that were being extracted from my design files via Diez, I took a general pass at the app, adjusting colors, sizes, spacing, shadows, as well as implementing the desired interactions on components such as the team CRUD.


I left the Haiku team on the last day of August 2020. By then, we had completed the first two phases of the product idea validation process, and the third phase (concierge MVP build, plus willingness to pay validation) was well underway. After my departure, the team continued working on the product, adding new features, re-branding the product to Haiku Optimizer, and moving forward with the sales efforts.

We reached the goal of planning, researching, designing, and implementing a new product almost to completion in under 5 months, between 4 people.


"Tina is a highly effective UX designer, who helped drive initial design for two greenfield products and major design iterations of two existing products at Haiku. Tina is also a talented visual designer [...]. Beyond design skills, Tina is highly versatile. Working at a startup, Tina had no hesitations about wearing many hats. From marketing to business operations to shipping code, Tina jumped in everywhere that duty called, and did so with aplomb. [...] Finally, Tina is a gifted communicator with world-class organizational skills."


Read the full letter of recommendation

Next case studyChevron icon
Diez — User research for product idea validation