Foal
Approx. reading time:
5 minutes
Role(s)
Product Designer
"Design Engineer" (Visual Designer)
Industry
Cloud Infrastructure
Duration
3 months
Project Snapshot
Context
To harness business momentum, Foal, a cloud infrastructure startup, needed to transition from a CLI (command-line interface) to a GUI (graphical user interface). They aimed to expand their reach by making their product's value proposition evident to non-technical stakeholders while maintaining its robust technical capabilities.
Challenge(s)
Being so specialized and tech-centered, the company was the perfect example of Stage 1 on NN Group’s UX Maturity Model. Their sole design asset: their logo. Our engagement’s duration: 3 months.
Goal(s)
Migrate their Control Plane’s key features into a GUI using a scalable design workflow that would allow them to continue building it by themselves after our collaboration ended.
Design Process
I like to present my case studies using the three milestones that we can find if we squint our eyes and take a look at the Double Diamond (UK Design Council, 2003). I borrowed the methodology’s terminology to facilitate understanding, calling them Discover, Define and Deliver.
Discover
Working at an agency meant adapting our workflow to meet client needs and tight deadlines. We started by diagnosing the situation and finding the projects main challenges:
Highly complex business nature: ”microservice orchestration”, “Principal ACLs”. These were Foal’s day to day, most basic concepts. We needed to quickly up-skill ourselves in their terminology and operation.
Zero design: there were no design resources (neither people nor assets/artifacts) in the company. Not even a brandbook.
Time constraints: we had 3 months to go from a logo to 7 features, ready for dev work.
Define
To achieve such ambitious goals we needed to be really sharp with our approach. We leveraged open source tools, made the most out of certain products’ free versions and fostered cross-functional alignment by establishing a strong team connection. Our success was rooted in three main areas:
Designing a UI Framework: the Front-end Lead and I agreed on using Chakra UI to quickly solve for the foundations and scaffold a Design System. I proposed adding Tokens Studio to the mix, so that we could embed Chakra’s assets into the custom components we would need to build for such a niche product. We agreed on naming conventions for said components and their tokens, re-using the same formula established in Chakra’s Semantic Tokens. We even went as far as connecting Tokens Studio to the project’s GitHub repo, allowing me to push design changes and additions to code directly from Figma.
Harnessing Lean UX: we started out by running sessions with the Foal Management team (CEO + Tech Leads) to understand their market, document the key features they were aiming for and identifying their respective personas. In proper Lean UX fashion, we moved from initial user flow drafts to signed-off, high-fidelity designs for all 7 features in about 10 weeks. We achieved this through bi-weekly syncs with both the Foal Management team and our Front-end team to ensure all screens and components met business and technical requirements. We leveraged wire-framing to quickly identify business rules and rapid prototyping to assess feasibility on expected behaviors, making the corresponding changes to asses received feedback. To finalize a feature and mark it as ready for dev, I demoed its full flow using a high-fidelity prototype in a review session.
Embracing true cross-functionality: since we were a small team of contractors working for a small company, we inevitably expanded outside of our roles’ traditional boundaries. We (PM, Designer and Devs) wrote the PRD’s first draft, ideated the Proto Personas and wrote Front-end and Back-end code —exclude me on that last point, the farthest I got was helping out by adding screen copy’s to the code.
Deliver
Once the UI Framework and Design Methodology were established, the path to delivery was quite smooth, at least for design. Our dev teams did face more challenges due to the unique technical complexities of the product. If designing a flow where a user can add a new principal to a cluster, configure their capabilities by assigning ACLs, and specify allowed actions sounds complex… imagine coding it. Nevertheless, we ensured finalized design work was accesible and ready for consumption using these key assets:
A tailored Figma UI Kit: where we hosted and documented all the components we designed to solve for the product’s specific needs. Using Atomic Design terminology, these components orbited between molecules and organisms, created using Chakra’s atoms and molecules. Said components’ color, font and spacing values were defined using the previously mentioned semantic tokens through Tokens Studio.
Attaching Ready for Dev Figma frames in Jira tickets: once a component or a screen was signed-off by the Foal Management team, we marked it as Ready for Dev in Figma and copy/pasted the frame’s link into its Jira ticket. This ensured devs could distinguish work in progress from finalized work, allowing them to easily find what they needed to start coding.
Thorough documentation: since the beginning, we knew our engagement was not going to last long. Aware of the amount of heavy lifting we had done, we ensured Foal teams would be able to continue developing identified and future features in hand with the frameworks and tools we established with cross-functional documentation. We recorded the UI Framework in a Confluence page, adding links to Chakra’s resources, our Tailored UI Kit, diagrams for the token pipeline and a demo on how to implement tokens to a Figma frame, as well as pushing additions/changes to code.
Outcomes
Results
After 3 months of heavy lifting, up-skilling and precise communication, we handed over to the client everything they required to implement the 7 features they were looking for. This accomplishment was achieved through two pillars:
A scalable UI Framework: Chakra UI, a tailored UI Kit, hand-over guidelines, Tokens Studio and the project’s GitHub. Our UI Framework enabled Foal teams to expand their interface by themselves through a well oiled, documented and no-cost pipeline that safeguarded the user experience though ingrained UX Laws.
A groomed backlog: we closed the project with a true action plan. Even though devs weren’t able to code all 7 features, we ensured all remaining user stories had everything they needed to be promptly consumed and implemented. We bolstered each ticket by working hand-in-hand with the Foal Management team to add acceptance criteria, priority, estimates, dependencies, technical notes and Figma frames (when applicable) —a structure we established for present and future story tickets.
Next Steps
This engagement was one of those that left me wanting more. Despite the complexity and sheer amount of challenges, having such a great team and work culture made the project something close to a utopia. The next steps for the Foal team were pretty clear: continue with the implementation of the designed and mapped features. However, had we stayed there longer, I would’ve been really excited about all the work that comes after taking such a specialty solution to the market. I would’ve focused post-launch work in three main areas:
Testing and validation: as a designer, the next logical step I was keen to tackle was ensuring we delivered the user experience we designed for. Capitalizing on the fact that design got way ahead of development, I would have started to scheme qualitative research efforts to uncover pain points and friction areas, as well as understand the positive and potential negative impact the solution was having on its early adopters. I would have started out doing usability testings, using activities like task scenarios and role-playing to understand users’ feelings and interactions.
Scrutinizing the data: having worked mostly in agencies, I often lack the opportunity to stay long enough to track and assess results. One area I’m eager to explore in more depth is analytics. I would have loved to dive deeper into the quantiative side by establishing and measuring design KPIs through tools like Hotjar, Mixpanel, or Google Analytics. By performing behavioral analyses, I would have implemented event tracking to examine user actions, identify drop-off points, pinpoint usability issues, and uncover areas for overall improvement.
Expanding the UX beyond the screens: highly specialized products demand equally tailored and focused attention. To ensure an integral user experience, leveraging the insights gathered in the two previous points, I would’ve started efforts around user-facing and client documentation.
Learnings
Looking back, my biggest learnings were:
(Most times) people don’t want to work less, they want to work smart: not gonna lie, design/dev collaboration did not start out as coordinated as it ended. The differences in mental models, ways of understanding the same concepts and role stereotypes were early blockers for our work. Persistence, legit interest and gap awareness kickstarted meaningful conversations. However, the one thing that really allowed us to bridge the mythical design/dev chasm was the fact that we all needed to do a tremendous amount of work and had no time to waste. Sharing tools and frameworks in a “this already does X for us” or in a “Y can help us automate that” fashion ensured org-wide buy-in, securing all the results shared above.
Managers are underrated: here comes a bit of project tattle… After a couple of misunderstandings, Foal’s leadership questioned the need for a manager and ultimately removed them from the project. While we initially handled things "well," by the second week, we were running around like headless chickens in a yard. Some of us had to step further beyond our skill set to compensate for the decision, which directly impacted our output capacity and the quality of our work.
Understanding the business is both the biggest hurdle and the greatest ally: when we were told we were joining a “microservice orchestration company” I was nothing short of baffled. I remember spending the first couple of weeks constantly asking things like “Who else does this out there?” and “Can you explain that thing again?”. That said, once I crossed the knowledge threshold, designing not only became easier, but the results I produced became something truly easy to understand and action for anyone, regardless of their technical knowledge. A huge thanks to the Foal Management team for the genuine patience and interest in having their designer understand their business.
Let's create something together! Hit me up using the following form.
