BullPost
Tools used:
Figma, Framer
Status:
Ongoing
Application Design
From meeting Adam and Matt back in 2021 and getting more involved in the crypto space, we had worked on a few things together before recently embarking on BullPost.
Matt had originally created a coded prototype for a project called Announce It, seeking to give web3 projects the ability to post cross channel across X, Telegram and Discord, platforms that are popular within the crypto industry.
Here I had the opportunity to come onboard and help to design up the application, as well engage in design work in other areas of the project. Below is an example of Matt’s original application.
Prototyping
Like most of the design work I undertake, I like to begin by creating low-fidelity prototypes, not focussing on end visual elements like colour, fonts or imagery, but the foundational building blocks of what makes an application, and more importantly how a user will navigate it.
This work is carried out in Miro, providing a collaborative whiteboard space where we can bounce ideas about, give feedback and make quick iterations.
UI Design
Once these wireframes have been developed to a point where the user flow is clear, getting them into Figma and applying styling follows in the design process. When considering hand-off with the development team, it was important to showcase things like hover states, as well as sub menus that appear throughout the user interface.
For an application like this, I felt it was important to spend a good amount of time working out how the mobile views. The application can get quite busy, so a good amount of design effort was used for figuring out how to streamline the experience whilst taking into account the limited screen real estate.
A central component of the design is the toolbar, providing the user with a range of functionality that they can apply to their post. Below are examples of how the user can translate their content into another language, or use AI to improve or change what they have written.
Landing Page
As well as designing the application within Figma, a landing page was also required to showcase what we are building in the application as well as gathering prospective users on a waitlist for its release.
Framer was utilised here to quickly build this out, allowing us to make changes and iterations very quickly. What’s great about Framer is that I can build the site in Figma and bring the components over, or just use Framer from the start. In the end I used both a combination of sections designed in Figma with some being created from scratch in Framer.
Here is the link: bullpost.ai
Pitch Design
BullPost is currently in development, and a big part of growing interest in the project not only involves the landing page but also the pitch deck to show investors and other interested parties.
For this, it was my first time using the new Figma Slides feature which was really quick to put together, allowing me to copy and paste assets from the main Figma app design and showcase them within the presentation.
Along with facts, figures and diagrams explaining the project, the content closely reflects the landing page, enabling the reuse of information in different contexts.
