Vauban: Start-Ups Investing Faster, Easier And More Accessible

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>What is Vauban</p></div><div><p class="h3-style">Vauban’s goal is to make start-ups investing faster, easier and more accessible by building the infrastructure needed to deploy capital.</p><div class="mt-24 mb-32"><p class="h4-style">They have been helping investors funding $700m in companies such as Airbnb, SpaceX, Tide and many more. Their mission is to democratise private investment and unlock trillions in capital.</p></div></div></div></div><div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Initial stage</p></div><p class="h4-style">We started working with Vauban with a brand identity and website project.  We were able to take this work as a base for the interface project, that the Vauban team offered us to take upon as well.</p><div class="pb-80"></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a3805bc5119326d42f5_vaub-2.png" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr pb-80"><div class="g-7-15"><div class="pt-13"><p>Project goal</p></div><div><p class="h3-style">We had many tasks ahead of us. The most important one was to improve the customer experience and bring clarity in the dashboard both with UI and UX. This left us with:</p><div class="mt-24 mb-16"><p class="h4-style">1. Creating the new platform architecture</p></div><div class="mt-16 mb-16"><p class="h4-style">2. Forming a basis of general UX patterns of the dashboard</p></div><div class="mt-16 mb-16"><p class="h4-style">3. Making a scalable UI kit client’s in-house team can work off</p></div><div class="mt-16 mb-16"><p class="h4-style">4. Making the most important user’s tasks accessible from mobile</p></div></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a38a54e1964db20c824_vaub-3.webp" loading="lazy" alt="" class="s_image_full mb-48"><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a382b8d723de53100b0_vaub-4.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr pb-80"><div class="g-7-15"><div class="pt-13"><p>Inviting experts</p></div><div><p class="h3-style">For this project we have invited several experts.</p><div class="mt-24 mb-16"><p class="h4-style">One of Embacy co-founders is an expert is VC funding and he introduced us to how high-level investing works.</p></div><div class="mt-16 mb-16"><p class="h4-style">We also invited a fintech expert onboard, Natalia Sturza from the studio Angry, which provided UI/UX expertise to finthech companies from UK and was familiar with the market.</p></div><div class="mt-16 mb-16"><p class="h4-style">For the UI design stage we had a consultation with an art director Arthur Baychurin, who has a great experience in B2B services, and service design in general.</p></div></div></div></div>

<div class="p-lr pb-80"><div class="g-7-15"><div class="pt-13"><p>Wireframing stage</p></div><div><p class="h3-style mb-16">We took most crucial scenarios Vauban’s users face and made them into simple wireframes, to set up the basis of the general logic that we had suggested</p><div><p class="h3-style>Sponsor scenarios:</p><div class="mt-24 mb-16"><p class="h4-style">1. Set up container and invite investors. This is an initial stage every sponsor goes through to start a deal or a fund.</p></div><div class="mt-16 mb-16"><p class="h4-style">2. A legal process. We focused on how documents are created and being worked with. Managing legals is the key part.</p></div><div class="mt-16 mb-56"><p class="h4-style">3. Setting up an offering. This was chosen to display how long forms where you set something up work,  Vaubanusers have to do these a lot.</p></div><div><p class="h3-style">Investor scenarios:</p><div class="mt-24 mb-16"><p class="h4-style">1. Onboarding application. All of the investors start their journey with it and it was found confusing and difficult by most users.</p></div><div class="mt-16 mb-16"><p class="h4-style">2. Capital call. Basically, the payment process.</p></div><div class="mt-16 mb-16"><p class="h4-style">3. Redemption. For when investors want out.</p></div><div class="mt-16"><p class="h4-style">*For the investors scenarios we took were basically the little actions investors have available to them to do on the platform</p></div></div></div></div></div>

<img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a382b8d725ca73100af_vaub-5.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr pb-80"><div class="g-7-15"><div class="pt-13"><p>Key interface sections</p></div><div><p class="h4-style">We’ve created many sections and screens, but we want to show the main ones we needed to get 100% right.</p><div class="mt-24 mb-16"><p class="h4-style">Dashboard for an SPV owner was a central dashboard.After all, a  deal-by-deal SPV is Vauban’s key product. It was crucial to show the most important information that a Sponsor needs to know without diving into the inner pages: how fundraising is going and how investors are getting on board and making progress.</p></div><div class="mt-16 mb-16"><p class="h4-style">All the sponsor’s work is about getting investors into the deal or fund and manage that they submit all important documentation, prove their identity, and of course, proceed with payment.</p></div><div class="mt-16 mb-16"><p class="h4-style">The investors dashboard purpose it to make their tasks much easier, so it was important for us to give them instructions one step in reach. Other tasks they may need to access quickly are just in a reach of a tab.</p></div></div></div></div>

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Adapted for phones</p></div><p class="h4-style">For the mobile version we needed to make the most important features accessible. We've removed or hidden all the non-essential functions.</p><div class="pb-80"></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a3837560b27c02a56cb_vaub-6.png" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Typography</p></div><p class="h4-style">There is a wide application of text on the platform. It was important for us to make a broad collection of different text styles that work together well. Each type serves a purpose so it is clear how to combine them.</p><div class="pb-80"></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a37c9c1ec67de981d95_vaub-txt.svg" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Palette</p></div><p class="h4-style">We created a vast palette based on the brand colors with addition of must-have colors for any interface.</p><div class="pb-80"></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a3750b2fbaed2b82acf_vaub-palette.svg" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Grid</p></div><p class="h4-style">The grid needed to be flexible for the content, not to limit ourselves we left the navbar out on desktop, our main device.</p><div class="pb-80"></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a379cd600727b73d5b6_vaub-grid.svg" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Scalable UI-kit</p></div><p class="h4-style">We've created compatible building blocks so that the Vauban team could easily scale their platform.</p><div class="pb-80"></div></div></div><img src="https://assets-global.website-files.com/62e119d58c1c3abc0a13d8f9/63108a38a0f3be635de4607f_vaub-ui.webp" loading="lazy" alt="" class="s_image_full mb-200">

<div class="p-lr"><div class="g-7-15"><div class="pt-13"><p>Testimonial</p></div><div><p class="quote">“As for the interface part of the project we had a difficult task of rethinking the architecture of our system and general UX logic of interacting with our platform. Only after that we could proceed to create the UI look and feel that would be professional, clear and quite simple that also had to resemble the style we developed during our website project.”</p><div class="mt-24 mb-48"><p>Remy Astie, CEO Vauban</p></div><a href="https://clutch.co/profile/embacy?page=2#review-1693991" class="link-l undrln-bl">Full Review</a></div

</div></div><div class="p-lr pt-200"><div class="team-case"><div class="mb-4"><p><b>Producer: </b>Leonid Bondarenko, Anton Andreev</p></div><div class="mb-4"><p><b>Project Manager:  </b>Sofya Narbut</p></div><div class="mb-4"><p><b>Art Direction: </b>Elisey Soloviev</p></div><div class="mb-4"><p><b>Design: </b>Ekaterina Voronenko</p></div><div class="mb-4"><p><b>Illustrator: </b>Lisa Ivanova</p></div></div></div>