Retro: Building The Fund Plug

The Fund Plug exists to support the growth of creativity and innovation in Nigeria by simplifying the process of fundraising. They connect businesses that require funds to start, sustain or scale to investors.

To get a better understanding, Opemipo prepared some brand questions for the client asking about the company’s proposition, values, perception, similar brands and competition. The answers informed our decision to give the brand a youthful and serious about business outlook.

Design

Logo & Branding

I prepared a design brief and reached out to a Design agency and Brand Designer to help us create a new logo and brand identity. Both their invoices came back higher than we expected so we took matters into our own hands.

Logo Inspiration

The logo is literally a plug. The left line represents the founders, the right represents investors while the middle represents The Fund Plug bridging them.

Colours

The client chose Black and White as the brand's main colours. We needed an accent colour to lay emphasis, so we chose Teal because of its calming look.

Colour Scheme

Typeface

We chose Test Signifier for headers and Inter for body copies.

Site Map

Screenshot from the old website

The initial website had various sections for services The Fund Plug offered. This was bound to confuse a first-time visitor. Our goal was to make the website easy to use and understand because of the complexities associated with finance.

We analysed each of the services and separated them into Founders and Investors.

I created the site map using Slickplan. We ended up not implementing a sign-in process

Icons and Illustration

We needed icons to beautify the site and communicate the information in the founders and investors modals. I reached out to an Artist (Vanny) to help create them.

Development

We set out to build the website with no-code tools because of its presumed simplicity. I designed all the pages on Figma and used Webflow to build the interface. The founders application form was the lengthiest part of the site and It had some complexities Webflow couldn’t handle.

Opemipo introduced me to Adedoyin Akande who had in-depth knowledge of how Webflow worked. Adedoyin then explained the three optimal ways to use Webflow:

1. As a UI builder. Webflow is especially good at animating elements on your website.
2. Adding a custom code inside the head tag of your Webflow page.
3. Exporting the code from Webflow and using a code editor to build the rest of your site.

The most feasible option to solve the problem was the third. We exported the code from Webflow and built the founders application form using HTML, CSS and Javascript. I’m not well versed with code, so I watched Adedoyin Akande write the code for all 19 steps in the founders application form.

Storing the Data

We needed the founders to confirm their email addresses before proceeding with the application. I came across a no-code tool called Backendless. It provided email verification services and stored the data but it had some downsides:

1. The database table didn’t look great.
2. The table had a potential to confuse the client because the elements “class” was not the same as the elements name. Data retrieved from the form was transferred to Backendless using each elements “class”.

Displaying the Data

Backendless wasn’t displaying our data the way we wanted and we had to optimise the site to serve both the applicants and client, so I used Typeform to create both the founders and investors application form, neglecting all the code we wrote. I set the logic, embedded the code on the site and tested.

Everything worked smooth, the application form data was stored on an easy-to-navigate table and users could continue their application process from where they stopped.

Deploying the Website

The original site was deployed through cpanel. I compressed the new file because of size, uploaded it to cpanel, archived the old site and extracted the new one.

Boom! https://thefundplug.com/

Things I Learnt

• Various methods to use Webflow.
• Versioning and its importance in documenting workflow within a team.
• Using Javascript to make API calls.
• Asking as many questions as you need. I made the mistake of assuming how the client wanted the product to work and this led me to many dead ends while trying out different solutions.
• The importance to thoroughly research a tool before implementing it on your project. I tried out various tools (Airtable, Zapier, Memeberstack, Firebase) to help with the verification and data storing process but didn’t quite get what I needed.
• I learned to save money by selecting the most optimal options for third-party integrations.

What I liked

• This was my first live web development project and I liked having the responsibility of figuring out the website from design to development.
• I was able to handle the user experience part of the website. It showed my understanding of solving user problems with digital products.
• Collaboration and building relationships helped me get this project over the finish line.

What I lacked

• A design process. The client's method of communicating with the applicants is to send emails. This led to me trying out various solutions because I didn’t ask all the necessary questions I needed to ideate my solution.
• I need to practice UI design more so I can singlehandedly create a website identity.

Big shoutout to these two MVP’s Joyce Odems & Lankey because they were there to help every time I got stuck