Designing Juni's products & building the Design team

At Juni I was hired (as the 12th employee) to build up a high performing product design team. I cam in shortly after the core team around the founders have raised seed funding and there there was no product but only a company vision and prototype and a waiting list of early customers showing interest. I cam in on the misison to create a team that takes cusotmers insights into account and build great featutres. Through the next 3,5 years I have been doing the following:

Juni.co

Juni funding (1) (2) (3)

Overview

Overseeing the design of x new products on the platform

Maintaining a continuously updated product visio

Building a design system

Setting up the design team environment adn discipline in the company (incl. UX Research)

Hire, manage and develop for Product Team

My 5 key takeaways on the journey

From vision to beta product launch

First 6 months - working as an Individual contributor (IC) and one junior designer

We had a vision and a prototype why people signed up. But we needed to spread out the work and prioritise what was needed first.

We also did marketing material for ads, email signatures and everything that needed some more attention to visual detials.

Vision concept

Those designs have been used to generate the first attention and creating a waiting list campaign. This was done in by the founding team before I came in to set up the Design team.

Vision concept

Those designs have been used to generate the first attention and creating a waiting list campaign. This was done in by the founding team before I came in to set up the Design team.

Learning from customers

Initially me and the other Designer had calls with everyone on the waiting list to see what they biggest pain points are are understand better why they signed up an what their expectations were. This helped us better prioritize the nice to have features among the must haves that were so clear and fundamental to be build.

Beta product

This was the first design where we translated base functionality from the vision into a functional beta product. Adt first with a much limited feature set, but with a more consistent and scalable design langage.

Outcome / Impact

One of the first things we build was a transactions page and the onboarding flow to be able to bring customers on board easily. We also defined what the first value there should be for customers once onboarded, which was virtual cards. Card exchange was one of the first revenue streams and it was clear that we should make it easy for customers to sign up and access cards.

Coming out of beta - rebranded

First 6 months - working as an Individual contributor (IC) and one junior designer

After 1 year of beta phase, the product was refined and ready for a rebranding. In this collaborative project between Design and Marketing, we worked closely with Verve on a new look and feel of the brand, which needed to be reflected in the product as well

Vision concept

Those designs have been used to generate the first attention and creating a waiting list campaign. This was done in by the founding team before I came in to set up the Design team.

Nothing to show

Success

Something went wrong

Apply for card

New identity

We worked on a new brand statements based on the overall company vision. This included a new tone of voice but also visual elemnents such as a new logo and color palette

Illustrations

Together with a freelancer we explored various illustrations styles, that were based on the initial idea of the pressure lines produced by verve into a set of product illustrations replacing the previous usecases

Nothing to show

Something went wrong

Success

Apply for card

Illustrations

Together with a freelancer we explored various illustrations styles, that were based on the initial idea of the pressure lines produced by verve into a set of product illustrations replacing the previous usecases

Product rebranding

As a result we applied the updated color palette and illustratins back into the product such as the login screen, empty states, sidebar etc.

Outcome / Impact

xxx

Overseeing the design of x new products on the platform

First 6 months - working as an Individual contributor (IC) and one junior designer

After coming out of beta, we have learned about many issues that customers had with there daily finance operations. This builded a backlog for the product roadmap, which has been build yearly and reviewed and adjusted on a quartely basis. Initially the development has been very fast with some design debt accruing, but we started to (adopt) developed a more cohesive process during the product design and development cycles.

Approach

Over times we gained a more deep and wide understanding of the needs around our products and started connecting them in a uniform way using an improved information architecture and building or reusing design patterns. Documenting what we had in a first Design System helped speed up development processes whiles maintaining consistency. Also continious vision prototypes allowed us to explore beyond pure feature requests and evaluate opportunities well connectecd to our long term vision.

Outcome

As a result we devoloped x new features to diversivy our revenue streams and increase the overall user experience. Here is a selection of the most important ones

Maintaining a continuously updated product vision

First 6 months - working as an Individual contributor (IC) and one junior designer

In order to explore new opportunities we developed an annual vision. With each iteration we learned to collaborate better across product and leadership to align expecations and find the best scope for a vision

Approach

Trying out a few different approaches, the last approach we used was to: interviews, CS feedback, Vision, User yourneys

Journey mapping

User journeys helped all involved stakeholders to step back from their responible features or business areas and understand their contributions as a part of an overalll user journey. Mapping out the key areas that are part of the strategy worked as the overall guarding rails

Vision prototyping

The outcome was a vision prototype that illustrated possible solutions to key scearios that were laid out in the vision. (this should be a video). In this case we wanted to highlight a task centric user interfaces that helps user to navigate and resolve the most important finance issues without going through the individual features and parts of the platform

Building a design system

First 6 months - working as an Individual contributor (IC) and one junior designer

With a rebranding happening with out of beta, we wanted to have this reflected in the Product as well and used this opportunity to unify our designs a bit more

Approach

Base our DS on a consolidated 3rd party systems as a basis. Translating the rebrand into components and layouts taking accesibility into accounts. Create our own librarys and connect them to the Frontend team through storybook.

Setting up libraries and processes

Figma library, storybook, first process laid out how to work with DS and contribute to it if it does not cover all cases of the designers, leaving still a lot of autonomy to the team. Dedicating 50%-100% of a Deisgner and FE to set up and maintain the system. We also included a first evaluation round, to track the progress and adoption of the DS ( tile with animating components and a pattern with breakpoints etc.)

Setting up the design team and environment

First 6 months - working as an Individual contributor (IC) and one junior designer

Immediately after joining Juni and approaching Series A round (more infos here), we were in the midst of preparing for scaling the operations. We started to seek first support through freelancers and then opening permanent positions for the team, which required rough role descriptions, onboarding material, and scope of work, and a career outlook.

Establish a user centric workflow
Set up tools that support that
Advocate for Design

We first looked at what the company was based on and what our immediate needs were. We knew, that requriements will change down the line and did not want to implements a very complicated processes that are more taileored fro mature companies, and that we may need to change down the line. We sticked to Notion, Google Suite, and brought Figma and Dovetail to the company.

Starting and scaling a design team

We first looked into freelance then opened positions. We looked at the product teams which were formed around the same time and evaluated how much design work would be needed in each.

The first month we were building bas functionality that were table stakes. Later we entered teretory where we build unique solutions. But we needed to know more about the customer problems and what they woudl make them switch over to Juni.

Competitor Reviews
Connecting to customer success and slaes for feedback on the product
In depth studies on opportunity areas with little knowledge

Setting up design operations and tools

Dovetail, Loom video guides, Notion pages, Insigh reports

Outcome

After being 2 designers being responsible for everything, we split upa the work gradually by each designer serving 2 product teams to 1 designer per product team. This process resulted hiring 10 individuals across Product Design, UX Research and UX Writing over the course of 1,5 years.

Monthly reports, 2 full time resources working across product teams. Research operations to enable Deisgners and Product Managers to carry out studies in a uniform way that could be shared company wide.

Working with Figma was essential in our remote first company. Implementing Dovetail as a research repository helped us documenting our user interviews for exploratory insights and early qualitative testing sessions, before we later included more sophisiticated tools such as PingPong, Maze, Hotjar etc.