

Website design for an online auto-trade cryptocurrency platform.

Venbot

Venbot is an online auto-trade cryptocurrency platform based on signals from the best traders in the industry.

My role was to help improve their website interface and experience. I collaborated with a product manager and a developing team to deliver the new website.

Before the website redesign, I had to create a new visual identity and a brand book.

🔎 Background

The client wished for a new visual identity and website. The website’s new visual direction had to be dark and colourful, gaming-inspired, with neon effect touches and animations. They showed two competitors' websites to offer more details about how the website wished to look in the end.

The website had to include new custom-designed illustrations for each webpage. The client also asked for a pack of icons to integrate into the platform accessed after the login.

The project's budget was small, and a substantial limitation came from the development team. The dev team consisted of one junior-fronted developer. The request was the final website design has a minor impact on the front-end implementation time.

🤔 The problem

⚙️ Working process

I collaborated with the client on two platforms. I used the email to send important updates. I used WhatsApp for quick updates and Google Meet for design presentations.

I used Adobe XD when I created the website and the prototypes for feedback. It was a good choice for a project with no active collaboration. After I finished the design, I shared the file with the development team using Adobe XD too. Most of the assets were extracted later using the development-generated link.

I used Jira to collaborate with the developing team and validate the live website.

I designed the product in six weeks, including the brand identity, the illustrations and icons, and the website.

🎨 Exploring the design

I constructed and presented a mood board to understand where I was supposed to go with the design proposal. The proposed direction considered the information from the client and the one from the dev team.

The website had to be mobile first. The majority of users come from mobile. I aimed to create the best user experience on mobile and adapt it to desktop later.

After I presented and finalised the new visual identity, I started designing the illustrations and icons for the new website.

I designed the visual elements following the client’s descriptions based on a presentation document for B2B collaboration. The entire pack of illustrations and Icons followed the newly created brand guidelines.

Branding elements created for Venbot

To fit the website on all possible devices, I chose to design for the smallest Android screen, a width of 360 pixels, and for the desktop, a width of 1366 pixels. For a great experience, I added the tablet screen, with a width of 768px. All these website design adaptions and breaking points helped the developing team code a complete experience for the user.

The final website design followed three iterations. A major struggle was finding a solution to separate and add focus on the main sections, keeping a dynamic appearance too.

The third version goes more aggressive with the lines and overall look borrowed from the logo and the visual identity.

The design proposals for the Homepage, from the first to the final version.

On mobile, the font alignment helps the overall composition. I decided to align the headline and body sections more to the right, to centre them with illustrations, heavy backgrounds, and central information.

I had difficulties adapting the tables from the “Token Sale” page to the small screens. I found a solution by adding a horizontal scrolling function to the tables on mobile.

The solution adapting a table design to mobile screens.

The homepage headline provides a small transition to show multiple messages.

I introduced this as a solution to the client's need to display long copies in that header area. The small animation also solved the client’s wish for an engaging heading on the homepage.

After receiving the final feedback and the client was happy with the third version, I designed the desktop screens. The changes were minor. Some differences appeared when I introduced supporting illustrations in the top sections, now that I had more room to play with.

Text transition on the homepage.

👩‍💻 Wrapping up for development

I supported the Front-End developer through the entire design implementation phase.

After I finished the design I presented and I asked the development team to look over the final design and send me any feedback they had. Here we decided on the animation used on the homepage too.

This crucial step excluded future problems and complications from not communicating with the team from the start.

I did a design acceptance session on the live website at the end. Following the frontend tasks in Jira, my scope was to test the newly created website and validate that it follows the design specifications.